CSS CSS Precise Aesthetic Control

Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains style commands for elements and tags on the HTML page o HTML page marks up content/CSS defines how content will look Will define colors, positions, white space, behaviors, and much more

Inside the Box Imagine every HTML element has an invisible box around it With CSS we can define colors, borders, positions, arrangements, margins, etc. of what these boxes will do. This is an H1 heading

Block vs Inline The majority of elements are “Block.” This means they will start on a new line on the screen o H1-H9,,,,, Many of these come with automatic margins on top and bottom (lists automatically push out to the right) A Firefox extension like Firebug or “Inspect Element” in Chrome will help show you these so you can alter them with CSS.

Inline Inline elements do not start on a new line, rather they flow within the text. This word is bold. This word is bold Follow me Here

Linking to Style Sheet Create a new document in text editor and “Save As” a.css file Type this into your header : The bolded part above should correspond with whatever you named the style sheet file Note this is a self-closing tag even though normal links are not

Format: Selector and Declarations h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } Element being defined Open moustache bracket Property followed by colon Value followed by semi-colon Close moustache bracket

Selectors & Declarations h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } Properties cannot be made up. There are officially named properties and must be spelled exactly. You can put as many properties as you need on a selector. Order of declarations (usually) does not matter

Hooking into Selectors h1 { font-family: Arial, sans-serif; color: green; font-size: 50px; } Note that tags are selected/hooked (the part before the brackets) merely by writing the tag name. body { background-color: black; }

ID Hooking HTML: CSS: #container { width: 800px; height: auto; } IDs are hooked to from the CSS with a hashtag in front of the ID name

Class Hooking HTML: CSS:.stylized { color: green; font-size: 20px; } Classes are hooked to from the CSS with a period in front of the class name

Multiple Selectors doing the Same Thing a:link, a:visited { text-decoration: none; color: blue; } When stylizing multiple selectors the same way, just put a comma between them in the selection section of your CSS command.

Inheritance When elements are nested inside other ones, they become “children” to the “parent” element they are inside of. Hey Some paragraph Because of this, we can define a font on the body (which is everything) and that same font will cascade to everything in the document. So you don’t need to define a font for the paragraphs, lists, etc. (unless you want them to be different from what you define on the body).