Css jon duckett - flashcards

105
CSS

Transcript of Css jon duckett - flashcards

Page 1: Css   jon duckett - flashcards

CSS

Page 2: Css   jon duckett - flashcards

What is the syntax of a css rule?

Page 3: Css   jon duckett - flashcards

How can you apply CSS rule to multiple elements using the same CSS rule?

Page 4: Css   jon duckett - flashcards

Describe the syntax for linking a CSS file to an HTML file?

Alternatively, describe the syntax for writing CSS code in HTML file.

Page 5: Css   jon duckett - flashcards

Describe the CSS file linking elements and attributes

<link> </link>

href = ” ”

rel = ” ”

type = ” ”

Page 6: Css   jon duckett - flashcards

List the 8 basic selectors commonly found in XHTML and HTML 4.

Page 7: Css   jon duckett - flashcards

What is a universal selector? Describe the meaning and give syntax.

Page 8: Css   jon duckett - flashcards

What is a type selector? Describe the meaning and give syntax.

Page 9: Css   jon duckett - flashcards

What is a class selector? Describe the meaning and give syntax.

Page 10: Css   jon duckett - flashcards

What is a id selector? Describe the meaning and give syntax.

Page 11: Css   jon duckett - flashcards

What is a child selector? Describe the meaning and give syntax.

Page 12: Css   jon duckett - flashcards

What is a descendant selector? Describe the meaning and give syntax.

Page 13: Css   jon duckett - flashcards

What is a adjacent sibling selector? Describe the meaning and give syntax.

Page 14: Css   jon duckett - flashcards

What is a general sibling selector? Describe the meaning and give syntax.

Page 15: Css   jon duckett - flashcards

What is the rule of precedence in CSS?

Page 16: Css   jon duckett - flashcards

What is the rule of specificity in CSS?

Page 17: Css   jon duckett - flashcards

SimplePoint: Create generic CSS rules that are used by most elements and specific rules

which only the unique ones do.

Page 18: Css   jon duckett - flashcards

How can you inherit the CSS value which is not inherited by default?

Ex:- how can a <div> element inherit the padding of a <body> element?

Page 19: Css   jon duckett - flashcards

Check for CSS bugs using the following links

BrowserCam.comBrowserLab.Adobe.com

BrowserShots.orgCrossBrowserTesting.com

Page 20: Css   jon duckett - flashcards

Describe the ways in which you can specify the color of text inside a CSS document?

Note: not CSS3

Page 21: Css   jon duckett - flashcards

What is RGB? Describ the syntax.

Page 22: Css   jon duckett - flashcards

What are HEX values? Describe the syntax.

Page 23: Css   jon duckett - flashcards

How would you specify a text color using CSS?

Page 24: Css   jon duckett - flashcards

How would you set a background color for an element using CSS?

Page 25: Css   jon duckett - flashcards

Describe in CSS3: opacity and rgba

Page 26: Css   jon duckett - flashcards

CSS3: What are HSL and HSLA color values?

Page 27: Css   jon duckett - flashcards

What is Hue, Saturation, Lumosity, Alpha? Describe the syntax for hsl and hsla.

Page 28: Css   jon duckett - flashcards

If there were visitors to your website who are using old browsers which do not support

CSS3, how would you optimize your website accordingly for the background-color

property of an element?

Page 29: Css   jon duckett - flashcards

How do you specify a typeface for a font?

Page 30: Css   jon duckett - flashcards

What is the CSS selector for changing the size of the font?

Page 31: Css   jon duckett - flashcards

What are the units of type size?

Page 32: Css   jon duckett - flashcards

How would you use a font in your web page that is not installed in your client's computer

using the font-family property?

Page 33: Css   jon duckett - flashcards

How would you bold or normalize the boldness of a font using CSS?

Page 34: Css   jon duckett - flashcards

How would you italicize a text using CSS?

Page 35: Css   jon duckett - flashcards

How would you make normalize an already italic text using CSS?

Page 36: Css   jon duckett - flashcards

How would you make an UPPERCASE text lowercase?

Page 37: Css   jon duckett - flashcards

How would you make an lowercase text UPPERCASE?

Page 38: Css   jon duckett - flashcards

How would you make text Capitalized?

Page 39: Css   jon duckett - flashcards

How would you add an underline to a text using CSS?

Page 40: Css   jon duckett - flashcards

How would you add an overline to a text using CSS?

Page 41: Css   jon duckett - flashcards

How would you add an strike through to a text using CSS?

Page 42: Css   jon duckett - flashcards

How would you add a blinking feature to a text using CSS?

Page 43: Css   jon duckett - flashcards

How would you normalize an already underlined / overlined / strike through /

blinking text to normal?

Page 44: Css   jon duckett - flashcards

What is Leading in reference to text? How do you calculate Leading?

Page 45: Css   jon duckett - flashcards

How can you change the Leading (height between two lines) using CSS?

Page 46: Css   jon duckett - flashcards

What is Kerning in reference to text?

Page 47: Css   jon duckett - flashcards

How do you change Kerning (space between letters) using CSS? Provide the

syntax.

Would you give the value in ems or px?

Page 48: Css   jon duckett - flashcards

How do you change the space between words using CSS? Provide the syntax.

Would you give the value in ems or px?

Page 49: Css   jon duckett - flashcards

How would you align the text to left, right, center or justify using CSS?

Page 50: Css   jon duckett - flashcards

What is the vertical-align property in CSS? What are the parameters it takes?

Page 51: Css   jon duckett - flashcards

How would you indent a line of text? What all values can you parameters can you give to

the property?

Page 52: Css   jon duckett - flashcards

