What are Cascading Stylesheets (CSS)?
The Three Layers of the Web
What are CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements on a web page Styles are normally stored in style sheets (internal or external) External style sheets can save you a lot of work External style sheets are stored in CSS files 3
Use <style> tag within web pages to define internal styles. Use <link> tag for external style sheets. External style sheets enable you to change the appearance and layout of all the pages in your website CSS separate the document's presentation layout from content of HTML documents. 4
Why use CSS to separate content from presentation? The aim for web developers is to remove all presentation from the HTML code, leaving it clean and semantically correct. 5
Advantages of CSS Less code on page – smaller files and quicker download Easier to make site-wide changes – just change one CSS file Easier and quicker to update/ maintain pages CSS is very powerful – can implement wide variety of formats and layouts Can use different style sheets for different media
Advantages of CSS CSS essential component of Web Standards. Meeting Web Standards mean: More likely that your web pages will look similar in all browsers – and all devices More accessible to users with disabilities More likely to be found by search engines Allows users to customise web pages for their own needs - style switchers – ie. changing in font size More control over code - can deliver code in preferred order for screen readers
Presentation code included in HTML code of all pages 8
Presentation in external CSS file 9
External CSS files for modern browsers, printers and older browsers 10
Cascading Order Multiple style definitions will cascade into one What style will be used when there is more than one style specified for an HTML element? All the styles will ‘cascade’ into a new ‘virtual’ style sheet in the order below (where number four has the highest priority): Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside HTML element)
CSS Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property must take a value. The property and value are separated by a colon and surrounded by curly braces: body {color: black}
If the value is multiple words, put quotes around the value: p {font-family: "sans serif"} If you wish to specify more than one property, you should separate each property with a semi-colon: p {text-align: center; color: red}
To make the style definitions more readable, you can describe one property on each line: p { text-align: center; color: black; font-family: arial }
Grouping Selectors You can group selectors. Separate each selector with a comma. For example, each header element will be green: h1, h2, h3, h4, h5, h6 { color: green }
The Class Selector Allows you to define different styles for the same element. For two types of paragraphs in your document: one right-aligned paragraph, and one centre-aligned paragraph: p.right {text-align: right} p.center {text-align: center}
You have to use the class attribute in your HTML document: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
You can also omit the tag name in the selector to define a style that can be used by many elements: .center {text-align: center}
Below, both the h1 element and the p element are classed with "center". Both of the elements will follow the rules in the ".center" selector: <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
The id Selector A class selector may apply to SEVERAL elements on a page An id selector can only apply to ONE element
This style will be applied to a p element that has the id value “para1”: { font-size: 100%; font-weight: bold; color: #0000ff; background-colr: transparent }
CSS Comments A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }
How to Insert a Style Sheet External style sheet Internal style sheet Inline styles
External Style Sheet Each web page must be linked to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> The browser will read the styles from the file mystyle.css, and format the document accordingly.
External Style Sheet Can be written in any text editor. Should not contain any HTML tags. Should be saved with a .css extension. An example of a .css file is shown below: hr {color: sienna} p {margin-left: 20px} body {background-image:url("images/back40.gif")}
Internal Style Sheet Define internal styles in the head section by using the <style> tag, like this: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
Inline Styles Loses many of the advantages of style sheets. Use the style attribute in the relevant tag. The style attribute can contain any CSS properties: <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>