03 Tutorial XHTML CSS - Ivailo Chakarov- Resources · Using and Applying CSS to XHTML The purpose of this tutorial is to build upon the introduction to XHTML 1.0 ... Tutorial 03 XHTML

Web Design and Development – Tutorial 03 XHTML & CSS

© 2006 Trevor Adams, Staffordshire University - 1 -

Table of Contents

Web Design & Development - Tutorial 03................................................................................... 2

Using and Applying CSS to XHTML...................................................................................... 2

Conventions ........................................................................................................................ 2

What you need for this tutorial ............................................................................................ 2

Common Terminology................................................................................................................. 3

Parent / Child Elements............................................................................................................ 3

Testing a Document................................................................................................................. 3

CSS Inheritance ....................................................................................................................... 4

Exploring CSS.............................................................................................................................. 4

Selectors .................................................................................................................................. 4

Simple Selector .................................................................................................................... 5

Universal Selector ................................................................................................................ 5

Type Selector ...................................................................................................................... 5

Class Selector....................................................................................................................... 6

The ID Selector.................................................................................................................... 6

Exercise 1 – Using Selectors ................................................................................................. 7

Exercise 2 – Investigation..................................................................................................... 8

The Box Model & Measurement.............................................................................................. 8

Exercise 3 – Box Model Demonstration ............................................................................... 8

Inline and Block-Level Elements .......................................................................................... 9

Exercise 4 – Altering Block-Level Elements........................................................................ 10

Units of Measurement ....................................................................................................... 11

Absolute Units .................................................................................................................. 11

Relative Units and Percentages........................................................................................... 12

Exercise 5 – Using Measurements ...................................................................................... 12

The <div> and <span> Elements ........................................................................................... 12

A Word on CSS properties ................................................................................................ 13

Border Property ................................................................................................................ 13



Padding Property ............................................................................................................... 14

Margin Property ................................................................................................................ 14

Dimensions........................................................................................................................ 14

Exercise 6 – Styling using <div> and <span> ..................................................................... 15

Further Exercises ....................................................................................................................... 16

References ................................................................................................................................. 16

Acknowledgements.................................................................................................................... 16

Web Design & Development - Tutorial 03

Using and Applying CSS to XHTML

The purpose of this tutorial is to build upon the introduction to XHTML 1.0 Strict and CSS

provided in Tutorial 02. You shall explore various CSS concepts such as selector, class,

measurements and ‘box model’. You will also understand the differences between ‘inline’ and

‘block-level’ elements. Finally, the <div> and <span> elements will be explained and how you

can use them in your web sites. You should use the techniques shown in tutorial 02, such as

mark-up validation, throughout this tutorial.

Conventions

This type of print indicates an exercise. They are usually present at the end of a major section of information

This type of text indicates a code example / listing. You may wish to type this code out or copy & paste.

Italic Text indicates code elements inline with a sentence. E.g.

The <h1> element.

What you need for this tutorial

• Access to the Internet (validation engine)



• A suitable web page / CSS editor such as Microsoft® Notepad® or Macromedia®

Dreamweaver® MX 2004 / 8 (Refer to week 1 tutorial notes for Macromedia®

Dreamweaver® assistance).

• A selection of web browsers for testing. E.g. Microsoft® Internet Explorer 6.x, Opera

7.54+, Mozilla Firefox 1.x or Safari

• A desire to use best practices and good professional techniques

Common Terminology

This section briefly covers some of the terms used in this tutorial that are potentially new to you

or have not been covered in any previous material.

Parent / Child Elements

Child element refers to an element that is contained within another. The example in Figure 1

shows a simple <body> element. The <ul> element is a child of the <body> as it is contained

within it. Likewise, each <li> is a child of the <ul> and so on. It is possible for an element (<ul>

& one <li> in this case) to be both a parent and child element.

<body> <ul> <li>An <a href="http://www.google.com/">interesting</a> point</li> <li>A supplementary point</li> <li>A tertiary point</li> </ul> </body>

Figure 1 Child elements: each <li> is a child of the <ul>; <ul> is a child of <body>

Testing a Document

When it is suggested that you test a document open it in all the browsers that are available,

examine the rendered pages, take note of differences between (if any) and validate the document

to ensure standards compliancy. For details on validating XHTML mark-up, see the tutorial 02.

The W3C validation tool can be found at http://validator.w3.org/.



CSS Inheritance

Many of the CSS properties inherit, which means that a child element will assume the same

properties as its parent elements (Duckett 2005). For example, if a <body> element has the

following CSS rule applied:

body {font-family:arial; color:Blue;}

