HTML stylesheets

Style sheets are used to control the appearance and layout of various elements on webpages, as well as simplify webpage design by avoiding redundancy.

This lesson focuses on:

The three types of style sheets
Creating an internal style sheet
Creating an external style sheet
Creating an inline style sheet
The various style sheet commands
Applying style sheet commands to different HTML tags
Classes and ID's

The three types of style sheets

There are three types of style sheets:

Internal
An internal style sheet is placed right on the page whose interface it will affect.
External
An external style sheet is placed in a separate file.
Inline
An inline style sheet is placed inside the tag it will affect.

Creating an internal style sheet

An internal style sheet is created using the <style> tag.

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

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

Syntax for creating an internal style sheet:

<style type="text/css">

styles go here

</style>

Creating an external style sheet

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

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

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

Attributes of the <link> tag:

rel
When using an external style sheet on a webpage, this attribute takes the value "stylesheet"
type
When using an external style sheet on a webpage, this attribute takes the value "text/css"
href
This attribute denotes the location and name of the external style sheet to be used.

Example:

<link rel="stylesheet" type="text/css" href="style1.css" />

This example calls an external style sheet named style1.css that is located in the same directory as the page whose interface it will affect.

Creating an inline style sheet

Inline style sheets are declared within individual tags and affect those tags only.

Inline style sheets are declared with the style attribute.

Example:

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

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

Output:

This text will be green.

The various style sheet commands

Style sheet commands are what actually makes style sheets work - they control the appearance and layout of elements on a webpage.

Style sheet commands
Command	Usage	Possible values
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-repeat	denotes how a background image will tile	repeat, repeat-x, repeat-y, or no-repeat
background-image	denotes a background image	the url of the image, the word none for no image
background-attachment	denotes how a background image will react to a scroll	scroll, fixed
font-family	denotes a list of font-family names	font-family name or generic-family
font-style	denotes the style of text	normal, italic, oblique
font-size	denotes the size of text	small, medium, large, length(pt), (in), (cm), (px), or % preceded by a numeric value.
font-weight	denotes how thick or thin text characters should be	normal, bold, bolder
text-align	denotes the alignment of text	left, right, center, or justify
color	denotes 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

Style sheet commands are specified with the colon (:) character, followed by a single space, followed by the value, followed by a semicolon.

Example:

color: green;

Applying style sheet commands to different HTML tags

Now that you know various style sheet commands, how do we actually apply them to HTML tags? There are two ways to apply style sheet commands to HTML tags.

Using inline style sheets as per the method described above - manually inserting style sheet commands into the HTML tags that you want to affect. Here is the inline style sheet example from above to reiterate:
```
<p style="color: green;">This text will be green</p>
```
In this example, we are using the style sheet command color to denote that the text in a paragraph will be green.
Using inline style sheets effects only the individual tag where you place the style sheet 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 style sheet 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 style sheet, and then defining its style(s) in sorrounding brackets { }

Example:
```
<style type="text/css">
h1 {

font-family: arial; 
font-size: 10pt; 
font-weight: bold; 
color: blue;

}
</style>
```
In this example, we are declaring that all text declared with the <h1> tag will have a typeface of arial, a font size of 10 points, will be bold, and it will be blue. Whenever text will be declared with the <h1> tag, it will automatically get the properties specified.

Classes and ID's

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>

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

Example:

<p id="text">This text will be blue, bold, courier, and have a 
font size of 15</p>

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

Example:

<style type="text/css">
.text {

font-family: arial; 
font-size: 10pt; 
font-weight: bold; 
color: green;

}
</style>

In this example, the class text is specified to have a typeface 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.

Based on the style sheet 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 for classes are specified with the # (pound sign) followed by the ID name in an internal or external style sheet.

Example:

<style type="text/css">
#text {

font-family: courier; 
font-size: 15pt; 
font-weight: bold; 
color: blue;

}
</style>

In this example, the text ID is specified to have a typeface of courier, a font size of 15 points, to be bold, and blue. Any tag specified as part of the text ID will get these properties.

Based on the style sheet from above:

<p id="text">This text will be blue, bold, courier, and have a 
font size of 15</p>

will be displayed as:

This text will be blue, bold, courier, and have a font size of 15

Examples

An internal stylesheet
This example demonstrates declaring and using an internal stylesheet.

An external stylesheet
This example demonstrates declaring and using an external stylesheet.

See more stylesheet examples