SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Embedding CSS Into An HTML Document

Embedding CSS Into An HTML Document

Jordan Tutorials Feb 27, 2007

Embedding CSS Into An HTML DocumentBefore I begin, I assume you all know basic HTML, and have a server to test your files on.

Some of you might be wondering what CSS actually is. CSS, or Cascading Style Sheets is a simple language which is used for styling your webpages, hence the "Style Sheets" CSS is very useful and can save a lot of time and effort.

For this tutorial, I will be using a basic CSS document called "style.css" The document as follows:

body
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
background-color: inherit;
}

a:link, a:active, a:visited
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
background-color: inherit;
text-decoration: none;
}

a:hover
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: inherit;
text-decoration: underline;
}

I will firstly run through what the code does. the "body" section, which is closed in via braces only applies to the HTML documents body. In this case, we are using CSS to change the documents Font, Font size, Font color.

The second section "a:link, a:active, a:visited" is used to change the way links are displayed in an HTML document. What we have done here, is changed the links Font, Font size, Font color.

The last section "a:hover" is used to change the way links are displayed when you roll your mouse over them in an HTML document. What we have done here, is added the "underline" decoration, as well as change the links colour.

But how to use these in an HTML document? Simple! There are two ways to use CSS within an HTML document. The first method involves a tag within the tag.

<link href="/img_articles/11106/style.css" rel="stylesheet" type="text/css">

Close the tag with "/>" if using XHTML.

To sum that tag up, the "href" attribute points at the CSS document we want to use for the HTML document. The "rel" attribute tells the browser that it is a stylesheet, and the "type" attribute tells the browser what format the document is in.

The second method involves another tag in the tag, but is slightly different than the last.

<style type="text/css">
<!--

body
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
background-color: inherit;
}

a:link, a:active, a:visited
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
background-color: inherit;
text-decoration: none;
}

a:hover
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: inherit;
text-decoration: underline;
}

-->
</style>

All we have done here is placed a "" tag into the tag of an HTML document. followed by the "type" attribute, which tells the browser what format the following code will be in.

Following this, we have our CSS code. You may be wondering why I have placed a comment around all the CSS code. The reason I have done this, is because some older browsers might not display the code properly, so we are mearly escaping the possibility of this happening by commenting it. (In other words, making it invisible)

I hope this tutorial has enlightened you on how to use CSS within your webpages.

subscribe to newsletter