Cascading Style Sheets

Cascading Style Sheets (CSS) is a standard defined by the World Wide Web Consortium that describes the ways in which the formatting and styling of an HTML page can be influenced. For full information on this topic you should view the W3C CSS site. Usefully most modern browsers support this standard to one degree or another, with more and more support being built in with each new version. The standard has been designed in such a way that it will replace some HTML tags altogether, and augment others. Stylesheet Definition Stylesheets can be defined for use within the HTML in several ways. Each method has its benefits and its drawbacks. external definition Includes the stylesheet via a <link> tag in the head section of the document. <link rel="stylesheet" type="text/css" href="blah"> This method is extremely usefull for sharing a common look amongst many different pages or a whole site. internal definition Defines the stylesheet directly in the HTML in the head section of the document via the <style> tag. <style type="text/css"> p{color:pink} </style> This method is usefull for customising particular pages with styles that may be slightly different from the site look, but done in this way the changes cannot be shared with other pages, although they can be reused within the same HTML document. in-line definition Sets the style of a particular HTML element in-line using the style attribute. <h1 style="background:grey"> This method can be used for spot changes to elements that might already be covered by a more general CSS rule. Again changes like this cannot be shared, even in the same document. Rule Syntax All CSS rules follow the same syntax and have 3 basic parts: a selector, a property and a property value. selector { property: value } Rule selectors define which HTML tags are affected by the associated properties. The rule properties control the tag display attributes that you wish to change, each of which take a value as shown below. selector { property: "value with spaces" } selector { property: value1, value2, value3 } selector { property1: value; property2: value } selector { property1: value; property2: value; } Selectors can be grouped together so that the rule properties apply to all the HTML tags matched by the group. Grouped selectors are separated by a comma. selector1, selector2, selector3 { property: value } Selectors The browser is informed of what to do when rendering HTML tags by matching the tags against rules in the stylesheets that are in force for the page. There are various ways rule selectors are matched against tags, the most commonly used ones being: type matches the exact name of an HTML tag for example H1 or P class written as one of *.classname or .classname the rule will match any HTML tag whose class attribute value matches classname, for example *.bolditalic or .bigred. When written as type.classname, the rule is more specific and will match only HTML tags matching type whose class attribute matches classname type pseudo classes these rule selectors work specifically with the HTML <a> tag. They are written in the same way as class rule selectors, but have a condition modifier at the end following a : character. The modifiers allow the style of the tag to be changed under certain conditions. The condition modifiers are: link applies to <a> tags that contain an href attribute, as opposed to those that are just bookmarks visited applies when the pointed to URL has been visited hover applies when the users mouse is over the link active applies when the pointed to URL is being fetched focus applies when the keyboard focus is on the tag id written as #idname the rule will match any HTML tag whose id attribute value matches idname, for example #menudiv. When written as type#idname, the rule is more specific and will match only HTML tags matching type whose id attribute matches idname Rule Properties There are a large number of style properties defined in the CSS standard plus more non-standard ones that individual browser manufacturers have made available. Properties can be grouped together into categories that control particular aspects of the rendition of an HTML tag. background - colors, images text - colors, rendition fonts - family, style, weight, size borders - color, style, width margins - width padding - width list - style position - style, location display - visibility, cursors Properties from any of the categories can be combined together in the same rule to create the final style. However, for the values of the specified properties to be effective the properties must be pertinent to the tag matching the rule selector. Cascading When many rules match a particular HTML tag the properties from each rule are collected together to form the final set that is applied. Properties mentioned in rules encountered last override any existing property of the same name in earlier rules. Also if a property is set in a rule that matches a container tag, such as <BODY> or <DIV> all the contained tags inherit that property value unless specifically changed in a more closely matching rule. Together these behaviours are known as cascading, that is, property values cascade down through stylesheets, selectors and rules to the individual HTML tags. It is possible for tags intended to be styled by a class selector rule to match more than one classrule at a time. To do this specify a list of class names separated by a space as the value of the HTML tag class attribute. The properties contained by the matched rules are cascaded together to form the final set applied to the tag.