beginners guide to .css styling

[freecrm]

CSS stands for Cascading Style Sheets and can control your website appearance.

A mixture of css and <div>'s or (divisions) is an industry recognised way to control the layout of your web page or site.

Many users will be familiar with table layouts. Many WYSIWYG (What You See Is What You Get) editing programs such as Dreamweaver will create your page using tables and these will create a reasonable layout, but tables are harder to control and much less flexible.

A typical table layout would look like this..

 
<table><!--start of table-->
<tr><!--start of row-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
</tr><!--end of row-->
<tr><!--start of row-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
</tr><!--end of row-->
</table>

For graphic websites, you can use this technique to insert graphic elements into each cell. This is commonly known as splicing.

This can also be achieved with <div>'s as well and this tutorial shows some of the basics of css styling.

Firstly, styling code can be applied directly to any element in a page

e.g.

 
<div style="border:1px solid #000000;">
Division content
</div>

This code simply places a single black line border around a box that you can insert content into

Alternatively, you can control the look of this division in the "head" section.

<style type="text/css">
.box{
border: 1px solid #000000;
}
</style>

The in the "body" section..

<div class="box">
Cell content
</div>

These two sections have the same effect. You will note that I have iven the <div> a class name. A class is something that can be used again and again in a page.

For instance, you could do the following:

<div class="box">
Cell content
</div>
<div class="box">
Cell content
</div>

This creates two <div>'s, each with the same styling.

More commonly, you can specify the style of your page, or entire site by using a style sheet: an individual file, saved in your directory, that is referenced by each page.

Your file could be saved as "style.css" and would contain something like

@charset "utf-8";
.box{
border: 1px solid #000000;
}

Then in each page you want this style applied to it, you add this in the head section:

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

This is particularly useful, because once you have associated this one css file to all your pages in the site, once the css file is changed, all pages follow those changes.

This is the first part. If anyone finds this tutorial useful, I will continue with some other simple guides.

Hope it helps.

[freecrm]

CSS DEFINITIONS

The are two ways to define division styles.

1) by class: Classes can be applied on as many occasions as you want. Note that class definitions have a dot/stop before them.

css

.style1{
border: 1px solid #000000;
}

html

<div class="style1">
Hello
</div>

2) by id: this style is only applied once to one division on each page: note that these are prefixed by # hash.

css

#style1{
border: 1px solid #000000;
}

html

<div id="style1">
Hello
</div>

For instance, you may want to style a header using an id style and a table cell using a class.

In addition to <div> styling, you can use the css to change the appearance of many other standard tags in html. Standard tag definitions are not preceded by any characters.

html{

}
body{

}
h1{


}
h2{

}
p{

}

img{

}

form{

}

and pretty much anything you want.

This gives you complete control over the way your page will look - right down to the last pixel.

Tutorial 3 to follow

[freecrm]

WHY ARE THEY CALLED CASCADING?

Cascading Styles means that a style can be applied within another style division, which carefully controls sections of your page.

Let say you have a blog, with two seperate areas: one for "most visited" and one for "latest posts". You may want both areas to look similar, but the font in the "most visited" to be in a different font style.

To do this, you might have the following html.

<h2>Most Visited</h2>
<div class="mostvisited">
<p>
posts....
</p>
</div>

<h2>Latest Posts</h2>
<div class="latestposts">
<p>
posts....
</p>
</div>

You have here defined two seperate sections, each with a class of their own, but both contain the same paragraph <p> tag, but you want these paragraphs to look different from any other paragraph on your page.

In your css, you would do this..

h2{
color: #FF0000;
}

.mostvisited, .latestposts{
border: 1px solid #000000;
}

.mostvisited p{
color: #CCCCCC;
}
.latestposts p{
color: #000000;
}

The first section purely defines the style for the heading - in red.

The second section defines the style class for two divisions in one (note the separation by a comma) and adds a black border around both.

The third section defines the <p> element, but only cascading within the mostvisited division. (grey text)

The fourth section also defines the <p> element, jsut within the latestposts division. (black text)

You can add several layers or cascades in this way, ensuring that certain parts of each section have a certain style.

In this, you have also learnt how to apply one styling rule to several divisions.

[anujan]

omg thanks
i really needed this

[tittat]

Great article,freecrm.I found this article really useful.Love your way of presentation.

[gomarc]

