Why use stylesheets? Why use stylesheets? Some (positioning) definitions Some (positioning) definitions What is a float? What is a float? The.

Why use stylesheets? Why use stylesheets? Some (positioning) definitions Some (positioning) definitions What is a float? What is a float? The document tree The document tree The Box Model The Box Model Other CSS issues and bugs Other CSS issues and bugs Browser support chart Browser support chart Basic style rules Basic style rules Introduction to CSS Introduction to CSS What is semantic markup? What is semantic markup? The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct. More accessible to a wider variety of devices Easier to make site-wide changes - one css file rather than all pages Smaller files/ faster download - less code on the page Less code on the page - easier to code Allows users to customise to their own needs - style switchers More control over code - can deliver code in preferred order for screen readers The viewport The viewport is the window or viewing area that displays web pages. When the viewport is smaller than the web page, scroll bars should be available. The initial containing block The initial containing block is the entire width and height of your web page - including parts of the page that are outside the viewport. Containing blocks or containing boxes A containing block is a box or block that contains other elements (descendant boxes). An element's containing block means "the containing block in which the element lives". Block-level elements Block-level elements and block boxes Block level elements (or block boxes) are elements that are formatted visually as blocks. For example, a paragraph of text: Inline-level elements Inline-level elements and inline boxes Inline elements are elements that do not form new blocks of content - the content is distributed in lines. For example, an emphasized piece of text within a paragraph: Normal flow Normal flow is the way a document will display if you had no positioning or floating applied to elements. The content will flow down the page, starting with the first element in your document and finishing with the last element in your document. Out of normal flow When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it. Static positioning A statically positioned box is one that is in normal flow (see above). Float positioning A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. Relative positioning Relatively positioned elements are positioned within the normal flow and then moved. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its normal flow position - leaving a gap for it. Absolute positioning An absolute positioned box is moved out of the normal flow entirely. Fixed positioning Fixed positioned elements are moved out of the normal flow entirely - relative to the viewport. This means that they do not move if the page is scrolled. Win/IE5 and Win/IE6 do not support this positioning method at all. When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are "float: left", "float: right" or "float: none". A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box. You can also put several floats beside each other. Where will a floated element move to? Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float. If there is not enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it. Do floated items need a width? You should always set a width on floated items (except if applied directly to an image - which has implicit width). W3C's Cascading Style Sheets, level 2, CSS2 Specifications states: "A floated box must have an explicit width...""A floated box must have an explicit width..." If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser. Elements above and below floated elements Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element: Borders, background images and background colour While content will wrap around a floated element, border, background image and background colour will extend underneath. If you do not want elements below a floated element to wrap around it, you can apply the clear property to the following element using "clear: left", "clear: right" or "clear: both". Floats and "clear" Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none". Each level of the tree is described in the same manner as a human family tree, with ancestors, descendants, parents, children and siblings. CSS rules are based on the document tree. If you understand the document tree concept, then CSS selectors will be easy to understand and apply. Heading here Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. item 1 item 2 item 3 Ancestor An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. In the diagram below, the element is the ancestor of all other elements on the page. Descendant A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower. In the diagram below, all elements that are connected below the element are descendants of that. Parent A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the is a parent to the. Child A child is an element that is directly below and connected to an element in the document tree. In the diagram above, the is a child to the. Sibling A sibling is an element that shares the same parent with another element. In the diagram below, the 's are siblings as they all share the same parent - the. Internet Explorer is still the main browser on the web at present. This means that at some point you will have to deal with IE's incorrect interpretation of the Box Model. In simple terms this means that some versions of IE render the box model to a different width than other Standards browsers. So, your CSS styled list may look narrower in IE compared to other browsers. IEs Quirks mode and Standards mode (IE6) This section is no longer relevant for IE versions later than IE7 or 8 The diagram shows that if a content box is set to 200px wide with 20px of padding and a 20px wide border, the correct method of calculating the overall box width is: content (200px) + padding (20px+20px) + borders (20px+20px) = 280px. However, some versions of IE calculate the width as: content, padding and borders together = 200px. The solutions are to work around the problem using nested divs, use one of many box model hacks or ensure page rendered in Standards mode. A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block. Selector The selector "selects" the elements on an HTML page that are affected by the rule set. The selector consists of everything up to (but not including) the first left curly bracket. For example: h1 { color: blue; margin-top: 1em; } p { padding: 5px; } td { background-color: #ddd; } Declaration block The declaration block is a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored - so it can be used to lay out rules in any way you want. For example: h1 { color: blue; } p { padding: 5px; } td { background-color: #ddd; } or, with whitespace added to aid readability: h1 { color: blue; } Declaration The declaration tells a browser how to draw any element on a page that is selected. A declaration consists of a property and a value, separated by a colon ":". Although it is not essential to add a semicolon after a single declaration, it is recommended that you finish the last declaration in a block with a semicolon. For example: h1 { color: blue; } Property The property is the aspect of that element that you are choosing to style. There can only be one property within each declaration. For example: p { padding: 5px; } Value The value is the exact style you wish to set for the property. For example: p { padding:5px; } Selectors are used to "select" the elements on an HTML page that are affected by rules. When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma. For example: h1, h2, h3, h4 { padding: 1em; }.highlight p,.highlight ul { margin-left:.5em; } #main p, #main ul { padding-top: 1em; } There are two common mistakes that people make when grouping selectors. The first is forgetting to write each selector in full. For example, if you are trying to target two elements within the same containing block, and with the same ID, chances are you will probably want them to be written in the same way. So, this is probably wrong: #maincontent p, ul { border-top: 1px solid #ddd; } The correct group selector would more likely be: #maincontent p, #maincontent ul { padding-top: 1em; } The second common mistake is to end the grouping with a comma. This can cause certain browsers to ignore the rule entirely..highlight p,.highlight ul, { margin-left:.5em; } Rules can be combined, allowing you specify several properties with one rule set. The biggest advantage is that your CSS code becomes shorter. For example the two rule sets below have exactly the same effect: p { padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; } p { padding: 1em; } If property values are different for all sides, shorthand can still be used. The order of each value is important. Values are applied in the following order; top, right, bottom and left - clockwise, starting at the top. For example the first rule set below can be shortened: p { padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; } p { padding: 1em 2em 3em 4em; } You can use one, two, three and four values within a shorthand declaration. For example, the rule below will apply padding to all sides of a box: p { padding: 1em; } The rule below will apply 1em of padding to the top and bottom, and 2em of padding to the left and right of the box. p { padding: 1em 2em; } The rule below will apply 1em of padding to the top, 2em of padding to the left and right, and 3em to the bottom of the box. p { padding: 1em 2em 3em; } The rule below will apply 1em of padding to the top, 2em of padding to the right, 3em of padding to the bottom and 4em of padding to the left of the box. p { padding: 1em 2em 3em 4em; } Browser support for shorthand rules varies. Browser Support for CSS Netscape Navigator 1,2,3No support. Internet Explorer 2No support. Internet Explorer 3Very limited, buggy support. Opera (prior to version 3.5)No support. Opera 3.5Relatively comprehensive and good support. Netscape Navigator 4, 4.5 Windows and Macintosh Partial, buggy support. Text, color, background and positioning basics can be used safely, but with care. Internet Explorer 4 Windows and Macintosh Partial, buggy support. Text, color, background, border and positioning basics can be used safely, but with care. Somewhat better than Navigator 4 but far from perfect. Internet Explorer 4.5 Macintosh Considerably better support for basic and advanced features than version 4 and Navigator. Internet Explorer 5 MacintoshExcellent support for CSS1 and much of CSS2. Care still is required. Internet Explorer 5 Windows Considerably better support for basic and advanced features than version 4 and Navigator. Internet Explorer 5.5 Windows Support for CSS1 and some of CSS2 is adequate, and improved over version 5 for Windows. Still not as comprehensive as version 5 for Macintosh. Internet Explorer 6 Windows Support for CSS1 and some of CSS2 is adequate, though not changed from Internet Explorer 5.5. Opera 6 and 7Excellent support for CSS1 and much of CSS2. Netscape 6 and 7Excellent support for CSS1 and much of CSS2. Type selectors The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example: em {color: blue; } This rule will select any element on the page and color it blue. As you can see from the document tree diagram below, all elements will be colored blue, regardless of their position in the document tree. Class selectors While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree. For example, if you want to target the first paragraph and first list items on a page to make them stand out, you could mark up the page in the following way: This is some text This is some text List item List item List item The rule used could then be:.big { font-size: 110%; font-weight: bold; } If you want to be more specific, you can use class and type selectors together. Any type selectors can be used. div.big { color: blue; } td.big { color: yellow; } label.big { color: green; } form.big { color: red; } For example, you may want to target the first paragraph and first list items on a page to give them a larger font size. You may also want only the paragraph to be bold. To do this, you could use the following rules:.big { font-size: 110%; } /* affects p and li */ p.big { font-weight: bold; }/* affects p only */ ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree. Examples of ID selectors: #navigation { width: 12em; color: #333; } div#navigation { width: 12em; color: #333; } The major difference is that IDs can only be applied once per page - while classes can be used as many times on a page as needed. Descendant selectors are used to select elements that are descendants of another element in the document tree. For example, you may wish to target a specific element on the page, but not all elements. A sample document could contain the following code: Heading here Lorem ipsum dolor sit amet. The document tree diagram (with the element to be targeted) would be: If you use a type selector like the example below, you will select all elements on the page: em {color: blue; } However, if you use a descendant selector, you can refine the elements that you select. The rule below will only select elements that are descendants of elements. If this rule is applied, the element within the will not be colored blue. p em {color: blue; } You can also jump levels in the document tree structure to select descendants. For example, the following code: Lorem ipsum dolor sit amet. item 1 item 2 item 3 Using the following rule you can isolate any element inside a element, without having to describe the element. If this rule is applied, any element within a element will be colored blue. However, the element within the will not be colored blue: ul em {color: blue; } The document tree (with a third- level element highlighted): There are times when you may want to style something where there is no CSS selector available (ie. not in document tree) - like the state of a hyperlink (ie. active or visited). Pseudo-classes allow you to format items that are not in the document tree. They include: :first-child :link :visited :hover :active :focus :lang(n) With pseudo-classes, you can style links in different ways in each of the four states: a:link is the selector for normal links a:visited is the selector for visited links a:hover is the selector for hover state a:active is the selector for active links Due to specificity, the selector that appears later in the stylesheet will be used if there is any conflict. For this reason, link and link pseudo class selectors should always be used in the following order:specificity a {} a:link {} a:visited {} a:hover {} a:active {} All of the usual properties can be used on these four states. You can also combine states if needed, as long as the order (link and visited before hover and active) is maintained: a:link, a:visited { color: blue; } a:hover, a:active { color: red; } When styling the four link states you should be aware that modifying standard hyperlink behavior (such as underlines) can be confusing for some users, who may not realise that the item is a link. In a document tree, some CSS properties are passed down from ancestor elements to descendant elements. This is called inheritance. Inheritance is designed to save you having to specify CSS rules for each level of element in the document tree. For example, if you specify a colour for the, this colour will be inherited by all other elements on the page, unless they have their own specific styles. body { color: blue; } There are certain properties that are not inherited, including margins, padding, borders and backgrounds. There is a very good reason for this. If all CSS properties were to be inherited, we would have to "turn them off" at every level below if they were not required. What does "cascading" mean? "Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document. Even the simplest HTML document may have three or more style sheets associated with it including: The browser's style sheet The user's style sheet The author's style sheet Browser style sheets Browsers apply style sheets to all web documents. Although these style sheets vary from browser to browser, they all have common characteristics such as black text, blue links, purple visited links etc. These are referred to as a "default" browser stylesheet. As soon as you, the author, apply a style sheet to a document, it will override the browser's style sheet. User style sheets A user is anyone who looks at your website. Most modern browsers allow users to set their own style sheets within their browser. These style sheets will override the browsers default style sheets - for that user only. It is important to know that users can set colour and background colour for HTML documents. If you, as an author, do not specify a colour or background colour, a user's style sheet could be used. More importantly, you should either specify both colour and background color or neither. If you only specify a colour and the user has specified the same colour for their background, your entire document may be inaccessible to this user. Author style sheets The author is the person who develops the website - you! As soon as you apply a basic style sheet or an inline style to a page, you have added what is referred to as an "author style sheet". Everything you do, from choosing fonts, colours and laying out pages in CSS is done using author style sheets. Author style sheets can be applied inside an HTML document or by linking to an external file. You can also use multiple style sheets on an particular document to take advantage of the cascade. Generally speaking, author styles override user styles which override browser styles. !important rules You can set "!important" on any declaration and this will override other declarations for the same element. "!important" declarations override normal declarations. For "!important" declarations, user style sheets override author style sheets which override the default style sheet. This allows users with special requirements (large fonts, color combinations, etc.) control over presentation. Style sheets can be used to target different user agents, so a single HTML document could have links to a number of style sheets including aural, print and screen style sheets. For a large site, you may wish to use a range of visual style sheets for each document. This could include a general style sheet (applied across all sections of the site) for basic font information and then individual style sheets for each section of the site. Or, certain aspects of each document could be styled by individual style sheets. You could use a footer style sheet, a navigation style sheet and a range of overall content style sheets. There is no limit to the way you break up your style sheet information. The aim is to use style sheets so that information does not have to be repeated in other style sheets. This means you can edit once and apply often. There may be times when two or more declarations are applied to the same element. It is also possible that there may be a conflict between them. When conflicts like this occur, the declaration with the most weight is used. So, how is weight determined? When documents load in a browser, all declarations are sorted and given a weight. They are then applied to a document based on this weight. There are four steps to sorting. As the process is quite complex, we will use one HTML element ( ) as an example. 1. Find all declarations whose selectors match a particular element. 2. Sort these declarations by weight and origin 3. Sort the selectors by specificity 4. Sort by order specified 1.Find all declarations whose selectors match a particular element. After looking at all style sheets (browser, user and author), all the declarations that match an element are found. The browser style sheet may include the following relevant rule: h2 { font-size: 1.5em; margin:.83em 0; color: black } The users style sheet could include the following relevant rules h2 { color: brown !important; } The author style sheet could include the following relevant rules: h2 { color: green; font-size: 1.2em; padding: 10px; } h2#main { color: red; } h2.navigation { color: blue;} 2. Sort these declarations by weight and origin The above rules are then sorted by weight and origin. For normal declarations, the author style sheets will override both the user style sheets and the browser style sheet unless there is an !important declaration in the user's style sheet. For "!important" declarations, user style sheets override author and browser style sheets. For general users, elements that are not specifically styled with "#main" or ".navigation" will be styled with: font-size: 1.2em; /* author wins over browser */ margin:.83em 0; /* specified only by browser */ padding: 10px; ; /* specified only by author */ color: green; /* author wins over browser */ For the user that has set an !important rule, elements that are not specifically styled with "#main" or ".navigation" will be styled with: font-size: 1.2em; /* author wins over browser */ margin:.83em 0; /* specified only by browser */ padding: 10px; ; /* specified only by author */ color: brown; /* user wins due to !important */ 3. Sort the selectors by specificity Even though we have sorted out the general style, there still may be conflict in other areas of the document. What happens with an that has been styled with "#main"? Every selector is given a specificity which is calculated on the entire selector. More specific selectors will override more general ones. The calculation is based on the following (simplified) rules: a. count the number of id's in the overall selector b. count the number of other selectors in the overall selector c. count the number of elements within the overall selector These three calculations are then written out as a-b-c. Using the examples above, the following declarations can be scored as: h2 { font-size: 1.5em; margin:.83em 0; color: black } > specificity = 1 h2 { color: brown !important; } > specificity = 1 h2 { color: green; font-size: 1.2em; padding: 10px; } > specificity = 1 h2#main { color: red; } > specificity = 101 h2.navigation { color: blue;} > specificity = 11 This means that "h2#main" has the greatest weight, followed by "h2.navigation". For general users (who will not be affected by the users !important rule) any styled with id="main" will be: color: red; /* id more specific that type selector */ Any styled with class="navigation" will be: color: blue; /* class more specific that type selector */ If there was a clash between "#main" and ".navigation" the ID would win and the will be: color: red; /* id more specific that class or type selector */ 4. Sort by order specified If two rules have the same weight, origin and specificity, the one written lower down in the style sheet wins. Rules within imported style sheets are considered to be before any rules in the style sheet itself. For example, the style sheet could contain two identical rules in various sections of the document: h2 { color: blue;} h2 { color: green; } The second rule, that appears later in the style sheet would win. Semantically markup is about using HTML elements to give content meaning. This is important for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.) You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. In simple terms, this means: For headings, use heading elements starting with H1 For paragraphs of text, use a paragraph element For lists, use a list elements Use tables only for tabular data Do not use definition lists merely for indenting Margin collapse Trapping margins Double margin bug Three pixel text jog