Sample of the pdf document :
HTML has evolved into a mixed-up language:
it defines logical structure-defining elements like lists, headlines, etc.
together with pure formatting directives like <font>, <b>, and
<i>. It is advantageous to separate those two:
- ·
want to
define logical structures for our content
- ·
want to
separately define formatting options for the structures
- ·
want to be
able to apply one set of formatting rules to multiple web pages for uniformity
That’s what (X)HTML + CSS (Cascading Style Sheets) accomplishes.
Style sheets define how a text structure should look like, whereas (X)HTML
defines where the structures start and end and how they are related. Styles
sheets are cascading, because you can attach more than one style sheet to one (X)HTML
document and they will all cascade into one style.
Styles can be defined in three different
ways
·
external: the styles are
define in a separate file, usually with .css extension
·
internal: the styles are
defined inside the HTML file, usually in the header section
·
inline: the style is
defined inside an existing tag
The most useful one is an external style
sheet, so we will stick with that for the most part.
Each style in a style sheet has three
parts, a selector, one or more properties with one or more values each, following this syntax:
selector {
property1: value1 [value2 ...];
property2: value1 [value2 ...];
...
}
To attach a style sheet to an external
XHTML document you use the <link> tag in an HTML file. To attach a style
sheet called style.css you would add the following to the head section of an
XHTML document:
<link href="style.css"
rel="stylesheet" type="text/css" />
Here is the framework for an XHTML – CSS
document pair (the CSS style sheet is called style.css):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
<meta content="text/html;
charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<p>Content goes here</p>
</body>
</html>
While you can create style sheets with
any text editor, it is convenient to use a more powerful editor specializing in
web page creation – for example Expression Web:
Exercise:
Use Expression
Web to create a new HTML document as well as a new style sheet and save the
empty files to the same directory. Make the HTML document your current one,
then use the “Format” menu to attach your new style sheet to your web page.
Create a level-1 headline, a list, and a paragraph of text in your web document.
Check the source
of your document to verify that Expression Web has inserted the correct
framework and attached the right style sheet.
Define the
following style, save everything, switch to your HTML document and press F5 to
reload:
h1 {
border: 2px black solid;
}
More
about style sheets:
Style sheets define three types of styles:
#id ID’s
are frequently used to define large structures in an HTML document. Each id can
be used only once in each HTML document
.class Classes
are styles that can be reused and applied to different elements via a class
parameter, such as <p
class=”name”> … </p>. The class=”name”
parameter can be added to any HTML element. Multiple classes can be applied to
one element by separating them with spaces, as in <p class=”name1 name2”>
element Elements
are used to redefine how existing HTML
elements are to be formatted
Common style properties are fonts,
alignment, borders, margins, paddings, and locations. Here is a list of some common
CSS properties (taken from http://www.htmldog.com/guides/)
but there are additional ones....
Click here for Download PDF / FREE
.png)
