Cascading Style Sheets

Style Sheets

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

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 HTML code means larger pages. Larger usually means slower performance.

You should probably spend more time learning to use CSS than HTML.

The simplest HTML5 code can be turned into a masterpiece using CSS.

The possibilities are endless with the latest releases of CSS.

CSS Editor

HTMLPad 2014 - HTML 5 code editorHTMLPad is also a very sophisticted CSS editor.

Bring it up in the HTMLPad editor and toggle back and forth between the web page and the style sheet as you develop your page.

Try it free for 30 days. Fully Functional!!

Download a Free Trial

Or find out more about HTMLPad 2014

Get Started Right!!!!

 

 

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.

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

Inline style sheets are placed in the actual lines of code and can over ride both linked and embedded style sheet settings.

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:

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 }

Examples:

body { background: #000000 }
p { font-family: arial }
h1 { font-size: 28px}

Multiple settings are separated by semi colons:

body { max-width: 1200px; margin: 0 auto; background: #000000 }

When creating linked or embedded style sheets use:

body {
	 max-width: 1200px; 
     margin: 0 auto; 
     background: #000000 
     }

Just makes it easier to read.

some Attributes and Values

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
% - example: 100% (16px = 1em = 100%)
pixels - example: 12px (most accurate)
em - example: 0.875em (.875X16px - same as percentage 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 %
shorter version: padding: 2px 2px ; ( top-bottom left-right)
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).

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

Generic Font Families

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

Font-size and W3C Validation

All of the methods for font-size shown above are acceptable

The examples provided below show how each method is calculated:

body {
  font-size: 100%/16px/1em
}

p {
  font-size: 87.5%/14px/0.875em
}

h1 {
  font-size: 150%/1.5em/24px
}

h2 {
  font-size: 125%/1.25em/20px
}

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