What are pseudo elements and pseudo classes?

Page 53: Css   jon duckett - flashcards

How would you select the first letter or the first line of a text using CSS?

Page 54: Css   jon duckett - flashcards

How would you set styles for links that have not been visited?

Page 55: Css   jon duckett - flashcards

How would you set styles for links that have been visited?

Page 56: Css   jon duckett - flashcards

How would you set styles for links that have been hovered upon?

Page 57: Css   jon duckett - flashcards

What is :focus pseudo class?

Page 58: Css   jon duckett - flashcards

How would you set styles for links that have been activated? Meaning thereby, when a particular link is being clicked and is in the

stage of being clicked.

Page 59: Css   jon duckett - flashcards

In what order should the pseudo classes be used?

Page 60: Css   jon duckett - flashcards

How would you change the width and height of a box using CSS?

Page 61: Css   jon duckett - flashcards

How would you change the minimum width or minimum height of a box?

Page 62: Css   jon duckett - flashcards

If the content of the box is bigger than the size of the box, how would you code the CSS

such that the extra markup is 1. Hidden 2. Scrolled

Hint: Overflow

Page 63: Css   jon duckett - flashcards

What is padding, border and margin?

Page 64: Css   jon duckett - flashcards

How would you change the width of the border explicitly? What parameters does it

have?

Page 65: Css   jon duckett - flashcards

How can you change style of the border? What values can it take?

Page 66: Css   jon duckett - flashcards

How can you change the color of the border? What values can it take?

Page 67: Css   jon duckett - flashcards

Describe the shorthand syntax for the border property for CSS selectors.

Page 68: Css   jon duckett - flashcards

How would you add border shadow to a box in CSS?

Page 69: Css   jon duckett - flashcards

What is the short hand for border shadow in CSS?

Page 70: Css   jon duckett - flashcards

How would you add border radius to an element using CSS?

Page 71: Css   jon duckett - flashcards

How would you change the padding for the top / bottom / right / left for different

elements?

What is the shorthand syntax to do all this in one go?

Page 72: Css   jon duckett - flashcards

How would you change the margin for the top / bottom / right / left for different

elements?

What is the shorthand syntax to do all this in one go?

Page 73: Css   jon duckett - flashcards

How would you center a box on a page or the elements inside it?

Page 74: Css   jon duckett - flashcards

How would you turn an inline element behave as a block level element or vice

versa?

Page 75: Css   jon duckett - flashcards

How would you hide an element from the page using the display property?

Page 76: Css   jon duckett - flashcards

How do you make a block level element flow like an inline one while retaining its own

features?

Page 77: Css   jon duckett - flashcards

How would you create a navigation for a website?

Practical: Create one

Page 78: Css   jon duckett - flashcards

How would you hide or show the visibility of a box?

Alternate: Explain what the visibility property can do and what parameters are given to it?

Page 79: Css   jon duckett - flashcards

CSS3: How would you display round borders?

Page 80: Css   jon duckett - flashcards

CSS3: How would you create elleptical borders?

Page 81: Css   jon duckett - flashcards

LAYOUTS

Page 82: Css   jon duckett - flashcards

List the four types of positioning schemes available in CSS.

Page 83: Css   jon duckett - flashcards

What is static positioning?

Page 84: Css   jon duckett - flashcards

If there are 3 <div> elements and the CSS rule states

div{position: static;height: 100px;width: 100px;border: 1px solid black;}

How would the elements be placed

Page 85: Css   jon duckett - flashcards

What is relative positioning?

Describe the syntax.

Page 86: Css   jon duckett - flashcards

What is absolute positioning?

Describe the syntax.

Page 87: Css   jon duckett - flashcards

What is z-index? Describe the syntax of z-index property.

Page 88: Css   jon duckett - flashcards

There are two overlapping <div> elements, first one with a z-index property set to 1 and

the other's set to 50.

Which one would appear over the other?

Page 89: Css   jon duckett - flashcards

Describe the use and syntax of the float property.

Page 90: Css   jon duckett - flashcards

How would you use the float property to stack the elements side by side?

Page 91: Css   jon duckett - flashcards

If there are two <div> elements inside a <div> wrapper and the elements are given

float: right; float: left;

properties, where would the elements be placed?

Page 92: Css   jon duckett - flashcards

What is clear property? What four values can it take?

Page 93: Css   jon duckett - flashcards

If the float property of a div element is set to left, what does it mean?

Page 94: Css   jon duckett - flashcards

Repeat for right, both and none.

Page 95: Css   jon duckett - flashcards

How would you create a multi column layout using floats?

Page 96: Css   jon duckett - flashcards

CSS Frameworks

blueprintcss.org

lessframework.com

developer.yahoo.com/yui/grids/

Page 97: Css   jon duckett - flashcards

How would you align the image to the left or the right of the parent element?

Page 98: Css   jon duckett - flashcards

How would you align an image in the center of the parent <div> element? List and explain

the two ways in which this can be done.

Page 99: Css   jon duckett - flashcards

How would you set a background image to an element?

Page 100: Css   jon duckett - flashcards

Using which property can you control how many times the displayed image is repeated?

Page 101: Css   jon duckett - flashcards

How can you control the repetition of images horizontally?

Page 102: Css   jon duckett - flashcards

How can you control the repetition of images vertically?

Page 103: Css   jon duckett - flashcards

How can you control the repetition of images in both sides?

Page 104: Css   jon duckett - flashcards

How can you disable the repetition of images?

Page 105: Css   jon duckett - flashcards

What is background-attachment property for background images?

What is meant by1. background-attachment: fixed;2. background-attachment: scroll;