CSS

1. CSS Precise Aesthetic Control

2. 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 • HTML page marks up content/CSS defines how content will look • Will define colors, positions, white space, behaviors, and much more

3. 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. <h1>This is an H1 heading</h1> This is an H1 heading

4. Block vs Inline • The majority of elements are “Block.” This means they will start on a new line on the screen • H1-H9, <p>, <a>, <img>, <ul>, <div> • 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.

5. Inline • Inline elements do not start on a new line, rather they flow within the text. • This word is bold. • <p>This word is <b>bold</b> • <p>Follow me<ahref=“http://twitter.com”> Here</a></p>

6. IDs vs Classes • So far we have written simple tag elements and added some basic attributes • <p>This is a paragraph.</p> • <imgsrc=“picture.jpg.” alt=“description of picture” /> • The only problem here is that CSS descriptions of how paragraphs and images look will affect ALL of then site wise in the same manner. • Sometimes we want a certain element to behave differently than the majority of that element

7. Classes • Classes allow us to make an element behave differently if we apply a specific class attribute to it. <p class=“stylized”>This paragraph will have it’s own unique paragraph styling.</p> • Class names can be anything, but they should be descriptive of what you make them do. • Classes can be reused all over a page, even on different elements, as long as you want the styling of that class on something

8. IDs • IDs are similar to classes but they cannot be reused. When you give an element an ID, you make it uniquely special. <ul id=“navigation”> <li>Home</li> <li>Contact</li> </ul>

9. IDs • An element can have only one ID • Good • <div id=“leftcolumn”> • Bad • <div id=“leftcolumn” id=“stylized”> • Each page can have only one element with that ID • This is different from classes which can be used all over the page on different elements.

10. Linking to Style Sheet • Create a new document in text editor and “Save As” a .css file • Type this into your header: <link href="stylesheet.css" rel="stylesheet" type="text/css" /> • 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

11. 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

12. 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 declarations as you need on a selector. • Order of declarations does not matter

13. 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; }

14. ID Hooking HTML: <div id=“container”> CSS: #container { width: 800px; height: auto; } • IDs are hooked to from the CSS with a hashtag in front of the ID name

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

16. 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.

17. Inheritance • When elements are nested inside other ones, they become “children” to the “parent” element they are inside of. <body> <h1>Hey</h1> <p>Some paragraph</p> </body> 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).