1 / 27

Mastering CSS Concepts: Types, Uses & Implementation

Learn about CSS, its advantages, types of style sheets, and how to apply CSS within web pages. Explore inline, internal, and external style sheets for styling HTML elements efficiently. Understand the syntax and order of precedence in CSS.

chace
Télécharger la présentation

Mastering CSS Concepts: Types, Uses & Implementation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <FONT> 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 <head> tag) • Inline style (inside an HTML element)

  11. Adding CSS • Normally we use html tags to say what is on a page - <p>, <h1>, <table> • These tags have attributes to say what the tag contents should look like • <p color blue>Test</p> • 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 • <p style="color: blue; margin-left: 20px"> This is a paragraph </p> • 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 • <head> <style type="text/css"> h1 {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> • </head> • 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. Font – Using Internal Style • To change fonts use the style tag in the head of your webpage <html> <head><title>Style</title> <style type=“text/css”> body {font-family:Arial} </style> </head>

  15. Colours – Using Internal Style <style type=“text/css”> body {font-family:Arial} body {color:black} body {background-color:yellow} h1 {color:red} h2 {color:blue} h3 {color:green} </style>

  16. External Style Sheet • The web pages link to an external style sheet by using the <link> tag • <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • 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 <style type="text/css"> h1 {color: sienna} p {color:blue;margin-left: 20px} body {background-image: url("images/back40.gif")} </style> Inline <p style="color: blue; margin-left: 30px">

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

  20. Answer <style type=“text/css”> body {font-family:"Comic Sans MS"} body {color:silver} body {background-color:navy} h1 {color:yellow} h1 {font-family:Arial} </style>

  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 <head> 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 site

  26. Remaining Lectures • Careers • Module Choice Event

  27. Questions?

More Related