1. CSS

2. Web Instructions: Three Legs
HTML
Content
CSS
Presentation
JavaScript
Behavior

3. Special symbols in HTML
< and > are special symbols with special meanings
How would you display A < B ?
Suggestions?
< for < and > for >
& is an escape symbol, handled specially.
Always ends with ;
Means that you need a special way to display
“&” too: &
Good list at

4. CSS... CSS is for giving style to your content HTML: content
CSS: style
CSS Zen Garden

5. What can you change? Font: size, color, style Background Border
More on color next week
For now, by name
Background
Border
Must have size color and style
Position: margins, centering
Size

6. Font Families Preferable to use: universality
Multiple fonts: use first available

7. Defining size pt refers to printer’s font measurement
px refers to pixels
em is a relative measure
1 em = base size (defined in body or default)
Great for changing all at once

8. Syntax (how it looks) Selector specifies the HTML element to style
Declaration:
always contains a property & value
ends with a semicolon
Property: style element you want to change
Value: what you are changing the property to
Next we’ll discuss the syntax of css. It’s a different language from html, so it will look a little bit different.
Selector allows us to choose a tag from the html to edit

9. Formatting your CSS Formatting Practices:
some flexibility, but you must be consistent.
always comment unclear code!
/* someCommentHere */
curly braces
tab alignment
Bad practices:
declarations on the same line as braces or selector
multiple declarations on the same line
leaving off the last semi-colon

10. Commonly Used Tags & Properties
full reference sheet

11. Every element is in box
With very few exceptions, every element in HTML has a box that it is held in
Can make it visible with background and border

12. Centering
centering the TEXT text-align: center; centering the BOX Need to tell it to treat as a block display: block; Must have a width (px or %) display: table; computes it for you center using margin margin-left: auto; margin-right: auto;

13. Centering list items One of the areas with browser differences
In some cases (Firefox), centering text centers the bullet
In other cases (Chrome), centering text does not center the bullet
Solution:
list-style-position: inside;
bullets INSIDE the list item’s formatting

14. PSEUDO-ELEMENTS selector::pseudo-element
Style the first letter, or line, of an element
first-line
first-letter
Insert content before, or after, the content of an element
before
after