What is CSS, you ask? CSS is the acronyn for Cascading Style Sheet. Style sheets instruct the browser on how the elements such as fonts, colors, sizes, colors should be displayed on a page. You can modify almost any aspect of your blog's appearance just by changing the stylesheet in your template. There are three parts in CSS:
- Selector. A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table>.
- Property. A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border.
- Value. Values are assigned to properties. For example, color property can have value either "red" or #F1F1F1
The syntax (structure) for CSS is:
If you want to convert all text within your paragraphs to purple, you could code:
To add more than one style at a time to the same selector you can use code like this:
If you want to add more than one property, just add a semi-colon to the end of all the selectors (see the semi-colon up there after the six character color code and the font name?).
Types of Stylesheets
There are three types of stylesheets:
1) Internal stylesheets go inside a page’s header, after the <head> tag and before the </head> tag.
Internal stylesheets must be surrounded by these HTML tags to tell the browser where it starts and stops:
The following example shows how to set a background color with an internal stylesheet:
2) External stylesheets are saved as style.css files and linked to from a page’s header as follows:
<link rel="stylesheet" type="text/css" href="style.css">
3) Inline styles are included in specific element tags as follows (in a way they defeat the purpose of using CSS in the first place):
<p style=”color: #bf932e;”>This text would be gold.</p>
If you are wondering which method of inserting CSS is best, it depends on what you want to do. If you have only one file to style, then Internal will work fine. If you are planning on styling multiple files, then the external file method is the way to go.
Modify font size and color:
font-family: arial, tahoma;
Remove underline from links, change link color:
Add underline on links when mouse makes contact with them:
Of course, there are a lot more things you can do with CSS. Start with the CSS tips here to add pizazz to your blog. Once you have learned the basics, you might want to try using Divs and Classes to apply styles just to certain elements or areas of your blog pages.