All elements within the <body>, such as <h1> and/or <p>, will also have the font and colour of

the <body> element as they inherit those properties. This is one of the reasons that style sheets

are said to cascade. Browsers do not always implement inheritance consistently.

Inheritance can save you time by allowing you to make properties cascade down to the child

elements. Doing so enables you, the developer, to write fewer CSS rules to achieve the effects

you desire. It is important to know about inheritance and it works, particularly when you wish to

override the default inheritance behaviour.

Exploring CSS

This section will take you further into CSS, building on the techniques and knowledge already

obtained.

Selectors

CSS can be used, as you have already seen, to control the way that mark-up is rendered in a

browser. Rules need to be applied to parts of your mark-up and this can be done using selectors.

An example of a selector is shown in Figure 2.



Figure 2 Components of a CSS rule

You have already learned how the selector shown in Figure 2 could be used to style <h1>

elements in mark-up. However, to begin to master CSS you need to be aware further methods of

stating selectors. This section will take you through the types of selectors available.

Simple Selector

A simple selector simply matches the name of an element in mark-up. The CSS rule given in

Figure 2 is a simple selector. This is the most basic and fundamental of the CSS selectors and has

also been used in the previous tutorial.

Universal Selector

The universal selector is implemented when you want a rule to apply to all elements. The

universal selector is an asterisk (*). An example might be:

* { color:Red; font-family:arial, verdana, sans-serif; }

The universal element is top-level, which means any other rule will be more specific, thus

overriding.

Type Selector

The type selector is similar to a simple selector. The only difference is that the rules apply to

multiple different elements or other selectors E.g.

p, h1, h2 { font-family:arial, verdana, sans-serif; color:Blue; font-weight:bold;



}

This rule applies the declaration given to the <p>, <h1> and <h2> elements in a mark-up file.

Class Selector

The class selector is first of two elements that enable you to directly apply different rules to

elements with the same name. It is conceivable and common to define a style of paragraph that is

different to a regular paragraph. A class selector is defined using a period/full stop (.) character

E.g.

p.copyright { color:Black, font-family: "Times New Roman"; }

This CSS rule states that any <p> element that is of the class copyright will have black text and

use the Times New Roman font. To apply this CSS rule in mark-up, the class attribute must be

used. An example of which is given in Figure 3.

<p class="copyright">© 2006 Trevor Adams.</p>

Figure 3 using a class attribute

If you wished to define a class that was not limited to one type of element, it is possible to define

it without a named element E.g.

.copyright { color:Black, font-family: "Times New Roman"; }

This CSS rule could now be applied, using the class attribute, to any XHTML element that

supports the class attribute.

<h2 class="copyright">© 2006 Trevor Adams. </p>

The ID Selector

The ID selector works in much the same way as the class selector, except it matches an elements

id element instead of class. As XHTML specifies that each id attribute value must be unique per

document, it is a useful selector for applying style rules to unique elements. The selector is