I hope you will continue your tutorial. It's very clear and simple to follow. Thanks!

[freecrm]

Many thanks for the comments! Seeing as it seems quite popular, here is the next installment...

BEGINNING YOUR PAGE LAYOUT.

Before I start going into some more interesting css definitions, you need to consider your page as a whole and this is where many developers fall down. A good, well considered layout makes your page look professional and well structured.

Firstly, a warning! There are many types of internet browsers, including IE (Internet Explorer), Firefox, Chrome, Opera, Safari and others - all with different updated versions. Unfortunately, this causes some problems with css because different browsers all parse (or interpret) them slightly differently! For example, many css developers all hate Internet Explorer 6! However, in this simple tutorial, it shouldn't pose too much of a problem.

Most professional page layouts have similar division definitions for the key structure.

WRAPPER.... the main envelope, in which all other divisions are placed. The wrapper is key to keeping all other elements in your page under control.

html

<html>
<body>
<div id="wrapper">

Page content

</div>
</body>
</html>

css

#wrapper{
width: 980px;
margin-left: auto;
margin-right: auto;
border: 1px solid #EEEEEE;
}

This simple example puts a container around all page content and has a faint grey line around it.

In addition, I have used a common definition to center the page. By defining a width (bear in mind some people are still on 800x600 resolution), this width doesn't alter and the margins to the left and right will automatically space themselves out to center the page.

The other alternative is to have an auto expanding page.

css

#wrapper{
width: auto;
border: 1px solid #EEEEEE;
}

Whilst this uses the maximum space on your visitors screen, it also means that your page layout changes according to their resolution - which can cause problems, especially if you have images that are a certain width!

Sticking to the first option, you can then add the other main sections of your page.

HEADERS & FOOTERS

Again, most pages have a header and a footer, between which is the main content. The header and footer both come within the main wrapper.

html

<html>
<body>
<div id="wrapper">
<div id="header">
Header content
</div>
<div id="content">
Main content
</div>
<div id="footer">
Footer content
</div>
</div>
</body>
</html>

Here we have 3 main sections. The main reason for this layout is that most header content remains the same for all pages throughout your site - as does the footer.

Because you have clearly identified each section, you could insert each part individually from one file source (see php include() function) for the same header and footer on every page you make, without having to use templates (which I hate).

Try this new css for the 3 sections...

css

#wrapper{

width: 980px;
margin-left: auto;
margin-right: auto;
border: 1px solid #EEEEEE;
}
#header{
border: 1px solid #FF0000;
}
#content{
border: 1px solid #0000CC;
}
#footer{
border: 1px solid #000000;
}

Although pretty simple, you can start to see the way the page is built up. This example shows the header box with a red border, the content box with a blue border and the footer with a black border.

Normally, borders wouldn't be applied in this way, but it shows you how things are starting to progress!

Next tutorial soon...

[ninetalesden]

Thanks! I really needed this!

[freecrm]

CSS HEIRARCHY

Its quite useful to understand that css has levels of seniority!

An independant .css page will be superceded by any css defined on each web page in the head section.

In turn, any css defined on any tag element will over-rule both the seperate css page and the css defined in the head section.

This can be extremely useful.

Lets say you define a font type and size in your seperate style.css page. The body is a very generic definition that will apply to everything that comes within (strangely) the body!

body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

Every page that you link to style.css will now have arial font at 12px size.. simple.

But what if you think that a certain part of one of your pages needs to be in a different size??

Well, there are three possible solutions.

You can either:

a) add a <div class="largefont"> to your page, and define a larger font in your style.css page.

.largefont{
font-size: 16px;
}

But what if you only want to make the font bigger on one page?

b) add a <div class="largefont"> to the body of your page as in the previous example, but define it in the head section. This will over-rule the .css linked page.

<head>
<title>whatever</title>
<style type="text/css">
.largefont{
font-size: 20px;
}

</style>
<head>

Now hang on, what if you only wanted to have the font in one part of one page on the whole site?

c) This is more rare, but you can specify the css on any tag itself. As the most senior of the three options, this will overwrite any conflicting definitions made in the .css page or in the head section.

<p style="font-size: 30px;">
Content
</p>

In this last example, the text within the <p> (paragraph) will 30px in size, regardless of any definitions in the head or linked css page.

[sbflinn]

woww.. ty
i really needed this
this will help me a bunch.