how-to-apply-css-code-to-your-website-tutorial
Jan

24

2010

How To Apply CSS Code To Your Website

CSS / Tips & Tutorials  Posted by / 0 comments

If you are new to using Cascading Style Sheets, also known as CSS then here are a few basic tips to help you get started.

This tutorial will explain the different ways that CSS code can be applied to your website. There are a few different ways to do this, we’ll begin with an example of how to apply CSS code using internal styles on your website. In order to embed the CSS directly on your page it should look something like this:

body{
background-color: #FFFFFF;
}

.mycustomlink:hover {
font-family: Verdana, Tahoma, Arial, Sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #111621;
}

.mycustomlink {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
color: #111621;
}

In order to apply this particular style shown in the example above to a link on your page simply use the following code

My Link

You can also call external CSS files to be used in your HTML website. This can save a lot of time and is especially useful if you want to change the appearance of certain elements for several different pages all at once. Why bother updating code on multiple pages when you can simply edit one CSS file.

To include an external CSS file on your site your code should appear something like this

<html>
<head>
<title>Using An External CSS File On Your Website</title>
<link rel="stylesheet" type="text/css" href="mycustomstyles.css">

Of course you can name the CSS file whatever you’d like, it doesn’t really matter what you name it as long as it matches the filename you are calling.

Finally, you can also use in-line CSS code to define certain elements on your page. In this example we’ll look at how you can customize text on your page

<font style: bold; font-size: 10; color: white;>my text here</font>

Now that you know how CSS can be applied to your web pages the fun really begins! Once you realize how many different things can be done with CSS you’ll want to experiment more and more!