Today is May 18th, 2012.   

CSS Tutorial

Overview

Back to top
CSS or Cascading Style Sheets, lets you control and layout and design of webpages all at once. It makes website development much easier and html coding much inderstandable. It provides efficiency as well as readability to the websites underlying codes. And most of CSS is about organizing the attributes of HTML’s various tags. This tutorial will help you understand what CSS is all about and how to use CSS on your WordPress website.

Basics

WordPress uses CSS so that it would be easy to revise a certain look and feel of your web page. Attributes of various HTML tags are stored in what is called the stylesheet which is a file in itself. The filename is Stylesheet.css. But before getting into that let’s understand the basics first.

There are three ways were you can organize the attributes of an HTML tag.

  • In the tag itself
  • On the web page
  • On a CSS style sheet

In the succeeding sections of this tutorial you will learn how to control the layout of a web page from each of these three methods mentioned.

Inline Styling

If you took the HTML tutorial of this website then most likely you have encountered using and manipulating attributes of a HTML tag. An example is the DIV tag. To give a background color to your div tag you can write it like this:



<div style="background: blue; color:white;" >
hello world
</div>

This script simply puts a blue background around the div area. The fonts will then take the color white.And you can put more attributes together with their values inside the style attribute. This method is also known as inline styling. But this method is not the most efficient at all so use this only when you face certain restrictions with the other methods. A website would most likely have similar layouts all throughout its pages. So if you have ten pages and have used inlne styling then you have to go through all the necessay tags in order to change their background and foreground colors.

Internal Stylesheet

This type of styling means that the stylesheet is declared at the top of the web page. Using the same example as the above you would code it like this:


<html>
<head>
<style type="text/css">
div { background: blue; color:white; }
</style>
</head>
<body>
<div>
hello world
</div>

</body>
</html>


Now this method is more efficient than the inline styling because if you have a lot of tags on your web page, then you only have to look at the style type tag on the header section of your web page.

The styling on the div tag will apply to all the div tag used on the web page. But what if you just would like to select certain elements to apply certain styles? That is possible too using the CSS selectors: CSS Id and Class.

CSS Id. This type of selector associates and applies a style to a single HTML element that is selected. To select the HTML element, just use the id attribute as shown below:


<html>
<head>
<style type="text/css">
    #diva { background: blue; color:white; }
</style>
</head>
<body>
<div id="diva">
hello world
</div>

<div>
good bye
</div>

</body>
</html>


As you can see from this example above, only the div tag with the id=”diva” get the styling but with the second div the styling is not applied at all.

CSS Class. This type of selector is similar to the example provide before the CSS Id section. A Class selector is used to apply styling to a group of elements. An example is given below:


<html>
<head>
<style type="text/css">
    div.cool { background: blue; color:white; }
</style>
</head>
<body>
<div class="cool">
hello world
</div>

<div>
good bye
</div>

</body>
</html>


With this selector, it’s good practice to put the element tag before the class name such that div.cool { background: blue; color:white; }. Where “div” is the element and “cool” is the class name. The two are separated by a period. This makes the CSS declaration readable which basically implies that this “cool” class is being used by div tags.

External Stylesheets

Now we are at the most crucial part of this tutorial. Using external style sheets. This basically means that you will need to create a file called style.css and put all your CSS styling here. You can actually name the file other names as long as the extension is .css. Then on your web page you need to include this stylesheet you have created. Below is an example code, starting from the header tag of your web page, on how to include it.


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


From here you can then put your style i.e.



a {
color:#fc0;
text-decoration:none;
}
a:hover {
color:#fff;
}
a img {
border: none;
}

Meaning there’s no special tags that would start an end a stylesheet similar to a HTML page.

Subscribe to RSS feed

Comments are closed.