Introduction
With html code you define the structure and data of a web page. Usually you
want to make your message more attractive to a reader by using for example different fonts
and colors. This means you want to style your text and images. The style here
means what is the outlook of an html element in a web page.
You can define styles in
- an external style sheet file
- at the beginning of an html file
- in a specific html element
When styles are defined in an external style sheet file this style sheet file can be used
with several html files to have the same style. Style definitions at the
beginning of an individual html page is used if there is a need to have a
specific style just in one html file. Correspondingly a definition in an
individual html element is defined if you want just and only that element to
have a specifc style.
A style sheet file is called CSS file. CSS comes from Cascading Style Sheets. Cascade means that one or more style
sheets are combined to form the whole set of styles needed for desired output.
The extension of a style sheet name is css, i.e. mystyles.css.
Setting up a CSS document
An html file need to know the name of the style sheet. There is a reference
to a style sheet file in a head element of an html file. The syntax for the
reference is
<link rel="stylesheet" type="text/css" href="path and name of css file" >
Let's assume that the name of an css file is mystyles.css and it is in the
same folder as the html file. The head element of the html file will be
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Styles example</title>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
The first line tells that this document is html5 standard document. The
second line starts the html element i.e. the whole html document. There is a
lang attribute with a value to tell that this document is written using English
language. Then the head element starts. The first line in the head element
defines the character set used in the document. UTF-8 is the most common
chararter set used among latin letters. Then there is the title of the page.
Finally you see the reference to a style sheet file and the end of the head
element.
Basic CSS Syntax
At the beginning of the css file there is no definitions to define that this
is a style sheet. You just start to write the style definitions. Here is an
example of a definition and the result of it in a web page.
The syntax of a style definition is: selector {
property: value; }. An example: p { color: red; }
A selector is the element that you want to define a style, in the example
p. The declaration
block is surrounded by curly brackets, { }. In the declaration block there is one or
more property and value pairs. Property, in the example color, and value,
in the example red, are separated by a colon :. Each
property-value pair is ended by a semicolon ;.
There are a lot of properties that you can use when styling you web pages. You can read the full list of
properties and their values in w3school.com
CSS
reference page.
Example 1:
You can write one or more property-value pairs for the selector. Note that different property-value pairs are written in different rows to
make them easier to read and distinguish.
html code
<p>An example text.</p>
style sheet code: here font color, font family and font weight is defined.
p {
color: red;
font-family: "Courier New";
font-weight: bold;
}
result
Example 2:
Sometimes there is a need to have the same definition for
several elements. These elements are listed as a selector separated by commas.
html code
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
style sheet code: the headings have the same font, the background of the
headings have a gray color, the line height is also same for all headings but
the font color is different in these headings.
h2, h3, h4 {
font-family: Calibri;
line-height: 30px;
background-color: gray;
}
h2 { color: white; }
h3, h4 { color: yellow; }
result
In the previous example you see that an html element takes a space of a
rectangle. By default there is some space (margin) around an element.
Class and Id Selectors
Let's assume that you have several paragraphs in you html page. Even
paragraphs should have a different style from odd paragraphs. What to do?
The
html elements can have an attribute called class that is used to distinguish
elements from each other. A class attribute classifies elements. In the style sheet the class attribute values are used.
There is a dot before an attribute value in the style sheet.
Example 4:
html file code
<!-- paragraphs have a class attribute -->
<p class="rowA">The longest journey starts with a single step.</p>
<p class="rowB">The shoemaker's son always goes barefoot.</p>
<p class="rowA">The way to a man's heart is through his stomach.</p>
<p class="rowB">There's always more fish in the sea.</p>
style sheet file code. Note the way to write comments in a style sheet file.
p {
font-family: Cambria;
line-height: 30px;
}
p.rowA {
color: blue;
background-color: #CCFFFF;
}
p.rowB {
color: red;
background-color: #FFCCFF;
}
The result in a page. When defining a color (font color or background color)
you can use a color name or hexadecimal values. In an html editor there is
usually a tool to choose a color. If you don't have such an editor you can find
color names and hexadecimal values in w3schools.com site:
CSS
Colors,
CSS
Color Names,
CSS
Color Hex. Colors can be defined in rgb colors, too. RGB means red, green,
blue.
In the previous example in the style sheet the classes 'rowA' and 'rowB' were
attached to paragraphs by the selectors p.rowA and p.rowB. This definition means
that these are for paragraphs only.
Example 5:
You can use an html class as a selector without the html element. In this
case the selector starts with a dot.
A style sheet definition
.rowA {
color: blue;
background-color: #CCFFFF;
}
.rowB {
color: red;
background-color: #FFCCFF;
}
Their use in a html page.
<h3 class="rowA">Some animals</h3>
<p class="rowB">cats</p>
<p>dogs</p>
<p class="rowB">horses</p>
The result.
Example 6:
Id selector in a style sheet means that there is an html
element with an id attribute having that value. Id selector have # before it in
a style sheet. In a single html file the ids should be unique. This means that
each id attribute value should be unique in one html file. The same id value can
be used again in a different html file.
html file code
<p id="mytext">Paragraph with an id.</p>
<p>Paragraph without an id.</p>
style sheet file code
p {
font-family: Cambria;
line-height: 30px;
}
#mytext {
background-color: #9999FF;
}
With id selector is like class selector: you can define it with or without
html element depending whether you want to restrict the use of id attribute to
specific html element or not.
Backgrounds, Text and Fonts
Background styling
In the previous examples I have used backgroud-color property. An html
element can also have an image as background element. A detailed explanation of
background you can read from w3schools.com site.
To set the background image there are many properties. By default the image
repeats itself to fill the area but you can restrict this behavior.
Example 7:
html code
<p class="flower"> </p>
style sheet code: url comes from the words uniform resource locator meaning
the path and name of the image. Here the image is in the same folder as the html
file. Note that the image name is in single quotes, you can use also normal
quotation marks.
p.flower {
background-image: url('daisy_tn2.jpg');
height: 100px;
}
result: the image fills the whole area. The height of the image is 50px. The
height of the paragraph is 100px. That's why there are two rows of flowers.
Example 8:
The html code is the same but style sheet code is different.
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: no-repeat;
background-color:#339933;
height: 100px;
}
result
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: repeat-x;
background-color:#339933;
height: 100px;
}
result
You can place the image in the area in different places. Here is an example to
place it right bottom corner.
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: no-repeat;
background-color:#339933;
background-position: right bottom;
height: 100px;
}
result
You can write the background properties in one property.
p.flower {
background:url('daisy_tn2.jpg') center bottom no-repeat #339933;
height: 100p}
result
Text styling
The styles of text in headings, paragraphs, lists etc. can be aligned (left,
right, center), the line height can be defined (text is in the middle of the
line in the vertical direction), the text can be decorated (shadow text, wavy
lines). Not all browsers support all text decorations. You can read more
detailed information about the
styling of text in w3schools.com site,
see Text properties and Text decoration properties.
Example 9:
Some styling for paragraph text. The text is in the middle of the line, there
is same amount of space above and below the text in the colored line. The text
is centered in the line. The letters have a little bit more space between them
and there is a red shadow.
p {
font-family: Cambria;
line-height: 30px;
text-align:center;
text-shadow: 2px 2px #ff0000;
letter-spacing: 2px;
background-color: aqua;
}
See the difference between line-height and height of an element that has text
in. With line-height the text is in the middle of the line, with height the text
is in the upper part of the line.
p {
font-family: Cambria;
height: 30px;
text-align:center;
text-shadow: 2px 2px #ff0000;
letter-spacing: 2px;
background-color: aqua;
}
Fonts
In each browser there is a default font defined,
usually it is Times New Roman.
In the style sheet file you can define the fonts for the texts. For the browser
text there is an advice that the text should be Sans-serif font because it is
easier to read from the screen. This text is Verdada that is sans-serif font. Times New Roman is a
serif font. You can read more about
serif and
sans-serif fonts in Wikipedia.
The base font is defined in the body selector. This makes the font in use for
all elements inside the body element i.e. in the whole page.
The browser takes
the font from the readers computer. This is why you should use the common fonts
that are installed and are in use in most of the computers.
Because you can't be sure what fonts are installed in the reader's computer you
should define several fonts. The fonts are taken into use in the order you write
them. If the first font is not found in the reader's computer the second is
taken into use etc.
body { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }
Where and How to use CSS
The most common way is to write style definitions in an external css file and write a
reference to it in the html head element, see Setting up a
CSS document. This is the way the same styles can be used in several html
files. If a style should be changed the change is done in one css file and the
result can be seen in all those html files that has a reference to that css
file.
You can write style definitions also in the head element of the html file.
The disadvantage of this approach is that definitions are in use only in the
html file that they are written. This approach is used if there is a need for
file specific definitions. The style definitions are written in the <style>
element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Styles in html file</title>
<style type="text/css">
</style>
</head>
Sometimes you may need style definitions for an individual html element in an
html file. These defintions you write in the style attribute.
<p style="color: red; font-family: Georgia;">This is a special paragraph.</p>
If you have a very large site with huge amount of style definitions you may
want to write different kind of definitions to different files. This may help
you to manage the styles. Here is an example of two stylesheets in use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Large site</title>
<link rel="stylesheet" type="text/css" href="layoutstyles.css" >
<link rel="stylesheet" type="text/css" href="textstyles.css" >
</head>
Final example
Here is a page with style sheet to give you an idea about styling.
html code of the page
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Page Example</title>
<link href="mystyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> My flowers</h1>
<h2>Wild Thyme</h2>
<p><img alt="wild thyme" src="wildthyme.jpg"></p>
<p>Easily grown in average, dry to medium, well-drained soils in full sun. Tolerates
drought and poor soils of somewhat low fertility. Loose, sandy or rocky soils with
excellent drainage are best. Dislikes moist to wet soils where it tends to rot.
Cut back stems as necessary to maintain plant appearance or to control growth/spread
or limit unsightly woody stem growth. Plants are evergreen in mild winters.</p>
<h2>Daisy</h2>
<p><img alt="daisy" src="daisy.jpg" ></p>
<p>Modern cultivated chrysanthemums are showier than their wild relatives. The flower
heads occur in various forms, and can be daisy-like or decorative, like pompons
or buttons. This genus contains many hybrids and thousands of cultivars developed
for horticultural purposes. In addition to the traditional yellow, other colors
are available, such as white, purple, and red. The most important hybrid is Chrysanthemum
× morifolium (syn. C. × grandiflorum), derived primarily from C. indicum, but also
involving other species.</p>
<p class="link">You can read more about<a href="http://en.wikipedia.org/wiki/List_of_garden_plants" target="_blank">
garden plants</a> in Wikipedia.</p>
</body>
</html>
style sheet code
body {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
background-color:#FFFFCC;
}
h1, h2 {
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
h1 {
background-image:url('daisy_tn2.jpg');
background-repeat:no-repeat;
height: 80px;
line-height: 80px;
background-position: right center;
background-color: #99DD99;
color:#666666;
}
h2 {
text-shadow: 2px 2px #C0C0C0;
text-decoration:overline;
}
p.link {
text-align:right;
}
