CM143: WEB Week 3: Cascading Style Sheets (CSS)

Style & Content The fundamental principle behind modern CSS/ HTML design is the separation of style and content using those respective technologies Cascading Style Sheets (CSS) provide a rulebased style definition for elements of the web page, whose semantic and content is built in HTML

CSS Defines a set of rules for a selected element of the page, which affect the rendering of that element in the browser e.g. typeface, colour, border width, etc. etc. Avoids repetitious styling in HTML attributes by defining a style that can be applied to all elements of a page (or site!) e.g. All tags could be set to display in 12pt sized Georgia font with a yellow background

CSS Pros & Cons In addition to style/content separation, CSS has several advantages over styling in HTML: Consistency can be guaranteed across a site design and content can be extended and newly created to match existing style rules Bandwidth for site transfer is decreased Some limitations exist, however; though many of these are being addressed in CSS3 Flexibility of layouts is poor, as is vertical positioning

CSS Versions CSS began development in 1996 The latest version of CSS, CSS3, is under development (and has been since 2005) It addresses problems prevalent in CSS2, particularly those related to positioning, selection of elements to style, mediaspecific queries, and the simplification of common but complex styling (multiple backgrounds, rounded corners) CSS3 is well supported on the latest versions of all major browsers except Internet Explorer. (Though IE9, forthcoming, supports HTML5 and CSS3 very well!)

CSS Syntax RULE

selector { property : value ; } DECLARATION

CSS Syntax WHERE THE RULE APPLIES

selector { property : value ; } ASPECT TO BE AFFECTED E.G. FONT SIZE WHAT EFFECT E.G. 12PX

CSS Syntax CURLY BRACKETS SURROUND DECLARATIONS

selector { property : value ; } COLON

SEMICOLON

CSS Syntax CSS Rules allow both multiple selectors to apply a rule to, and multiple declarations to compose that style rule. selector1, selector2, selector3 { property1 : value1 ; property2 : value2 ; }

CSS Selectors HTML tag - redefines the style of a particular tag and applies to all instances of it (e.g. ) Class - creates a definition that can be applied to any tag which contains an attribute identifying it as part of that class (e.g. ) ID - creates a style specific to a uniquely identified tag, of which there should only one instance on the page. (e.g. )

CSS Selectors CSS Selectors may also specify pseudo-classes and pseudo-elements to further refine where a rule is applied. Pseudo-classes are conditions which make a sub-selection of the element. E.g :hover which applies only when the user hovers over an element with the mouse. a:hover { color: #ff0000; } CSS3 introduces many new and useful pseudo-classes (such as :first-of-type) Pseudo-classes apply to a whole element when its conditions are met

CSS Selectors Pseudo-element selectors apply rules to elements of the page which are not explicitly named in the code In CSS3, pseudo-elements are differentiated syntactically by a double semicolon :: This can include parts of an element, such as :firstline and :first-letter or user-dependent elements or element parts, such as ::selection (a part of the dosument highlighted by the user)

CSS Examples body { ! background-color: #FCC; } HTML TAG SELECTOR CHANGES THE BACKGROUND COLOUR FOR THE WHOLE PAGE NOTE CSS 3-CHARACTER COLOUR DEFINITION WHAT IS THIS EQUIVALENT TO IN HTML COLOUR CODE?

CSS Examples .blue_heading { ! font-weight: bold; ! color: #00C; } CLASS SELECTOR (THESE ALWAYS BEGIN WITH A DOT) CHANGES THE FONT WEIGHT & COLOUR OF ALL ELEMENTS WITH THAT CLASS

CSS Examples #footer { ! font-family: Arial, Helvetica, sans-serif; ! font-size: 10px; } ID SELECTOR (THESE ALWAYS BEGIN WITH A HASH) CHANGES THE FONT FACE AND SIZE OF THE UNIQUE ELEMENT DEFINED BY THAT ID NOTE PREFERENTIAL ORDER OF FONT FACES TO DISPLAY

CSS Examples a:hover { ! color: #900; ! text-decoration: underline; } HTML TAG WITH PSEUDO-CLASS (NOTE COLON IN SELECTOR) CHANGES THE COLOUR AND UNDERLINES ANY LINK WHEN IT’S HOVERED OVER BY THE MOUSE

CSS Examples h1, h3, h4 { ! border: 1px solid #0F0; } MULTIPLE HTML TAGS AS SELECTORS ADDS A 1-PIXEL SOLID GREEN BORDER TO ANY OF THE HEADER ELEMENTS SPECIFIED

CSS Examples div.sexy { ! background-color: #FCC; } ONLY APPLIES TO DIVS WHICH HAVE THE CLASS “SEXY”

#header div p { ! background-color: #CCC; } ONLY APPLIES TO PARAGRAPHS WITHIN DIVS WITHIN THE ELEMENT UNIQUELY IDENTIFIED AS “HEADER”

CSS Rule Location CSS rules can be located in three places: Inline - a style attribute in an individual html tag Embedded - a tag in the of the document listing styles for that page Linked - in an external (.css) files linked to the page (or to multiple pages) The browser will render elements according to the style defined “closest” to the element affected. i.e. if conflicting rules for the style are given in the and in an external linked file, the style definition in the will be used.

External CSS files There are substantial advantages to using externally defined CSS files For larger sites especially, this allows one central point of editing for styles that may apply across many pages. An external CSS document is linked to a HTML file using the tag in the :

In today’s seminar: Styling a simple page with CSS Using inline, embedded and external css rules CSS for text styling CSS for block colour and background images