HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML stylesheets

Placing text, links, graphics, tables, and those other things on webpages is cool, but how do we add things like color, size, margin, and layout? How do we go about styling webpages?

This tutorial focuses on:

What is a stylesheet?

A Stylesheet is a command or set of commands used to control the appearance and layout of various elements on webpages, as well as simplify webpage design by avoiding redundancy. Using stylesheets you can set the color and font of text, the size of form textboxes, the margin between various elements on a webpage, and much more.

As discussed in earlier tutorials, you can use the attributes of certain tags (such as the <font> tag) to create styles, but this method of styling is outdated (or as we often say "deprecated"), and stylesheets should be used instead.

The various stylesheet commands

Stylesheet commands are what actually makes stylesheets work - they control the appearance and layout of elements on a webpage.

Stylesheet Commands
Command Usage Possible values
color sets the color of text any color value in hexadecimal preceded by the # sign (ex. #FFFFFF) or words (ex. green), or an rgb value (ex. rgb(150, 150, 150) or transparent for transparent color
text-align sets the alignment of text left, right, center, or justify
font-family denotes a list of font-family names font-family name or generic-family (such as Verdana, Helvetica, Courier)
font-size denotes the size of text small, medium, large, length(pt), (in), (cm), (px), or % preceded by a numeric value.
background-color sets the background color of elements any color value in hexadecimal preceded by the # sign (ex. #FFFFFF) or words (ex. green), or an rgb value (ex. rgb(150, 150, 150) or transparent for transparent color
background-image denotes a background image the word url preceded by the url of the image in parentheses, the word none for no image

This is only a short list of all the stylesheet commands that are available. To learn more about stylesheets, visit our CSS tutorials section.

The three types of stylesheets

Three types of stylesheets

Declaring an internal stylesheet

An internal stylesheet is declared using the <style> tag.

The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".

An internal stylesheet goes in the head section of an HTML document.

Syntax for declaring an internal stylesheet:
<style type="text/css"> styles go here </style>
In HTML code:
<html> <head> <title>Stylesheets</title> <style type="text/css"> styles go here </style> </head> <body> Some text </body> </html>

Declaring an external stylesheet

An external stylesheet is declared in an external file with a .css extension. It is called by the page whose interface it will affect.

NOTE: The <style> tag is NOT used in an external stylesheet.

External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes.

Attributes of the <link> tag
Example:
<html> <head> <title>Stylesheets</title> <link rel="stylesheet" type="text/css" href="/css/style.css" /> </head> <body> Some text </body> </html>

The above example calls an external stylesheet named style.css that is located in the "css" directory.

Declaring an inline stylesheet

Inline stylesheets are declared within individual tags and affect those tags only.

Inline stylesheets are declared with the style attribute.

Example:
<p style="color:#008000;">This text will be green.</p>

In this example, we are using the stylesheet command color to denote that the text in a paragraph will be green.

Output:
This text will be green.

Applying styles to elements on a webpage

Now that you know various stylesheet commands as well as the different types of stylesheets, how do we actually apply styles to elements on a webpage? There are two ways to apply styles to elements on a webpage.

1. Using inline stylesheets as per the method described above -- manually inserting stylesheet commands into the HTML tags that you want to affect. Here is the inline stylesheet example from above to reiterate:

Example:
<p style="color: #008000;">This text will be green</p>

In this example, we are using the stylesheet command color to denote that the text in a paragraph will be green.

2. Using inline stylesheets effects only the individual tag where you place the stylesheet command(s). What if you wanted to apply certain styles to particular HTML tags? For example, to make all the text that is declared with the <h1> tag bold. The second way of applying stylesheet commands to HTML tags is just that -- applying one set of style(s) to a particular tag.

This is accomplished by referencing the tag in an internal or external stylesheet, and then defining its style(s) in sorrounding brackets { }

