css jon duckett - flashcards
Post on 16-Jul-2015
133 Views
Preview:
TRANSCRIPT
CSS
What is the syntax of a css rule?
How can you apply CSS rule to multiple elements using the same CSS rule?
Describe the syntax for linking a CSS file to an HTML file?
Alternatively, describe the syntax for writing CSS code in HTML file.
Describe the CSS file linking elements and attributes
<link> </link>
href = ” ”
rel = ” ”
type = ” ”
List the 8 basic selectors commonly found in XHTML and HTML 4.
What is a universal selector? Describe the meaning and give syntax.
What is a type selector? Describe the meaning and give syntax.
What is a class selector? Describe the meaning and give syntax.
What is a id selector? Describe the meaning and give syntax.
What is a child selector? Describe the meaning and give syntax.
What is a descendant selector? Describe the meaning and give syntax.
What is a adjacent sibling selector? Describe the meaning and give syntax.
What is a general sibling selector? Describe the meaning and give syntax.
What is the rule of precedence in CSS?
What is the rule of specificity in CSS?
SimplePoint: Create generic CSS rules that are used by most elements and specific rules
which only the unique ones do.
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?
Check for CSS bugs using the following links
BrowserCam.comBrowserLab.Adobe.com
BrowserShots.orgCrossBrowserTesting.com
Describe the ways in which you can specify the color of text inside a CSS document?
Note: not CSS3
What is RGB? Describ the syntax.
What are HEX values? Describe the syntax.
How would you specify a text color using CSS?
How would you set a background color for an element using CSS?
Describe in CSS3: opacity and rgba
CSS3: What are HSL and HSLA color values?
What is Hue, Saturation, Lumosity, Alpha? Describe the syntax for hsl and hsla.
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?
How do you specify a typeface for a font?
What is the CSS selector for changing the size of the font?
What are the units of type size?
How would you use a font in your web page that is not installed in your client's computer
using the font-family property?
How would you bold or normalize the boldness of a font using CSS?
How would you italicize a text using CSS?
How would you make normalize an already italic text using CSS?
How would you make an UPPERCASE text lowercase?
How would you make an lowercase text UPPERCASE?
How would you make text Capitalized?
How would you add an underline to a text using CSS?
How would you add an overline to a text using CSS?
How would you add an strike through to a text using CSS?
How would you add a blinking feature to a text using CSS?
How would you normalize an already underlined / overlined / strike through /
blinking text to normal?
What is Leading in reference to text? How do you calculate Leading?
How can you change the Leading (height between two lines) using CSS?
What is Kerning in reference to text?
How do you change Kerning (space between letters) using CSS? Provide the
syntax.
Would you give the value in ems or px?
How do you change the space between words using CSS? Provide the syntax.
Would you give the value in ems or px?
How would you align the text to left, right, center or justify using CSS?
What is the vertical-align property in CSS? What are the parameters it takes?
How would you indent a line of text? What all values can you parameters can you give to
the property?
What are pseudo elements and pseudo classes?
How would you select the first letter or the first line of a text using CSS?
How would you set styles for links that have not been visited?
How would you set styles for links that have been visited?
How would you set styles for links that have been hovered upon?
What is :focus pseudo class?
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.
In what order should the pseudo classes be used?
How would you change the width and height of a box using CSS?
How would you change the minimum width or minimum height of a box?
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
What is padding, border and margin?
How would you change the width of the border explicitly? What parameters does it
have?
How can you change style of the border? What values can it take?
How can you change the color of the border? What values can it take?
Describe the shorthand syntax for the border property for CSS selectors.
How would you add border shadow to a box in CSS?
What is the short hand for border shadow in CSS?
How would you add border radius to an element using CSS?
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?
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?
How would you center a box on a page or the elements inside it?
How would you turn an inline element behave as a block level element or vice
versa?
How would you hide an element from the page using the display property?
How do you make a block level element flow like an inline one while retaining its own
features?
How would you create a navigation for a website?
Practical: Create one
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?
CSS3: How would you display round borders?
CSS3: How would you create elleptical borders?
LAYOUTS
List the four types of positioning schemes available in CSS.
What is static positioning?
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
What is relative positioning?
Describe the syntax.
What is absolute positioning?
Describe the syntax.
What is z-index? Describe the syntax of z-index property.
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?
Describe the use and syntax of the float property.
How would you use the float property to stack the elements side by side?
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?
What is clear property? What four values can it take?
If the float property of a div element is set to left, what does it mean?
Repeat for right, both and none.
How would you create a multi column layout using floats?
CSS Frameworks
blueprintcss.org
lessframework.com
developer.yahoo.com/yui/grids/
How would you align the image to the left or the right of the parent element?
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.
How would you set a background image to an element?
Using which property can you control how many times the displayed image is repeated?
How can you control the repetition of images horizontally?
How can you control the repetition of images vertically?
How can you control the repetition of images in both sides?
How can you disable the repetition of images?
What is background-attachment property for background images?
What is meant by1. background-attachment: fixed;2. background-attachment: scroll;
top related