WebTutorExtreme: CSS and HTML: Introduction

CSS Introduction 3:Sample HTML and CSS files

Here we will show you a very basic page and the CSS file that it uses.

First we will use the following HTML code in order to make a simple page with a heading, table and a paragraph of text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body>
<h1>Heading title of our sample page </h1>
<table border="1">
  <tr>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </td>
  </tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea commodo consequat. </p>
</body>
</html>

At this point, your page has no CSS file included and should look like this:

Now, let's add some styling to the page. First, add the following line between the <head> and </head> tags in your HTML file:

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

It will tell the browser to load a sample.css file from the same folder your HTML resides in.

Next you should create the sample.css file (a simple text editor will do just fine) and add the following lines to it:

body {
    font-family: arial;
    }
h1 {    
    background-color:#CCC;
    border: 1px solid;
    color:#39F;
    text-align: center;
    }

table {
    background-color: #F60;
    border: 1px solid #39F;
    width: 100%;
    }
td {
    border: 0px;
    text-align: center;
    }
p {
    color:#09F;
    text-indent: 20px;    
    }

In it, we have defined the elements of our sample page. As you can see, after each element we have set different properties. Now save the sample.css file and load your HTML page in a browser. It should look like this:

You can play with the colors, borders and all the other settings in order to get used to working with CSS files. They provide you with the power to create the design you want and the only limit is your imagination!

CSS Introduction 2: Structure

The syntax of a CSS file

The syntax of a CSS file consists of three parts: selector, property and a value:

selector {property: value}

The selector is usually a HTML element(tag) that you want to define. For example, you can specify in your CSS file:

body {text-align: center}

This line will state that the entire text in the <body> tag will be centered. Since CSS lines cascade, however, you can specify:

p {text-align: left}

in order to make the text surrounded by paragraph () tags aligned to the left.

If you want to specify the same parameters for multiple tags, you can simply group them:

p,h1,h2,h3 {color: red}

If you set this line, all the text in those tags will be in red.

This, however, is a very basic example of the freedom and power that CSS gives you. Usually much more than one parameter is set to each tag. To make your definitions easier to read and follow, you can write each property on a separate line:

p
{
text-align: center;
color: red;
font-family: arial;
}

Those lines will define the alignment, color and the font of the text in each one of your paragraphs.

In the creation process of your website, you may want to have multiple styles for each tag. For example, you may want to have a paragraph that is aligned to the left and colored in red and another one that is aligned to the right and colored in blue. To achieve this result, you need to use classes. For example, you can define two classes named "my_left" and "my_right":

.my_left
{
text-align: left;
color: red;
}
.my_right
{
text-align: right;
color: blue;
}

Once you have done that, in your HTML code you can specify the class property of the items that you want to be formated this way. For the purpouses of this tutorial we will display two paragraphs:

 This paragraph will be left-aligned with red color in it. 

 This paragraph will be right-aligned with blue text in it. 

In some cases, however, this level of customization will not be enough. Let's say you would like to have one of your left-aligned paragraphs to use the Arial font. In this case, you can specify an "id selector" in your CSS file:

#arial {font-family: arial}

You should then define the HTML tag in your code as follows:

 This text will be left-aligned with red text displayed with Arial font 

Those are only the very basics of CSS that you need to know in order to be able to make simple modifications to your website. CSS gives you great freedom to create the design you want. Actually, each design effect can be achieved in many different ways. It depends on you to organize and develop your website in a way that will best serve your needs.

CSS Introduction 1: CSS Introduction

The purpose of this tutorial is to show you how to use Cascading Style Sheets (CSS) to improve the design and functionality of your website.

CSS files are a powerful tool used by almost all web designers nowadays. Once implemented in your pages, a css file can save you a lot of time and work in the future. After reading this tutorial, you will have basic knowledge of how to structure and implement CSS files into your website.

Cascading Style Sheets (CSS) is a stylesheet language used for managing the look and formatting of a website.
The idea behind CSS is to separate the content of a website from its design. It includes elements like layouts, fonts and colors. This separation will save you a lot of time when you need to change the outlook of your website and keep the existing content. Once the CSS file is included in your pages, you will no longer have to edit the design of each new element you add to your pages - the CSS will take care of that.

CSS makes it easier to allow different people with no web design knowledge to add content to your website. Popular CMS systems like Joomla, Drupal or WordPress wouldn't be the same without CSS.

The CSS files provide you with a lot of flexibility. Imagine that after you add all of your content, you want to change the color of your text or its font. If you use a CSS file, you will have to change only a single line. If the styling of your elements is added directly to the HTML code, you would have to make hundreds and even thousands changes. CSS allows you to make global changes as well as unique modifications to single parts of your website.

In addition, CSS files save you bandwidth and reduce the loading time of your website. If you specify the looks of each element in your website directly, without using a CSS file, you will have to add much more tags to your code which will make the file much bigger and heavier to process.

WebTutorExtreme

Thursday, July 5, 2012

CSS Introduction 3:Sample HTML and CSS files

CSS Introduction 2: Structure

The syntax of a CSS file

CSS Introduction 1: CSS Introduction

Total Pageviews

Follow Me