implemented using the hash (#) character. The CSS snippet in fig will apply silver text and bold

font face to a <p> element with an id attribute of ‘copyright’.

p#copyright {color:Silver; font-weight:bold;}



Just as the class selector allows you to be flexible in regards to elements, the id selector is too.

#copyright { color:Silver; font-weight:bold;}

The CSS snippet directly above allows you to apply the rule to any element that has an id

attribute with value ‘copyright’.

Exercise 1 – Using Selectors

Download the file: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_base.html and save it to your personal storage. Create a style sheet and link it to the document. Examine the mark-up and discover the class attributes and id attributes. Create rules in your style sheet to add presentation to the XHTML. The CSS rules should: - Apply a default font-family to all elements of ‘arial’. - Apply a default colour to all elements of Navy. - Prologue heading should look different than a regular heading - Information class should have a silver background-color and black text. - Footer should be in smaller, bold text. - Any other style elements you feel enhance the document Save and test your file with the updates made. An example of the styled document may look like the screen shot in Figure 4.



Figure 4 Example styled document to exercise 1

Exercise 2 – Investigation

During your personal study time, use online resources and/or the books included in the references section to learn more about CSS properties that can alter the content of XHTML elements. Experiment with font-family, font-weight, text-decoration, text-transform and text-align properties. A good web site to start: http://www.w3schools.com/css/

The Box Model & Measurement

You now have a grasp of CSS and the properties used to affect the presentation of mark-up

elements. To extend your understanding of CSS, it is necessary to understand the ‘box model’.

Everything in CSS is treated like a box.

Each box has the following properties:

• Border – Separates the edge of one box from all others, exists even if made invisible

• Margin – the margin is the distance between the edge of a box and any box next to it

• Padding – padding the space between the border and what is inside the box

Figure 5 shows the following properties in diagram form.

This is a paragraph in mark-up. The solid black line that separates margin and

padding is known as ‘Border’. Padding is the space between border and content.

Margin is the space between the border and other mark-up elements.

Margin

PaddingBorder

Figure 5 Margin, padding and border - the box model

Exercise 3 – Box Model Demonstration

Download http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_box.html and save it in your personal storage area. Create and link a style sheet for this document with the rules supplied in Figure 6 (Page 9).



Look at the page (Example in Figure 7on page 9) and see if you can determine what elements are considered ‘block’ elements and which should be considered ‘inline’ elements.

h1, p { border:solid 2px Black; padding:5px; margin:4px; font-family:Verdana; } strong, em { border:solid 2px #999999; padding:2px; margin:23px; }

Figure 6 Box Model Demonstration CSS rules

Figure 7 Box Model Demonstration Example

Inline and Block-Level Elements

Elements in HTML are either block-level elements or inline elements. Both can be formatted in

the same way and both follow the box model. Their major difference is in their default behaviour

when rendered in a browser. Examine the document from Exercise 3. <h1> and <p> are block

level elements and they start on a new line and take up the entire of the page width. Inline

elements are those contained within the block level elements, such as <em> and <strong>. They

do not force a new line and flow with the content of a block-level element.



According to XHTML 1.0 specifications, the <body> element can only contain block-level

elements. Block-level elements can contain inline elements and other block-level elements where

structure allows, such as the <ul> containing <li> elements, both of which are block-level.

You can alter the default display type by using the CSS property ‘display’. If you wished to

make hyperlinks display as block-level elements:

a { display: block; }

Likewise, if you wished for each <li> to display inline:

li { display: inline; }

Exercise 4 – Altering Block-Level Elements

Create an XHTML strict 1.0 page and include the code sample from Figure 8 in the <body> element of the page. Create and link a style sheet to alter the appearance of the unordered list to a horizontal ‘inline’ list of hyperlinks. This exercise should be completed without having to alter the XHTML mark-up. An example of the solution is shown in Figure 9.

<ul> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.co.uk">Yahoo!</a></li> <li><a href="http://www.excite.com">Excite</a></li> </ul>

Figure 8 Code sample inside <body> element - Exercise 4

Figure 9 Exercise 4 sample solution screen shots



Units of Measurement

Many of the properties that CSS can implement require measurements. This can be anything

from the size of fonts, the thickness of a border to width of a heading. These values specify

height or width in most instances. These values can be measured in one of three ways in CSS:

• Absolute Units

• Relative Units

• Percentages

Absolute Units

Table shows a list of absolute units available to CSS. Table 1 Absolute units of measurement

Unit Full Name

pt Point

pc Pica

in Inch

cm Centimetre

mm Millimetre

Most of those units are self explanatory with the exception of points and picas. A point is 1/72 of

an inch which is the same as a pixel in many personal computer displays. Points are generally

used to measure font sizes and line spacing. A pica is 1/12 of an inch and is generally used to

determine line length.

Using absolute units of measurement in your CSS documents is simple, just append the unit type

to the end of the value. For example, to set <p> elements to have a font size of 10pt:

p { font-size: 10pt; }



Relative Units and Percentages

According to Duckett (2005), relative units and percentages can be very useful, but they also

pose problems for two reasons:

• Their size can vary depending on the kind of media on which the document is shown

• Users can increase and decrease the size of fonts on a web browser, which can affect some

of the units of length

Relative units are pixel (px), em (em), ex (ex) and percentage (%). A pixel is the smallest basic unit

of measurement in computing displays. Many web designers use the pixel measurements for fine

grain control over the layout of a page on screen. An Em (em) refers to the reference element

(Duckett 2005) which is either the element itself or its parent. The em measurement is originally

thought to be derived from the width of a lowercase ‘m’ but it is now generally considered to be

the height of the font. An ex is similar to the em except it is derived from a lowercase ‘x’.

Percentages provide a value in relation to another value. The percentage is calculated by the

reference element, either the element itself or its container. For example, if the <body> element

was set to a font size of 1em and the paragraphs were set to 150%, the calculated size of the

paragraph would be 1.5em. Changing the <body> element base font size would increase the

paragraph.

Exercise 5 – Using Measurements

Create an XHTML of your own or use the sample file available at: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_measurement.html to experiment with applying measurement units with CSS rules. You are free to enhance the document however you see fit. Try to experiment with relative units and consider how inheritance in CSS affects the visual result. Discuss with your tutor any issue that does not make sense.

The <div> and <span> Elements

The <div> and <span> elements are arguably two of the most useful elements available to a web

developer for assisting with CSS formatting even though, by default, they do not actually ‘do’



anything in terms of presentation. Their main purpose is the logical grouping of related elements

within mark-up.

The ability to group elements logically is a common task. It is conceivable that a logical document

block, a book chapter for example, would be made up of many XHTML elements. It would be a

long laborious task to define styles for each element, or indeed provide a class attribute for each

individual instance. Grouping an entire set of elements with a group element is much more

efficient as you only have to style the single element.

By default, <div> and <span> do not render as anything in the browser. Where a <ul> element

has a defined default form in a browser (bullet list), the <div> and <span> are completely void of

structure. However, they do exist in the mark-up and that means you can attach style. Put

simply, the major difference between <div> and <span>:

• <div> is a block-level grouping element

• <span> is an inline grouping element

A Word on CSS properties

The border, margin and padding properties have already been introduced in this handout.

However, the topics about box model and units of measurement needed to be covered before using

these properties could be understood properly.

Border Property

The border has three main components that browsers support; they are colour, style and width.

They can be set using the individual property names:

div.chapter { border-color:Black; border-width:1px; border-style:solid; }

Or in a short hand form (width, style, and colour), already used in this tutorial:

div.chapter {border: 1px solid Black;}



The border colour can take any of the named web colours and any colour specified in hexadecimal

notation (preceding #). Red, green and blue values can be stated using the following notation:

div.chapter { border-color: rgb(0,0,0);} /* Black */

Border width can be set using any of the measurements covered in The Box Model &

Measurement, starting on page 8.

Border style can be any of the named style methods: dashed, dotted, double, groove, hidden,

inherit, inset, none, outset, ridge and solid.

Padding Property

The padding property enabled you to specify how much space should appear between the

content of an element and its border:

div.chapter {padding: 5px;}

The value should be a length, percentage or the keyword ‘inherit’. You can specify different

padding values for each side using padding-bottom, padding-right, padding-left and padding-top

properties. Use padding to create white space between the content of an element and any border

it has.

Margin Property

The margin property sets the gap between a box and any surrounding boxes; its value is a length,

a percentage or the keyword ‘inherit’.

div.chapter {margin: 10px;}

Individual settings for each side of a box can also be specified using margin-left, margin-top,

margin-right and margin-bottom properties.

Dimensions

As CSS treats all elements like a box, it is necessary to understand some of the properties related

to dimensions. Table 2 explains some of the common properties.



Table 2 Box model dimension properties (Ducket 2005)

Property Description

Height Sets the height of a box

Width Sets the width of a box

Line-height Sets the height of a line of text (leading)

Max-height Sets a maximum height that a box can be

Min-height Sets a minimum height that a box can be

Max-width Sets the maximum width that a box can be

Min-width Sets the minimum width that a box can be

It should be noted that only height, width and line-height are currently supported in Microsoft®

Internet Explorer® 6.x.

Exercise 6 – Styling using <div> and <span>

Download the sample document: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_div.html and save it to your personal storage area. Examine the mark-up and locate the elements and make note of their classes. Style the XHTML document so that it looks like or similar to the screen shot shown in Figure 10.

Figure 10 Exercise 10 sample results



Further Exercises

During your study time, you should attempt the following questions and exercises:

• Consider why grouping elements together in mark-up for styling purposes is considered

efficient, can you explain why?

• Build a five page web site using one or more style sheets to determine the look of the

pages. Create your page design first using paper and pen/pencil. Use the techniques in this

tutorial to make your CSS efficient

• Experiment with border, margins and padding. A margin will take a negative value but

padding will not, why is this so and why might it be useful?

• Investigate the z-order property and how it relates to the previous bullet point

References

Ducket, J. (2005) Accessible XHTML and CSS Web Sites: Problem-Design-Solution, Wrox Press

(J. Wiley Publishing, Inc.), Indianapolis, IN, USA

Schafer, S.M. (2005) Web Standards, Wrox Press (J. Wiley Publishing, Inc), Indianapolis, IN,

USA

Schmitt, C. et al. (2005) Professional CSS: Cascading Style Sheets for Web Design, Wrox Press (J.

Wiley Publishing, Inc), Indianapolis, IN, USA

Acknowledgements

Portions of the tutorial exercises were taken from Duckett (2005)

Documents

03 Tutorial XHTML CSS - Ivailo Chakarov- Resources · Using and Applying CSS to XHTML The purpose of this tutorial is to build upon the introduction to XHTML 1.0 ... Tutorial 03 XHTML