SM5312 week 6: basic CSS syntax1 An Introduction to Cascading Style Sheets Basic CSS Syntax Nick Foxall

SM5312 week 6: basic CSS syntax2 What is CSS? CSS stands for Cascading Style Sheets Styles define how XHTML elements and markup should be displayed by the browser (or user agent) Styles can be included in the area of an XHTML document, or placed in external Style Sheet files. Multiple style definitions are able to cascade into one…

SM5312 week 6: basic CSS syntax3 What’s a “Cascade”? All styles will "cascade" into a new "virtual" style sheet in the following rule order, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Internal style sheet (inside the tag) 4. Inline style (inside an HTML element) An inline style (inside an HTML element) with the highest priority will override a style declared inside the tag, in turn overrides an external style sheet, which finally overrides browser default values.

SM5312 week 6: basic CSS syntax4 External Style Sheets Having all styles in an external Style Sheet allows for the style formatting of many pages from one file, saving a lot of updating work. An external Style Sheet is a text file saved with the extension.css At the top of a new CSS document, the character set should be "UTF-8"; Not essential, but good practise to ensure the CSS file is compliant with web standards. A new, blank.css file created in Dreamweaver will automatically include this syntax.

SM5312 week 6: basic CSS syntax5 Rules in CSS A CSS Style Sheet is basically a collection of rules, describing how the browser should display XHTML elements. Each rule contains 2 parts: A Selector, stating which element in the XHTML a rule applies to; One or more Declarations, which describe how these elements should be displayed.

SM5312 week 6: basic CSS syntax6 CSS Rules: Selectors and Declarations h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; } Selector Declarations Enclosed in curly brackets { } Rule

SM5312 week 6: basic CSS syntax7 h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; } CSS Rules: Selectors and Declarations Selector Declarations Rule A more readable way of writing CSS rules

SM5312 week 6: basic CSS syntax8 h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; } CSS Rules: Declaration Parts ValuesProperties Declarations consist of 2 parts: a property and a value. Each declaration ends with a semi-colon ( ; ). Properties and values are separated with a colon ( : ). Properties and values separated with a colon Each declaration separated with a semi- colon :;

SM5312 week 6: basic CSS syntax9 h1 { font-family: “Trebuchet MS”, serif; font-size: 24px; text-align: center; } CSS Rules: Declaration Parts Unlike XHTML, values do not have to be enclosed in quotation marks, unless the value name includes a space (e.g multi-word name). Only values with a space in the name need to be enclosed in quotes

SM5312 week 6: basic CSS syntax10 Versions of CSS Like XML and XHTML, CSS specifications are laid down by the World Wide Web Consortium. The current, most widely used version of the CSS specification is version 2.1 There are over 100 different properties available in CSS 2.1. You can view the current CSS 2.1 specification at You can also validate the CSS you are working on by going to

