Css 2010

Adding Cascading Style Sheets (CSS) to XHTML Documents

1

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 usehttp://jigsaw.w3.org/css-validator

2

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

3

• 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.

4

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

5

CSS rules consists of two parts:◦ Element selector◦ Properties declarations

6

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” />

7

8

Links CSS file

Browser view

example1.css

9

mystyles.css

browser view

Link to CSS

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

1. 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.

10

act_styles.css

Browser view of Act1_Q2.html with CSS attached

2. 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.

11

act_styles.css

Browser view of Act2_Q1.html with CSS attached shown next slide

Add these

}

12

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)”

Examplebody{ 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;

13

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

14

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;}

15

16

act_styles.css with the class style added

17

This paragraph will be centered

19

If you had a class style.

This code applies the class style to one paragraph and not the other.

20

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

21

23

.img_right will align the image right .img_left will align the image left

class set to img_right

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

25

mystyles.css

1. (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

26

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)

27

Do not start an id name with a number (won’t work in firefox)

28

Will cover this in more detail next section

29

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)

30

Browser view

Internal style

• 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>

31

Browser view

32

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 sheet1. Inline style2. Internal style sheet 3. External style sheet4. 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

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)

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

36

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.

38

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

39

link_styles.css

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

40

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.htmlbaked_pears.htmlpumpkin_creme_brulee.htmlcontact_me.html

41

42

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

43

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

44

welcome.html

45

baked _pears.html

46

pumpkin_creme_brulee.html

47

contact_me.html

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

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.

49

Css 2010

Technology

Transcript of Css 2010