Web DevelopmentUsing PHP
Introduction to CSS
Wednesday - Class 03
- Feedback on HTML worksheets
- What is CSS? Take a look at CSS Zen Garden
- View the page source
- View CSS sheets
- What advantages could you see in separating content from style?
- Show how to "inspect element" to see what styles are applying to an element you are interested in.
- Show how to modify "live" the style of an element.
- Start covering CSS
- HTML5 will come after CSS
- Link to worksheet: [DOCX]
- Take a look at the more complex examples at the end of the tutorial even though there are no questions over them.
Most of the answers for this worksheet may be found at the w3schools.com website: http://w3schools.com/css/
- What does CSS stand for?
- What is the advantage of using CSS?
- Write an example CSS rule and label the selector, declaration, property and value.
- How are comments done in a CSS sheet?
- Conceptually, what is the difference between an id selector and a class selector?
- Give examples of: HTML Element selector, id selector, and a class selector.
- What are the three ways to use CSS in a document?
- If multiple styles are specified for an html element, in what order are evaluated? (Later ones being higher priority.)
- Write the CSS code to set the background color for an entire document to white:
- Give an example of setting properties for the background by using the shorthand property:
- Show how to set the color of text in h1 headings to red:
- Show how to center-align the text in a paragraph:
- Show how to indent the first line of a paragraph by 50 pixels:
- What is the difference between a serif font, and a sans-serif font?
- Give two examples of font families:
- What is different about a monospace font?
- Show how to set the font size for a paragraph to 12 pixels.
- What is the difference between setting the font size via pixels or via em?
- Show 1 of the 4 lines required to remove underlines from hyperlinks:
- Show how to set the vertical alignment of text in a table cell so that it is at the top.
- Sketch out the CSS box model, showing content, padding, border, and margin:
- Show how to put a 2 pixel solid border around a paragraph:
- Show how to put a 25 pixel margin below h1.
- Using grouping, show how to set the text color of h1, h2, and h3 to red.
- Show how to set the width of a paragraph to 800 pixels.
- What is the difference between a hidden element, and an element that is not displayed?
- What is the difference between a block element, and an in-line element?
- What is the difference between static, fixed, relative, and absolute positioning?
- What is does CSS float do?
- Give an example of a CSS pseudo-class:
- Introduce common color theory terms
- (Homework, read: http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/)
- See it in action:
- Browse schemes
Practice Applying CSS
You are not logged in. Log in here and track your progress.