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?
- The various stylesheet commands
- The three types of stylesheets
- Applying styles to elements on a webpage
- Styling - a language all its own
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.
| 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
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.
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.
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.
In this example, we are using the stylesheet command color to denote that the text in a paragraph 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:
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 { }
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.
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.
Styles for classes are specified with the . (dot) character followed by the class name in an internal or external stylesheet.
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.
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.
ID's are specified with the # (pound sign) followed by the ID name in an internal or external stylesheet.
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.
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.