XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)

XHTML & CSS 2

By Trevor Adams

Last week XHTML

eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax

Elements (tags) Attributes Document Types Document level elements – structure of an HTML document

Topics Covered

XHTML Parent / Child Elements Hierarchical structure that facilitates styles that

‘cascade’ Block-level and inline elements

Topics Covered

CSS Cascading Style Sheets Purpose of styles CSS levels 1, 2 and 3 Defining styles Understanding selectors Inheritance The box model

Major CSS Concept

XHTML

Standards compliant mark-up should be well formed and valid Hopefully you have become familiar with the validation tool

@ http://validator.w3.org/

Part of being well formed and valid is to have properly nested and appropriate elements

The concept of parent / child elements has been used already Might not have noticed <ul>, <li> elements of the bullet list are a good example

XHTML – Parent / Child

The ‘eldest’ element in an XHTML document is <html>

An element is said to be a parent when it encompasses other elements

An element is said to be a child when it is contained within another element <body> is a child of <html> <li> is child to <ul>, making <ul> a parent <ul> is child to <body>, which makes <body> a parent also It is possible for an element to be both a child and parent

XHTML – Parent / Child

Certain elements have to be children Particularly where the structure of an element

demands this And <li> must be a child of a <ul> element,

logically and semantically Table cells could not exist validly outside of a

table element

XHTML – Block / Inline Elements

All elements in XHTML are rendered as either block-level or inline

It is important to understand what these descriptions mean Assists with understanding XHTML validity Affords an understanding of CSS rules applied to

each type

XHTML – Block-level Elements

A block-level element is always as wide as its container

It always forces new content onto a new line Examples of block elements

<p>, <h1> - <h6>, <ul>, <li> They can contain other block level elements

and / or inline elements

XHTML – Inline Elements

Inline elements are contained within a block-level element and flow as part of the content

Inline mark-up does not break on to a new line automatically (except the <br />)

Examples of inline elements <a>, <strong>, <em>, <abbr>, <acronym>

Question?

Is an <img> element inline or block-level?

Cascading Style Sheets

Introduction

What does CSS do?

Allows to define rules to determine the appearance of mark-up We do not want appearance mark-up in our

HTML files. Not necessary – for many reasons Think about it for a moment

Meaning and Appearance

The XHTML document should contain the meaning It is the information that is paramount Design issues are subjective Not everyone can use a visual design People may not want the style you chose

But what about my great design! Take pride in delivering a web site that is

accessible first and looks good second CSS lets you accomplish both

CSS is good for you

External CSS files make each of your HTML files smaller and efficient No need to repeat the formatting rules You can manage your site look and feel from one file

No matter two or two hundred pages Concentrate on producing clean mark-up

The information in the mark-up should make sense when there is no style attached

Users should not have to rely on the style you create for them

They may night have keen sense of style!

CSS is good for the user

Pages are smaller, therefore faster to download

A browser can easily cache a style sheet No need to keep retrieving it upon page requests

Some browsers allow users to customise their experience with personal style sheets Let the user ‘use’ their computer the way they

want to – do not force them into things they do not want

Format of CSS

A rule is made with Selector – element(s) to reference Declaration – set of statements that associate an element

display property with a value specified. Every declaration is in the format ‘property-name: value;’ A declaration may have one or more rules defined

h1 { font-family: arial; }

{{

Selector

ValueProperty

{Declaration

Validation of CSS Similar to validating your (X)HTML pages

you should validate your style sheets too

Using the following validating tool online: W3C Validation Service @

http://jigsaw.w3.org/css-validator/

Or this one: CSS Check @

http://www.htmlhelp.com/tools/csscheck/

Where are we going with CSS

We shall style our documents using CSS Also, control the screen layout using

positional CSS But not this week grass hoppers! First we must master the basics

Learn how to create dynamic effects without JavaScript, such as menu rollovers

CSS - Inheritance

A major advantage of CSS – Inheritance Setting properties for parent elements Automatically passing them down to children

E.g. setting <body> font-family to Arial Has a knock on effect of setting child elements to the same No need to specify a rule for each child element also Can change the setting with one line in the CSS

The more specific rules override the more general ones Nice and easy to see what is going on

CSS – The Box Model

Everything in XHTML / CSS is treated as a box

Both inline and block level elements The box is made up of

Border Margin Padding

Box Model

Margin – space between border and other boxes Border – line that marks the box boundary Padding – space between border and contained

content

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

Summary

XHTML concepts are important They define how you describe your information Remember, information is paramount,

presentation is secondary Aim to achieve both, but presentation with information

is generally useless CSS – Cascading Style Sheets

Become familiar with the Box model and property inheritance

Corner stone concepts of CSS

Where is it going?

These topics are of little use to you when just listening about them Need to practice skill, learn the behaviour and develop

using the parent/child and box model concepts mindset Engage with the tutorial material and learn to use

these concepts in real examples and exercises Do not do, then forget. This is a skill which needs visiting

many times over to see how it applies to different projects Examine any previous work and see how the

techniques discussed here could be applied Think about the steps involved in turning an older

standard / non-standard site into a professional job

Questions?

Thank you for taking part!

Documents

XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)