CSS

Web Instructions: Three Legs HTML Content CSS Presentation JavaScript Behavior

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 http://www.utexas.edu/learn/html/spchar.html

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

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

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

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

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

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

Commonly Used Tags & Properties full reference sheet

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

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;

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

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