Create a Free Website

HTML Code Tutorial


Style Sheets

The use of Style Sheets can save a lot of time in the process of building HTML pages.

This is the main advantage of using them since actual page attributes are determined by the visiting browser.

Also, the old inline method of assigning fonts to paragraphs and other page structures is Deprecated, added a considerable amount of extra code to a page and should no longer be used.

Extra code means larger pages and greater bandwidth consumption.

Faster building and smaller pages make the time invested in learning to use style sheets worthwhile.

Methods

There are 3 methods of using style sheets in HTML documents. They are, linked , embedded and inline.

Linked style sheets are placed in a separate text file and accessed by the visiting browser each time a web page is viewed.

Create a FREE Website


NO CODING!!

Create beautiful, professional websites
WITHOUT Learning to Code!!

19 Million+ Amazing FLASH websites
created by people just like you,
with no knowledge of HTML coding.

Create Free Websites


Start Your FREE Website Now!



Style Sheet DiagramThis Diagram found at the end of our Basics Tutorial shows the relationship between the code on an HTML web page and its linked style sheet.

Note: You can skim the 5 lessons for an explanation of what each style setting does to the code on the HTML page.

Embedded style sheets are placed in the head section of the HTML web page and can over ride linked settings.

Inline style sheets are much like the old method of assigning font attributes.

They are placed in the actual lines of code and can over ride both linked and embedded style sheet settings. There are some HTML tags that require the inline method to work properly.

Style Sheet Construction

No matter what method is used, the basic structure of an individual style sheet setting is the same.

Each line of a style sheet is made up of 2 parts: selector and declaration
selector { declaration }
Selectors are placed to the left of the curly brackets and refer to the HTML tag which is to be defined by the declaration. All declarations are enclosed in curly brackets.
Selectors take the form of the html tag without its enclosing brackets.
Examples:

  • Tag: <p> CSS: p { declaration }
  • Tag: <h2> CSS: h2 { declaration }
  • Tag: <a href> CSS: a { declaration }

The declaration also contains 2 parts separated by a colon which acts as an equal sign.
attribute: value
Simply put it reads attribute equals value. You can assign more than one declaration per selector. Each individual declaration is separated by a semi-colon.
selector { attribute: value; attribute: value; attribute: value }

A few attributes with values which can be set using Style Sheets are:

font-family
arial
arial black
courier
times
tahoma
verdana
Always include a generic - example: serif
font-size
xx-small
x-small
small
medium
large
x-large
xx-large
points - example: 10pt
pixels - example: 12px
em - example: 0.875em (W3C Recommended Method)
font-style
normal
oblique
italic
font-weight
normal
bold
bolder
lighter
weight in numbers 100 - 900
text-align (for aligning text)
left
right
center
justify
color
name - example: red
hexidecimal code - example: #ff0000 - Recommended
rgb - example: #f00
background-color
name - example: red
hexidecimal code - example: #ff0000 - Recommended
rgb - example: #f00
background
Same as background-color for color but accepts transparent
url(images/imagename.gif) for adding background images
text-indent (for indenting paragraphs)
set value in pixels, ems or %
padding: # # # # (start top then clockwise - right, bottom, left)
set value in pixels, ems or %
margin: # # # # (start top then clockwise - right, bottom, left)
set value in pixels, ems or %

An example of each setting is shown in the style sheet shown below. Notice that each individual declaration is separated or followed by a semi-colon.

p { 
font-family: arial, tahoma, sans-serif;
font-style : normal ;
font-size : .875em; 
font-weight : normal;
text-align :left; 
color :#000000;
background: transparent; 
text-indent : 1em;
padding: 2px 0 2px 2px
}

NOTE: Color can be specified by name (blue), hexidecimal code (#0000ff) or RGB code (#00f).

To keep your Style Sheets W3C compliant follow 2 simple rules.

  1. When declaring font families, specify a minimum of 2. The last should always be a generic family.
  2. Use EMs to size your text

Generic Font Families

  • serif
  • sans-serif
  • fantasy
  • cursive
  • monospace

The browser defaults to the generic choice when a declared font is not available on a surfer's machine.

Once you develop a desired look for your pages using the style tag, save it in Notepad and paste it into each document that you build. Or include the style sheet settings in your templates. This will also help to produce consistency in your pages.

Linked Style Sheets

Linked style sheets are placed in a separate text file and saved in the root directory. The file is saved with a css extension. A simple link to the file is placed in the head section of each document as shown below.

Code in Head Section:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
Example of lines in text file:
body {
text-align :center
}
p {
font-family: Arial, sans-serif ;
font-size : .875em
}
h2 {
font-family: Arial Black, serif ;
font-size : 1.5em
}

Embedded Style Sheets

Embedded style sheets are placed in the head section within a set of style tags.

Example Code:

<head>
<style type="text/css">
body {text-align :center}
p{font-family: Arial, sans-serif ;font-size : 10pt }
h2 {font-family: Arial Black, serif ;font-size : 16pt }
</style>
</head>


Inline Style Sheets

Inline style sheets will over ride both linked and embedded settings. Certain tags like the span tag work best with Inline settings. Code placement is similar to the old method.

<p STYLE="font-family: Arial, sans-serif ; font-style: normal; font-weight: normal; font-size : 10pt; text-align: left">Style settings can be set using the inline method. It should be used sparingly because of the extra amount of code it adds to the web page.</p>

<p> For more: <span STYLE="font-family: Arial, sans-serif ;font-size : 10pt">See Page 1</span></p>

Font-size and W3C Validation

Though all of the examples for font-size shown above are acceptable, not all are cross browser friendly and not all will validate as W3C compliant CSS.

The example provided below is both:

body {
  font-size: 100%
}

p {
  font-size: 0.875em
}

h1 {
  font-size: 1.5em
}

h2 {
  font-size: 1.25em
}

You can of course adjust the em values for your own size preferences.


For more information on style sheet techniques, study the source code of the documents in our free web template gallery.

You can Test Code in this HTML editor.
Exercise
Try building paragraphs using the inline style sheet code for a paragraph shown above.
Experiment with font size, style, weight and alignment.

Take a quiz. Take a Quiz on this Information.