Click here to Skip to main content
15,867,488 members
Articles / Web Development / HTML

Beginner's Guide to HTML5 & CSS3 - Part 3/12: Styling Your First Web Page

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
4 Apr 2014CPOL9 min read 8.7K   6   1
Styling your first web page

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.

/* this definition is for all paragraphs with or without class attribute */
p {
  font-family: Cambria;
  line-height: 30px;
}

/* different style definitions for paragrapsh having class attribute, note the dot between p and attribute value */
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

/* these definitions can be used with any html element */
.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

/* this definition is for all paragraphs with or without class or id attribute */
p {
  font-family: Cambria;
  line-height: 30px;
}

/* id selector in use */
#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 definitions here */

   </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>&nbsp;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;
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Finland Finland
I am lecturer in Oulu University of Applied Sciences, Oulu, Finland. Teaching subjects are programming, web development and databases.

Comments and Discussions

 
GeneralThanks for entering! Pin
Kevin Priddle8-Apr-14 10:23
professionalKevin Priddle8-Apr-14 10:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.