Css 2010

Adding Cascading Style Sheets (CSS) to XHTML Documents

These notes do not contain a complete list of CSS styles. For further information see http://www.w3schools.com/css/default.asp For validation of your CSS files use http://jigsaw.w3.org/css-validator

Cascading Style Sheets (CSS) were introduced by the W3C in 1996 to provide HTML authors with more control over document formatting CSS style sheets work with XHTML, XML and HTML files and are widely accepted by Web browsers A single style sheet can be used to provide uniform formatting styles to a group of documents CSS files are plain text files and can be edited with a text editor

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> When the <font> tags and color attributes were added to the specification in V3.2 it started a nightmare for developers. These tags needed to be added to every single page making them long and expensive to produce. By V4.0 CSS had been developed and all formatting could be removed from the HTML and stored in a separate CSS file.

Why use Style Sheets? Allows the content and formatting of a page to remain separate. Allows for many pages to be formatted the same by using a single CSS file. (allows for consistency across a site) Allows you to change the appearance and layout of all the pages of an entire site by editing just one file. 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 Style elements are being deprecated in the XHTML language and will not be available in future versions of XHTML past the 1.0 version

CSS rules consists of two parts: Element selector Properties declarations Above example in a text file: h1{ color: blue ; font-size: 12px ; } CSS comments: /* This is a comment */ For readability the declarations are often written on separate lines

The style sheets are stored in a separate text file from the XHTML document ( with the file extension .css): h1{ color: blue ; font-size: 16pt ; font-family: arial ; } This code would make any content in a <h1> tag appear blue, arial & 12pt (assume the file is saved as example1.css) The file is attached to the XHTML file using the <link> tag in the header section of the document <link rel=”stylesheet” href=”example1.css” type=”text/css” />

Links CSS file Browser view example1.css

mystyles.css browser view Link to CSS If the CSS file was in a separate folder then href=“../css/mystyles”

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. act_styles.css Browser view of Act1_Q2.html with CSS attached

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. act_styles.css Browser view of Act2_Q1.html with CSS attached shown next slide Add these }

Browser view of Act2_Q1.html with CSS

color (note American spelling of color) color can be represented by : Name – color name, like “red” Hex – a hex value, like “#ffffcc” RGB – an RGB value, like “rgb(255,0,0)” Example body{ color:blue;} h1{ color:#00ff00;} h2{ color:rgb(255,0,0);} Font Family 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. If the font family name is more than one word it must be in quotes eg font-family:”Times New Roman”, Times, serif;

Font size The font size value can be an absolute or relative size: Absolute Size Sets the text to a specified size Does not allow a user to change the text size in all browsers (bad for accessibility) Absolute size is useful when the physical size of the output is known Relative Size Sets the size relative to surrounding elements Allows a user to change the text size in browsers If you do not specify a font size a default is used. The default for a paragraph is 16px (=1em) To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels. (W3C recommends the em size unit) Do not leave a space between the size and its unit ie 1.2em NOT 1.2 em

All the styles we have looked at so far are applied to tags. This means all paragraphs will look the same ie <p> tags This inflexible as you may want one paragraph to be centred but all the others to be left aligned. The class selector is used to specify a style for a group of elements It is uses the HTML class attribute and is defined by “.” eg .centre { text-align: center; }

act_styles.css with the class style added

This paragraph will be centered

If you had a class style. This code applies the class style to one paragraph and not the other.

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

You can place a <span> tag around the words you want the class style to apply to

.img_right will align the image right .img_left will align the image left class set to img_right

(a) Create the following CSS using Textpad, save it as mystyles.css mystyles.css

(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

Specifies a style for a single unique element The id selector uses the id attribute It is defined with a “#” It is useful when using <div> tags (to be covered next section) Do not start an id name with a number (won’t work in firefox)

Will cover this in more detail next section

Should be used when a single page has a unique style Defined in the head section of an XHTML document within the <style> element. Can also be called embedded styles. <head> <style type=”text/css” >  </style> </head> This style would only apply to the page it is defined in and cannot be applied to other pages like an external CSS file. 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)

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) <p style=”color:red; font-family:arial” >Paragraph text</p> Browser view

Styles can be specified Inside a HTML element Inside the head section of an HTML page In an external CSS file What style will be used when there is more than one style specified for a HTML element Styles will “cascade” into a new virtual style sheet Inline style Internal style sheet External style sheet Browser default So inline has the highest priority, which means it will override a style defined inside the <head> tag or an external style sheet 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

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)

Links can be styled differently depending on what state they are in The four link states are: a: link – a normal, unvisited link a:visited – a link the user has visited a:hover – a link when the user places the mouse over it a:active – a link the moment it is clicked link_style.css They must be specified in this order

Some designers do not like the look of an underlined link So they remove the underline unless you hover over it The following style removes the underline However Industry standards are not to make changes to links as this can affect accessibility.

(a) Create the following CSS using Textpad, save it as link_styles.css link_styles.css

(b) Modify Activity 5 Question 1 (act5_q1.html) to link the CSS file

You are going to add a CSS file to the site you developed in Lab1 and also change the file structure. Your are to set up 3 folders Reminder: The site consists of four pages: welcome.html baked_pears.html pumpkin_creme_brulee.html contact_me.html

Your CSS file should set the following: Heading1 has font Tahoma, 1.6em, red and aligned centre Heading2 has font Tahoma, 1.2em and indigo All the pages has a background colour of #ffffcc Paragraph has font Verdana, 0.8em and black Image has no border Table has a background colour of #99ffff Table data (ie <td>) is bolded List item (ie <li> ) has font Georgia, 0.8em, and colour of #660033 Normal link has the colour #ffbb00 and no underline Visited link has the colour red and no underline Need a class style to align an image to the right Save your file as lab2_styles.css

Link lab2_styles to all four pages However on contact_me.html you want the heading1 to be right aligned and not centred like the other pages The images of the four pages are shown on the next four slides

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

In this section you learnt how to add CSS to your web pages to change the way the page looks. Covered: Syntax External styles Internal styles Inline styles Class selector id selector Link styles 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.

Css 2010

Recommended

More Related Content

What's hot (18)

Viewers also liked (11)

Similar to Css 2010 (20)

Recently uploaded (20)

Css 2010