How to Customize CSS Templates
CSS, or Cascading Style Sheets, is a special way to set styles in a web page. CSS templates can be used to set a single style sitewide. Many templates are available that provide a starting point on which to build a website. Many of these templates are very nice, but they may not be exactly what you want for your site. You may want to start with get a template and then customize it to make it fit your personal needs and style.
Other People Are Reading
Instructions
-
-
1
Download a CSS template. Many free CSS templates are available online for download (see Additional Resources). With the template will usually come a sample index.html. Look at this sample as it will help you to get started. It will likely define some <div> elements with some class or id attributes. Look for <div class="main" id="main">. These tags will be referred to in the CSS.
-
2
Install the template. If you are starting a new web page or website, use the index.html that came with the template. If you are installing the template to an existing site, then you need to change or add one line of code to the site. You should find a <link> element that looks something like this:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
That line should be at the top of your header, above the </head>. <link> is an element that tells the page that it is linking to an external file. The rel attribute specifies the relation to the linked file. This attribute is not fully supported by all browsers. The type attribute tells the browser what type of document it is linking to. The href attribute states where the file is located. The media attribute tells the browser that this should apply specifically to the display types listed. You can use this to set one style sheet for the screen display and another for print. The rel and media attributes are both optional. -
-
3
Learn some basic CSS and HTML. You do not need to be a CSS or HTML expert but having some basic knowledge helps. A tutorial is beyond the scope of this article but the main things you need to know are syntax.
In HTML you have elements. All elements are within angle brackets, such as <div>. Some elements must be closed with a closing tag (i.e., </div>). Within the elements are attributes that tell the browser information about the element. <div class="main"> is a div element with a class name of "main."
In CSS you can reference classes, ids or elements. If you have a style set for one, any others with the same name inherit that same style. After the reference, are styles set between curly brackets ({ and }). Each style is a style property followed by a colon and then what the property should be set at. For instance,
b {font-color:red;}
means that all <b> elements should have red font. If you want to reference a class, instead of every element of a type, use a period (.) followed by the class name:
.red {font-color:red;}
Ids are special. Each id on a page must have a unique name. If you want to refer to an id attribute, use a hash (#):
#main {font-color:red;}
You can also stack references to be very specific:
#main b.red {font-color:red;}
That code says that if there is an id with the name "main" with a <b> tag within it that has a class name of "red" then it should have a red font. Properties are separated by semi-colons (;).
b.red {font-color:red;font-weight:bold;}
White space is ignored so the above is often displayed as:
b.red {
font-color:red;
font-weight:bold;
} -
4
Now that you know a little about CSS and HTML, you should be able to do some editing. Make a copy of your template before you start and save it so that when you goof you have a place for a fresh start. You will make mistakes; that is the best way to learn. Play around with it and see what happens. You will learn more by making mistakes and seeing how it effects the page than if you get it right every time. Sometimes mistakes do really interesting things.
Look at the HTML code for the class, id or element you want to change. Find that item in the style sheet and you will see one or more properties that you can change. Depending on what element you want to affect, you might change the font, background, line or some other property. You can look at a CSS reference, such as DevGuru (see Additional Resources) to get an idea of all the properties you can change.
-
1