SM5312 week 6: basic CSS syntax11 CSS Simple, or Element Selectors The most basic form of CSS selector is an XHTML element name; h1, h2, p, ol, ul, table, etc. This is the simple or element selector. Example: p { color: #003366; } This will set every occurrence of content marked up the paragraph tag to be a dark blue colour.

SM5312 week 6: basic CSS syntax12 CSS Class Selectors However, in XHTML markup, elements can have class attributes assigned to them. The value attached to a class attribute can be one (or more) names, separated by spaces. Example: or The actual definition of the value “special” is defined in a CSS class selector…

SM5312 week 6: basic CSS syntax13 CSS Class Selectors h1.special { color: #FF0000; } This will now make all elements with the class “special” display text with a red colour. elements that don’t have the class attribute “special” will continue to display in the default colour. A CSS class selector can also be defined more generally, without the element name (just the dot):.special { color: #FF0000; } This class can now be applied to any XHTML element that has the class attribute “special”. Actually the full CSS syntax is *.special, where * is a selector that matches anything. However, CSS shorthand means we can drop the *.

SM5312 week 6: basic CSS syntax14 CSS ID Selectors XHTML elements can also have id selectors assigned to them. Example: blah, blah, blah. In the CSS, the id “summary” can be styled in a rule, thus: #summary { font-style: italic; } Whereas class selectors can be used across a number of elements in an XHTML document, ID selectors can only be assigned to one specific element in any given XHTML document.

SM5312 week 6: basic CSS syntax15 CSS ID Selectors In the CSS, id selectors are always defined with a # (hash) symbol first: #summary { font-style: italic; } Again, this is CSS shorthand for… *#summary { font-style: italic; } …meaning the id #summary can be applied to any XHTML element (but only one element can have that id name in the XHTML document).

SM5312 week 6: basic CSS syntax16 Class Selectors vs ID Selectors How do we know which to use and when? ID selectors: 1.As they must be unique to a page, ID selectors are useful for persistent structural elements, such as navigation zones, or key content areas, that occur once on a page, but that are consistent across a site. 2.For example, #mainNav may be the selector to style the the main navigation element, which will likely appear on every page of your site. 3.So, ID selectors are generally applied to conceptually similar elements across a site.

SM5312 week 6: basic CSS syntax17 Class Selectors vs ID Selectors How do we know which to use and when? Class selectors: 1.As they can be allied to any number of elements on a page, class selectors are useful for identifying (and targeting) types of content, or similar items. 2.For example, you have a news page with a date at the start of each story. If you use ID selectors, you’d have to give every occurrence of the date a separate ID name. Much easier to give every date one class name and style that one class.

SM5312 week 6: basic CSS syntax18 CSS Pseudo-Classes Pseudo-classes are CSS classes used to add effects to certain elements. They are used most often to style the anchor elements of hyperlinks. Example: a:link { color: blue; text-decoration: underlined; } Can also be written without the a (anchor) element: :link { color: blue; text-decoration: underlined; }

SM5312 week 6: basic CSS syntax19 CSS Pseudo-Classes There are four pseudo-class elements provided to make rollover and on-click effects possible: a:link { color: blue; text-decoration: underlined; } link not yet visited a:visited { color: green; text-decoration: underlined; } visited link a:hover { color: red; text-decoration: none; } effect on the link when the mouse hovers over it a:active { color: purple; text-decoration: none; } effect on the link when the mouse button is pressed down on it Note that pseudo-classes for rollover effects must be written in this order in a CSS file for them to work correctly.

SM5312 week 6: basic CSS syntax20 Combining Pseudo-Classes with Classes Pseudo-classes can also be combined with regular CSS class selectors to create multiple link and rollover styles, depending on the parent class. Examples: a.main:link { color: blue; } a.sidebar:link { color: grey; } a.footer:link { color: white; }

SM5312 week 6: basic CSS syntax21 Element Selector Grouping Element selectors can be grouped together if you want to apply one CSS rule to a range of elements. Example: h1, h2, h3, h4, h5, h6 { color: #FF0000; } Each element is separated by a comma (except for the last element before the start of the declaration). However…

SM5312 week 6: basic CSS syntax22 Inheritance Certain CSS properties are inherited by the descendents of the elements those styles are applied to. For example, if you give the element a color style of gray, all descendents of will inherit the color gray, until you specify otherwise.

SM5312 week 6: basic CSS syntax23 Inheritance By setting a number of ‘basic’ styles in top-most elements, such as, you can avoid having to style many descendent elements. This… body { color: gray; } Is much better than having to write this… p, div, h1, h2, h3, ul, ol { color: gray; } Note: inheritance is not the same as cascade!

SM5312 week 6: basic CSS syntax24 The Universal Selector There is also a Universal Selector, that acts like a wildcard, styling every available element that isn’t specifically styled elsewhere. Example: * { padding: 0; margin: 0; } …would usefully set the overall page styling to zero padding and margin, which could then be adjusted as-needed further down the line. The universal selector is donated by an * symbol

SM5312 week 6: basic CSS syntax25 Descendent Selectors Descendent Selectors (sometimes called contextual) can give a finer level of control over class selectors. Examples: p em { font-weight: bold; color: red; } Bold and blue will be applied to the element, only if it occurs inside a element. It would not apply if the was inside say an element. #mainNav ul { font-family: Arial, sans-serif } The font of the element would only change to Arial if it was inside the content area defined by the ID #mainNav Each descendent element is separated by a single space in the CSS code (no commas!)

SM5312 week 6: basic CSS syntax26 Class & Element Selector Order A class selector will take precedence over a more general element selector. Example, These two CSS rules set the color of paragraph elements: p { color: gray; } p.first { color: black; } The top rule sets all general content to a grey colour. The next rule sets all paragraphs with the class attribute “first” (i.e. ) to black text. The p.first rule takes precedence and changes the text to black.

SM5312 week 6: basic CSS syntax27 Class & Element Selector Order If an XHTML element belongs to more than one class, then the later CSS rules take precedence over earlier ones Example: p.first { color: #000000; } p.changed { color: purple; } If a element in the XHTML is specified with both classes (i.e. ) then the text will become purple, not black. The last class rule in the order takes precedence.