1. Computing Concepts: CSS

2. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able to use the three types of css within web pages

3. What is CSS?  CSS stands for Cascading Style Sheets  A set of rules applied to HTML elements Syntax different from HTML Works with HTML Styles define how to display HTML elements  Describe how the page is to be displayed  Part of the specification for HTML 4

4. Why use CSS?  Easy to apply to well written and structured HTML  Smaller file sizes  Saves bandwidth  Separates style and content  Can change whole website at once  Good for maintenance

5. Style Sheets  Style sheets are defined by the W3C  CSS2 specification  Component of DHTML  Give you control over the appearance of a web page

6. Advantages of CSS  The designer has control of page appearance and typographic elements such as font size, line spacing.  Style is separate from structure  Style elements can be defined in CSS removing the need for elements like in the web document. HTML just defines the page structure.

7. Advantages of CSS (2)  Smaller, easier to maintain documents and sites.  Because the style is removed from web documents, it should be easier to correct and update content.  You can link many pages to one style sheet so it should be easier to maintain a consistent appearance.

8. Disadvantages of CSS  Even where there is apparent consistency style sheet elements may be implemented and displayed differently.

9. Types of Style Sheets  Three types of style sheet Inline Styles Internal Style Sheets External Style Sheets

10. Adding CSS  There are several ways to include styles External style sheet (saved as a.css file) Internal style sheet (inside the tag) Inline style (inside an HTML element)

11. Adding CSS  Normally we use html tags to say what is on a page -,,  These tags have attributes to say what the tag contents should look like Test  CSS can save a lot of time and provide styles for multiple documents

12. Inline Style Sheet  In the HTML Tag  Can use multiple styles in a single tag  This is a paragraph  No real advantage to using this. It is like using the attributes of a tag.  Use if want to change a tag from what is being set by a previous style

13. Internal Style Sheet  In the Head Tag h1 {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}  Used to provide style for a particular page  Will override external style if you want one page to look different from the rest of the site

14. 14 Font – Using Internal Style  To change fonts use the style tag in the head of your webpage Style body {font-family:Arial}

15. 15 Colours – Using Internal Style body {font-family:Arial} body {color:black} body {background-color:yellow} h1 {color:red} h2 {color:blue} h3 {color:green}

16. External Style Sheet  The web pages link to an external style sheet by using the tag   If all the pages link to mystyle.css then a change to this file updates the whole site  Can write the style sheet in any text editor, for example notepad  Must save with the.css extension

17. CSS File  Does not contain html tags  Is a text file  Must be saved as.css  Example body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

18. Examples: Inline, Internal, External External body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Internal h1 {color: sienna} p {color:blue;margin-left: 20px} body {background-image: url("images/back40.gif")} Inline

19. 19 Activity: Write style to make:  H1 yellow and Arial  All other text silver and "Comic Sans MS "  Background navy colour

20. 20 Answer body {font-family:"Comic Sans MS"} body {color:silver} body {background-color:navy} h1 {color:yellow} h1 {font-family:Arial}

21. CSS – Order of Precedence  If more than one style is used the following order of importance is applied: Browser default External style sheet Internal style sheet (inside the tag) Inline style (inside an HTML element)  Inline has the highest priority

22. CSS Syntax  The syntax is made up of the following components selector {property: value} body {color: black}  Property and value separated by :  Property and value must be in { }  p {font-family: "sans serif"} – in this case the value is multiple words, must use “ ”

23. CSS Syntax 2  p {text-align:center;color:red}  Can use multiple properties and values as above – must separate each with a ;  For readability should put each property on a new line p { text-align: center; color: black; font-family: arial }

24. CSS Syntax 3  h1,h2,h3,h4,h5,h6 { color: green }  The example above shows how you can group selectors. Separate by,  The example means whenever you use a heading h1-h6 the colour will be green

25. Activities  Create a html page that uses an inline style – save this in inline.html  Create a html page that uses an internal style – save as internal.html  Create a css file using notepad create styles for background colour, paragraphs, headings, links etc – save as test.css  Create 2 web pages – make them use the external style sheet – test.css  Visit the www.w3schools.com/css sitewww.w3schools.com/css

26. Remaining Lectures  Careers  Module Choice Event

27. Questions?