CSS Part 2: Common Attributes

**Lop** · 09-18-2008, 06:57 PM

CSS Tutorial
Chapter 2: Basic Web Application design using CSS

There are two basic forms of writing CSS files. They are

Internal CSS
External CSS

1. Internal CSS
In internal CSS, your CSS code is tied with the same HTML sheet. It means that you write your style sheet code within the same CSS. In the examples that we saw in the previous chapters, we used internal CSS completely. There are basically two ways to write an internal CSS.

We can either put our CSS tags within <style type="text/css"></style> tag
We can embed the CSS within the attribute style of a HTML tag like <h3 style="color:red; text-decoration:none">I am special H3 tag</h3>

Designing CSS using internal CSS is good enough for beginners who are learning CSS. But to be a professional web developer, this is not a good technique. For instance, if you think of repeating the same <style> tag for every HTML page you write, don't you think it is redundant code and unnecessary replication. And worse still if you want to change the style of a button in a particular web page, you will end up modifying all the HTML pages. Imagine how much effort it would require.

So you may ask, that is there any way to write all the common style properties separately and make all the other HTML pages link to that file? The answers is yes.

2. External CSS
You can write all your style sheet related attributes in a separate file which is generally stored with the extension, .css. After doing this, we can link all the HTML pages to this CSS file. Let us see this through an example.

Create a new file called myStyles.css and add the following code to it

HTML Code:

body
{
    background-color: blue;
}

h2 {
       color: lightblue;
       border: thin black;
       font-family: arial;
       text-align: center;
}

Now create a new file called index.html in the same directory as in myStyles.css with the following content
Code:

HTML Code:

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

</head>

<body>
    <h2>Welcome to CSS tutorials</h2>
</body>
</html>

It should look like this:

In the above code, the line <link rel="stylesheet" type="text/css" href="myStyle.css" /> refers to the style sheet myStyle.css and presents it to the front end. Now any HTML file can refer to myStyle.css and reproduce the same design. Also if you ever need to change any style attribute, all you need to do is edit the myStyle.css and all the files that refer to it will now show you the change.

As you can see, we can set a lot of attributes for each element using CSS. In the above example, we have set the border, color, text alignment for the H2 tag. Other values for text-align can include, left , right also.

So as a web designer, you may now design your web application layout as given below

mainStyle.css
index.html

Folder Contact

--> contactStyle.css
--> contact.html
--> contactManagement.html

Folder Products

--> productStyle.css
--> productCatalog.html
--> productCart.aspx

As you can see from the structure above, the mainStyle.css can contain all the CSS attributes that are generic to the entire web application. Inside the folder Contact, we have web pages related to contacts. So if we need some special styling to be done in these files, we can override the parent settings or define new settings in a new CSS file, contactStyle.css. Now our HTML page, say contact.html can contain link to both the CSS files as follows

HTML Code:

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

Now that we have seen web application design using CSS, we now move on to our third tutorial, CSS Selectors.

**John** · 09-18-2008, 07:21 PM

Thanks for sharing this Lop. I am looking forward to seeing some more.

**morefood2001** · 09-19-2008, 12:14 PM

Nice tutorial! I learned some new terminology

**Dren** · 10-23-2008, 12:11 PM

Good tutorial, +rep

**Brandon W** · 10-25-2008, 08:04 PM

Nice tutorial mate. You planning on writing anymore after Part III.

**tecktalk** · 11-28-2008, 07:07 AM

Yes nice one surely.. I am just new to CSS and this much information just awesome stuff for me.. Liked it..

_____________________
corporate awards retin-a