Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS Part 2: Common Attributes

align

  • Please log in to reply
6 replies to this topic

#1 Lop

Lop

    Speaks fluent binary

  • Just Joined
  • PipPipPipPipPipPipPip
  • 1112 posts

Posted 18 September 2008 - 05: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

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>
<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:
Posted Image

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

<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.
  • 3

#2 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 18 September 2008 - 06:21 PM

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

#3 morefood2001

morefood2001

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1011 posts

Posted 19 September 2008 - 11:14 AM

Nice tutorial! I learned some new terminology :)
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#4 Dren

Dren

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 232 posts

Posted 23 October 2008 - 11:11 AM

Good tutorial, +rep :)
  • 0

#5 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 25 October 2008 - 07:04 PM

Nice tutorial mate. You planning on writing anymore after Part III.
  • 0
I've returned...

#6 tecktalk

tecktalk

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 155 posts

Posted 28 November 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
  • 0

#7 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 30 November 2008 - 01:35 PM

Check out W3Schools Online Web Tutorials if you need any CSS help.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download