Css 2010


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css 2010

  1. 1. Adding Cascading Style Sheets (CSS) to XHTML Documents
  2. 2. <ul><li>These notes do not contain a complete list of CSS styles. For further information see </li></ul><ul><li>http://www.w3schools.com/css/default.asp </li></ul><ul><li>For validation of your CSS files use </li></ul><ul><li>http://jigsaw.w3.org/css-validator </li></ul>
  3. 3. <ul><li>Cascading Style Sheets (CSS) were introduced by the W3C in 1996 to provide HTML authors with more control over document formatting </li></ul><ul><li>CSS style sheets work with XHTML, XML and HTML files and are widely accepted by Web browsers </li></ul><ul><li>A single style sheet can be used to provide uniform formatting styles to a group of documents </li></ul><ul><li>CSS files are plain text files and can be edited with a text editor </li></ul>
  4. 4. <ul><ul><li>HTML was never intended to contain tags for formatting documents. It was intended to define the content of a document. Eg <p>This is the page content </p> </li></ul></ul><ul><ul><li>When the <font> tags and color attributes were added to the specification in V3.2 it started a nightmare for developers. </li></ul></ul><ul><ul><li>These tags needed to be added to every single page making them long and expensive to produce. </li></ul></ul><ul><ul><li>By V4.0 CSS had been developed and all formatting could be removed from the HTML and stored in a separate CSS file. </li></ul></ul>
  5. 5. <ul><li>Why use Style Sheets? </li></ul><ul><ul><li>Allows the content and formatting of a page to remain separate. </li></ul></ul><ul><ul><li>Allows for many pages to be formatted the same by using a single CSS file. (allows for consistency across a site) </li></ul></ul><ul><ul><li>Allows you to change the appearance and layout of all the pages of an entire site by editing just one file. </li></ul></ul><ul><ul><li>A web page can be divided into sections (using <div> tags) Each section can have a different style applied to it, this allows for multiple presentation layouts for a single document </li></ul></ul><ul><ul><li>Style elements are being deprecated in the XHTML language and will not be available in future versions of XHTML past the 1.0 version </li></ul></ul>
  6. 6. <ul><li>CSS rules consists of two parts: </li></ul><ul><ul><li>Element selector </li></ul></ul><ul><ul><li>Properties declarations </li></ul></ul><ul><li>Above example in a text file: </li></ul><ul><ul><li>h1{ </li></ul></ul><ul><ul><li>color: blue ; </li></ul></ul><ul><ul><li>font-size: 12px ; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>CSS comments: </li></ul><ul><ul><li>/* This is a comment */ </li></ul></ul>For readability the declarations are often written on separate lines
  7. 7. <ul><ul><li>The style sheets are stored in a separate text file from the XHTML document ( with the file extension .css): h1{ </li></ul></ul><ul><ul><li> color: blue ; </li></ul></ul><ul><ul><li> font-size: 16pt ; </li></ul></ul><ul><ul><li> font-family: arial ; </li></ul></ul><ul><ul><li>} This code would make any content in a <h1> tag appear blue, arial & 12pt (assume the file is saved as example1.css) </li></ul></ul><ul><ul><li>The file is attached to the XHTML file using the <link> tag in the header section of the document </li></ul></ul><ul><ul><ul><ul><li><link rel=”stylesheet” href=”example1.css” type=”text/css” /> </li></ul></ul></ul></ul>
  8. 8. Links CSS file Browser view example1.css
  9. 9. mystyles.css browser view Link to CSS If the CSS file was in a separate folder then href=“../css/mystyles”
  10. 10. <ul><li>Create the following CSS using Textpad, save it as act_styles.css Modify your Activity 1 Question 2 XHTML code by linking the CSS file to it and then view in a browser. </li></ul>act_styles.css Browser view of Act1_Q2.html with CSS attached
  11. 11. <ul><li>Edit act_styles.css to add the style for <h2> and <p> as shown below Modify your Activity 2 Question 1 XHTML code by linking the CSS file to it and then view in a browser. </li></ul>act_styles.css Browser view of Act2_Q1.html with CSS attached shown next slide Add these }
  12. 12. Browser view of Act2_Q1.html with CSS
  13. 13. <ul><li>color (note American spelling of color) </li></ul><ul><li>color can be represented by : </li></ul><ul><ul><li>Name – color name, like “red” </li></ul></ul><ul><ul><li>Hex – a hex value, like “#ffffcc” </li></ul></ul><ul><ul><li>RGB – an RGB value, like “rgb(255,0,0)” </li></ul></ul><ul><li>Example body{ color:blue;} h1{ color:#00ff00;} h2{ color:rgb(255,0,0);} </li></ul><ul><li>Font Family </li></ul><ul><li>The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want and end with a generic family. </li></ul><ul><li>If the font family name is more than one word it must be in quotes eg font-family:”Times New Roman”, Times, serif; </li></ul>
  14. 14. <ul><li>Font size </li></ul><ul><li>The font size value can be an absolute or relative size: </li></ul><ul><li>Absolute Size </li></ul><ul><ul><li>Sets the text to a specified size </li></ul></ul><ul><ul><li>Does not allow a user to change the text size in all browsers (bad for accessibility) </li></ul></ul><ul><ul><li>Absolute size is useful when the physical size of the output is known </li></ul></ul><ul><li>Relative Size </li></ul><ul><ul><li>Sets the size relative to surrounding elements </li></ul></ul><ul><ul><li>Allows a user to change the text size in browsers </li></ul></ul><ul><li>If you do not specify a font size a default is used. The default for a paragraph is 16px (=1em) </li></ul><ul><li>To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels. (W3C recommends the em size unit) </li></ul><ul><li>Do not leave a space between the size and its unit ie 1.2em NOT 1.2 em </li></ul>
  15. 15. <ul><li>All the styles we have looked at so far are applied to tags. This means all paragraphs will look the same ie <p> tags </li></ul><ul><li>This inflexible as you may want one paragraph to be centred but all the others to be left aligned. </li></ul><ul><li>The class selector is used to specify a style for a group of elements </li></ul><ul><li>It is uses the HTML class attribute and is defined by “.” eg .centre { text-align: center; } </li></ul>
  16. 16. act_styles.css with the class style added
  17. 17. This paragraph will be centered
  18. 18.
  19. 19. <ul><li>If you had a class style. </li></ul>This code applies the class style to one paragraph and not the other.
  20. 20. <ul><li>This is OK if you want the whole paragraph to be bolded but another way is needed if you only want part of the paragraph bolded </li></ul>
  21. 21. <ul><li>You can place a <span> tag around the words you want the class style to apply to </li></ul>
  22. 22.
  23. 23. <ul><li>.img_right will align the image right </li></ul><ul><li>.img_left will align the image left </li></ul>class set to img_right
  24. 24.
  25. 25. <ul><li>(a) Create the following CSS using Textpad, save it as mystyles.css </li></ul>mystyles.css
  26. 26. <ul><li>(b) Modify Activity 4 Question 1 (act4_q1.html) to link the CSS file and to align the images to the right using the class styles. Add the text as shown and bold the words as shown using the bolded class style </li></ul>
  27. 27. <ul><li>Specifies a style for a single unique element </li></ul><ul><li>The id selector uses the id attribute </li></ul><ul><li>It is defined with a “#” </li></ul><ul><li>It is useful when using <div> tags (to be covered next section) </li></ul>Do not start an id name with a number (won’t work in firefox)
  28. 28. <ul><li>Will cover this in more detail next section </li></ul>
  29. 29. <ul><li>Should be used when a single page has a unique style </li></ul><ul><li>Defined in the head section of an XHTML document within the <style> element. Can also be called embedded styles. </li></ul><ul><ul><ul><ul><li><head> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><style type=”text/css” > </li></ul></ul></ul></ul><ul><ul><ul><ul><li><!-- </li></ul></ul></ul></ul><ul><ul><ul><ul><li>p { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>color: red; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>font-family: arial; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>--> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></style> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></head> </li></ul></ul></ul></ul><ul><li>This style would only apply to the page it is defined in and cannot be applied to other pages like an external CSS file. </li></ul><ul><li>The comment tags <!-- --> are included in the style tags so it is compatible with older browsers ( will be ignored in older browsers that don’t support them) </li></ul>
  30. 30. Browser view Internal style
  31. 31. <ul><ul><li>Inline Style – defined within an XHTML element and will apply to only that instance of the element: (should be used sparingly as it loses the advantage of separating content from formatting) </li></ul></ul><ul><ul><ul><ul><li><p style=”color:red; font-family:arial” >Paragraph text</p> </li></ul></ul></ul></ul>Browser view
  32. 32. <ul><li>Styles can be specified </li></ul><ul><ul><li>Inside a HTML element </li></ul></ul><ul><ul><li>Inside the head section of an HTML page </li></ul></ul><ul><ul><li>In an external CSS file </li></ul></ul><ul><li>What style will be used when there is more than one style specified for a HTML element </li></ul><ul><li>Styles will “cascade” into a new virtual style sheet </li></ul><ul><ul><li>Inline style </li></ul></ul><ul><ul><li>Internal style sheet </li></ul></ul><ul><ul><li>External style sheet </li></ul></ul><ul><ul><li>Browser default </li></ul></ul><ul><li>So inline has the highest priority, which means it will override a style defined inside the <head> tag or an external style sheet </li></ul><ul><li>Note: if the link to the external style sheet is placed after the internal style sheet the external sheet will override the internal style sheet </li></ul>
  33. 33. This would suggest that all paragraphs would be blue, Times New Roman and 0.8em in size But on the next slide you will see that an internal style says that paragraphs will be red, ariel and 1.2em But the first paragraph has an inline style that says that paragraphs will be Times and purple. (because the size isn’t specified it will take the size on the internal style (1.2 em)
  34. 34.
  35. 35.
  36. 36. <ul><li>Links can be styled differently depending on what state they are in </li></ul><ul><li>The four link states are: </li></ul><ul><ul><li>a: link – a normal, unvisited link </li></ul></ul><ul><ul><li>a:visited – a link the user has visited </li></ul></ul><ul><ul><li>a:hover – a link when the user places the mouse over it </li></ul></ul><ul><ul><li>a:active – a link the moment it is clicked </li></ul></ul>link_style.css They must be specified in this order
  37. 37.
  38. 38. <ul><li>Some designers do not like the look of an underlined link </li></ul><ul><li>So they remove the underline unless you hover over it </li></ul><ul><li>The following style removes the underline </li></ul><ul><li>However Industry standards are not to make changes to links as this can affect accessibility. </li></ul>
  39. 39. <ul><li>(a) Create the following CSS using Textpad, save it as link_styles.css </li></ul>link_styles.css
  40. 40. <ul><li>(b) Modify Activity 5 Question 1 (act5_q1.html) to link the CSS file </li></ul>
  41. 41. <ul><li>You are going to add a CSS file to the site you developed in Lab1 and also change the file structure. </li></ul><ul><li>Your are to set up 3 folders </li></ul><ul><li>Reminder: </li></ul><ul><li>The site consists of four pages: </li></ul><ul><li>welcome.html </li></ul><ul><li>baked_pears.html </li></ul><ul><li>pumpkin_creme_brulee.html </li></ul><ul><li>contact_me.html </li></ul>
  42. 42. <ul><li>Your CSS file should set the following: </li></ul><ul><ul><li>Heading1 has font Tahoma, 1.6em, red and aligned centre </li></ul></ul><ul><ul><li>Heading2 has font Tahoma, 1.2em and indigo </li></ul></ul><ul><ul><li>All the pages has a background colour of #ffffcc </li></ul></ul><ul><ul><li>Paragraph has font Verdana, 0.8em and black </li></ul></ul><ul><ul><li>Image has no border </li></ul></ul><ul><ul><li>Table has a background colour of #99ffff </li></ul></ul><ul><ul><li>Table data (ie <td>) is bolded </li></ul></ul><ul><ul><li>List item (ie <li> ) has font Georgia, 0.8em, and colour of #660033 </li></ul></ul><ul><ul><li>Normal link has the colour #ffbb00 and no underline </li></ul></ul><ul><ul><li>Visited link has the colour red and no underline </li></ul></ul><ul><ul><li>Need a class style to align an image to the right </li></ul></ul><ul><li>Save your file as lab2_styles.css </li></ul>
  43. 43. <ul><li>Link lab2_styles to all four pages </li></ul><ul><li>However on contact_me.html you want the heading1 to be right aligned and not centred like the other pages </li></ul><ul><li>The images of the four pages are shown on the next four slides </li></ul>
  44. 44. welcome.html
  45. 45. baked _pears.html
  46. 46. pumpkin_creme_brulee.html
  47. 47. contact_me.html
  48. 48. If you have completed Activities 7-9 and Lab 2 then complete the CSS tutorial & quiz at the following site http://www.w3schools.com/css/default.asp
  49. 49. <ul><li>In this section you learnt how to add CSS to your web pages to change the way the page looks. Covered: </li></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>External styles </li></ul></ul><ul><ul><li>Internal styles </li></ul></ul><ul><ul><li>Inline styles </li></ul></ul><ul><ul><li>Class selector </li></ul></ul><ul><ul><li>id selector </li></ul></ul><ul><ul><li>Link styles </li></ul></ul><ul><li>We used tables to layout the welcome page in Lab1. This is considered outdated and in the next section will be looking at dividing the page into sections using <div> tags and id selector styles. </li></ul>