Basics CSS

1. Basics CSS Chapter 3 and chapter 4 Page Sections and the CSS Box Model http://jigsaw.w3.org/css-validator/

2. Inheriting styles (explanation) CSS body { font-family: sans-serif; background-color: yellow;} p { color: red; background-color: aqua; } a { text-decoration: overline underline; } h2 { font-weight: bold; text-align: center; } Output • when multiple styles apply to an element, they are inherited • a more tightly matching rule can override a more general inherited rule • not all properties are inherited (notice link's color above)

3. The HTML id attribute and Internal Linking • idattribute allows you to give a unique ID to any element on a page • each ID must be unique; can only be used once in the page CSS <p>Spatula City! Spatula City!</p> <p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers<q>esplode</q> with splendor!</p> Output Spatula City! Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers "esplode" with splendor!

4. The HTML id attribute and Internal Linking • The atag can be used to link to another section of the same document by specifying the element’s idas the link’s href. • a link target can include an ID at the end, preceded by a # • browser will load that page and scroll to element with given ID CSS <p>Visit <a href= "http://www.textpad.com/download/index.html#downloads"> textpad.com </a> to get the TextPad editor. </p> <p><a href="#mission">View our Mission Statement</a></p> Output Visit textpad.com to get the TextPad editor. View our Mission Statement

5. The HTML id attribute and Internal Linking Sets the id attribute for the h1 element Creates a link to the element in this document with id = bugs

6. The HTML id attribute and Internal Linking Sets the id attribute for this h1 element Creates a link to the element in this document with id = features

7. CSS ID selectors • ID Selector: CSS rule that applies only to a particular element on the page with a given ID. • In our example style applies only to the pthat has the ID of mission • Rule can be specified explicitly using a hash sign (#) followed by the id to select such as #mission • Also tagname#idcab be use: p#mission means the rule will be applied on p with id mission CSS #mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; } Output Spatula City! Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

8. The HTML class attribute • If you want to apply the same style to a several paragraphs, then the id attribute is not a good choice • An id must be unique; no two elements can have the same id value. • classesare a way to group some elements and give a style to only that group (I don't want ALL paragraphs to be yellow, just these three...) • unlike an id, a classcan be reused as much as you like on the page CSS <p class="shout">Spatula City! Spatula City!</p> <p class="special">See our spectacular spatula specials!</p> <p class="special">Today only: satisfaction guaranteed.</p> Output Spatula City! Spatula City! See our spectacular spatula specials! Today only: satisfaction guaranteed.

9. The CSS class selectors • Style-class declarations are precededby a periodand are applied to elements of the specific class • The HTML class attribute applies a style class to an element • Class selector is a CSS rule that applies only to particular elements on the page that have a given class .special { /* any element with class="special" */ background-color: yellow; font-weight: bold; } p.shout{ /* applies only to p elements with class=“shout" */ color: red; font-family: cursive; } CSS Output applies rule to any element with class special, or a p with class shout

10. The CSS for tables • caption-side CSS property sets the position of the table caption: • Can be top (default), bottom, left, right CSS table { caption-side: left; } • What will happen if we want to style columns? • One option: create a class for the column then set the class attribute of each td and th tag in the column to be that of CSS class • Another option to use the HTML col and colgroup elements to alter the appearance of the tag • The <col> tag is useful for applying styles to entire column or set of columns , instead of repeating the styles for each cell, for each row • It can only be used inside a <table> or a <colgroup> element

11. The CSS for tables • Define two CSS classes CSS .title { background-color : red; } .price { background-color : yellow; } <table border="1"> <caption> Web Titles</caption> <colgroup class = "title"> <col /> <col /> <col class="price" /> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table> <colgroup class = "title"> <col span="2"/> <col class="price" /> </colgroup> <colgroup > <col span="2" class = "title"/> <col class="price" /> </colgroup>

12. CSS pseudo-classes a:link { color: blue; } /* unvisited link */ a:visited { color: red; } /* visited link */ a:hover { color: green; } /* mouse over link */ a:active {color: black;} /* selected link */ CSS

13. Motivation for page sections • want to be able to style individual elements, groups of elements, sections of text or of the page • (later) want to create complex page layouts

14. CSS for following examples • for the next several slides, assume that the following CSS rules are defined CSS .special { background-color: yellow; font-weight: bold; } .shout { color: red; font-family: cursive; }

15. Sections of a page: <div> Represents a major section or division of your HTML page (block) HTML <div class="shout"> <h2>Spatula City! Spatula City!</h2> <p class="special">See our spectacular spatula specials!</p> <p>We'll beat any advertised price!</p> </div> Output • a tag used to indicate a logical section or area of a page • has no appearance by default, but you can apply styles to it

16. Inline sections: <span> • an inline element used purely as a range for applying styles • Mostly used when you have a short inline piece of text that you want to apply a style to it HTML <h2>Spatula City! Spatula City!</h2> <p>See our <span class="special">spectacular</span> spatula specials!</p> <p>We'll beat <span class="shout">any advertised price</span>!</p> Output • has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span 16

17. CSS context selectors • Context selector: a CSS rule that applies only to elements that reside inside another particular elements outerSelectorinnerSelector { property: value; property value; … } CSS • applies the given properties to selector2only if it is inside a selector1on the page selector1 selector2 { properties } CSS • applies the given properties to selector2only if it is directly inside selector1on the page (selector2 tag is immediately inside selector1 with no tags in between) selector1 > selector2 { properties }

18. Simple Example of CSS context selectors HTML <p>Shop at <strong>Hardwick's Hardware</strong>...</p> <ul> <li>The <strong>best</strong> prices in town!</li> <li>Act while supplies last!</li> </ul> CSS li strong { text-decoration: underline; } Output

19. More complex example of CSS context selectors HTML <div id="ad"> <p>Shop at <strong>Hardwick's Hardware</strong>...</p> <ul> <li class="important">The<strong>best</strong> prices!</li> <li>Act <strong>whilesupplieslast!</strong></li> </ul> </div> CSS #ad li.important strong { text-decoration: underline; } Output

20. Introduction to Layout Document flow - block and inline elements • Browsers uses a standard layout for pages. • Block elements are laid out in the order they appear in the document from top to left. • Each block causes a line break. • A block element’s widthis equal to entire page width in the browser. • A block element’s heightis just enough to fit its text and contents. • A Block element may contain several inline elements. <body> <h1> … </h1> <h2> … </h2> <p> … </p> <h2> … </h2> <p> … </p> <p> … </p> </body> <p> Today, <em> 24 hrs only </em>, blowout sale! See <ahref = “products.html”> Products </a> info. </p>

21. The CSS Box Model • For layout purposes, every element is composed of: • the actual element's content • a border around the element • padding between the content and the border (inside) • a margin between the border and other content (outside) • Box model is a set of rules that governs the size, shape, spacing, borders, and margins of page elements • width = content width + L/R padding + L/R border + L/R margin • height = content height + T/B padding + T/B border + T/B margin • L: left; R: right; T: top; B =bottom

22. CSS properties for borders CSS h2 { border: 5px solid red; } Output

23. More border properties

24. Border example 2 h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } Output • each side's border properties can be set individually • if you omit some properties, they receive default values (e.g. border-bottom-width above)

25. Rounded corners with border-radius (CSS3) P { border: 3px solid blue; border-radius: 12px; padding: 0.5em; } Output • each side's border radius can be set individually, separated by spaces

26. CSS properties for padding

27. Padding example 1 p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; } Output

28. Padding example 2 p { padding-left: 150px; padding-top: 30px; background-color: fuchsia; } Output • each side's padding can be set individually • notice that padding shares the background color of the element

29. CSS properties for margins

30. Margin example 1 css p { margin: 50px; background-color: fuchsia; } Output • notice that margins are always transparent (i.e., they don't contain the element's background color, etc.)

31. Margin example 2 css p { margin-left: 8em; background-color: fuchsia; } Output • each side's margin can be set individually

32. CSS properties for dimensions • Block element: default position is staked down vertically; default width is 100% of the page width; default height is the height of its inline content. • Inline element: default position is left-to-right within the block ; default size is just large enough to fit its contents. • Can we change these default values? css p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; } Output

33. Centering a block element: auto margins p { margin-left: auto; margin-right: auto; width: 750px; } css Output • auto lets the browser decide the margins. • Setting both margin sides to autoplaces the elements horizontally in the center • works best if width is set (otherwise, may occupy entire width of page) • to center inline elements within a block element, use text-align: center;

34. Finding box model with Firebug http://getfirebug.com/ Powerful add-on tool that allows you to inspect the code to see a visual layout of its box model