XHTML & CSS 2 - Ivailo Chakarov

Download Report

Transcript XHTML & CSS 2 - Ivailo Chakarov 

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 blocklevel 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
Selector
{
Declaration
Property
{
{
h1 { font-family: arial; }
Value
Validation of CSS

Similar to validating your (X)HTML pages


Using the following validating tool online:


you should validate your style sheets too
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



E.g. setting <body> font-family to Arial




Setting properties for parent elements
Automatically passing them down to children
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
Margin
Padding
Border
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.
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


Engage with the tutorial material and learn to use
these concepts in real examples and exercises


Need to practice skill, learn the behaviour and develop
using the parent/child and box model concepts mindset
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!