Example:
<html> <head> <title>Internal stylesheet</title> <style type="text/css"> h1 { font-family: arial; font-size: 14pt; font-weight: bold; color: #8da1b5; } </style> </head> <body> <h1>Webpages are cool</h1> </body> </html>

In the above example, we are declaring that all text declared with the <h1> tag will have a font of arial, a font size of 14 points, will be bold, and will be blue. Whenever text will be declared with the <h1> tag, it will automatically get the properties specified.

Output:
Webpages are cool

Classes

Why should a particular format be specified only for particular tags? Classes and ID's make it possible to specify a particular style for a variety of tags.

Classes are created by placing the class attribute in a tag.

Example:
<p class="text">This text will be green, bold, arial, and have a font size of 10</p>

Styles for classes are specified with the . (dot) character followed by the class name in an internal or external stylesheet.

Example:
<style type="text/css"> .text { font-family: arial; font-size: 10pt; font-weight: bold; color: #008000; } </style>

In the above example, the class text is specified to have a font of arial, a font size of 10 points, to be bold, and green. Any tag specified as part of the text class will get these properties and will display its text as such.

Based on the stylesheet from above:
<p class="text"> This text will be green, bold, arial, and have a font size of 10 </p>
will be displayed as:

This text will be green, bold, arial, and have a font size of 10

ID's

ID's are created by placing the id attribute in a tag.

Example:
<div id="data"> This data will have a light blue background, a blue border, its font will be Verdana, and it will be black. It will also be positioned inside a container that is 200 pixels in width and 200 pixels in height. </div>

ID's are specified with the # (pound sign) followed by the ID name in an internal or external stylesheet.

<style type="text/css"> #data { background-color: lightblue; border: 1px solid #8da1b5; font-family: Verdana; color: #4f4f4f; } </style>

In the above example, the data ID is specified to have a light blue background, a blue border, Verdana font, and black text. It is also specified to be positioned inside a container that is 200 pixels in width and 200 pixels in height. Any element that is specified with the data id will get these properties.

In the above example, we also introduce some new things. Specifically, the <div> tag, and the border stylesheet command. The <div> tag is used to create a container on a webpage. You can use it for things like menus, content areas, and footers. The border stylesheet command is used to set the border of an element. You can use it to set the borders thickness, type, and color. We set it to have a thickness of 1 pixel, to be of a solid type (some other border types include dashed, dotted, and groove), and to have a blue background.

Based on the stylesheet from above:
<div id="data"> This data will have a light blue background, a blue border, its font will be Verdana, and it will be black. It will also be positioned inside a container that is 200 pixels in width and 200 pixels in height. </div>
will be displayed as:
This data will have a light blue background, a blue border, its font will be Verdana, and it will be orange. It will also be positioned inside a container that is 200 pixels in width and 200 pixels in height.

Difference between Classes and ID's

It seems that classes and id's can be used for the same purpose, is there a real difference between them?

While you could technically use them for the same purpose, they should be used differently. ID's are used to specify specific elements on a webpage that will not repeat again, and so ID's should be used for these elements (such as a container for the main content of a webpage, menus, and footers). Classes specify that an element is part of a group. For example, a paragraph that should contain red text because it is an important note to the reader. In such a case, it is likely that you will have several such 'notes' throughout a webpage.

Styling - a language all its own

Styling pages is actually not part of HTML (at least not in the modern usage of HTML), but is actually a language all its own. The stylesheet commands presented earlier in this lesson are not part of HTML. HTML consists of tags and attributes within them, not stylesheet commands.

The stylesheet commands presented earlier in this lesson are actually part of a separate language called CSS. CSS is a styling language all its own, and it is used to style the elements on webpages including text, forms, images, and more as well as set the layout of webpages.

Even though the stylesheet commands are not part of HTML, the tags used to work with styling (such as <style> and <link>) are part of HTML. Remember that a page consists of elements and styles and everything must work together. The tags that HTML provides to actually apply the styles to the elements on a webpage are the mechanism by which page elements and styles are bridged to create a composite.

If you read through this tutorial, then you already have a taste of CSS and your knowledge of web development is now beyond HTML. Check out our CSS tutorials section so you can learn about styling pages in depth.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information