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 1: Introduction

hello world

  • Please log in to reply
3 replies to this topic

#1 Lop

Lop

    Speaks fluent binary

  • Just Joined
  • PipPipPipPipPipPipPip
  • 1112 posts

Posted 14 September 2008 - 07:55 PM

CSS Tutorial
Chapter 1: Introduction to Cascading Style Sheets

CSS is a form of style sheet language which is used to apply styles to HTML pages. It provides the capability to define styles like font, background, layout etc for various elements in a HTML document's presentation. One of the major advantages of CSS is that it allows for tableless web page design.

CSS is a standard used for Web markup. The standard is set and maintained accross different versions by W3C, World Wide Web Consortium. The advantages of using Cascading Style Sheets for your webpages include

Advantages

  • Enforces a consistent look and feel to your entire web application
  • Any change to your application's look, you just need to change the corresponding attribute in just one file (let's say a button's background) at one place, and Lo!, all the webpages now show up with the new color
  • Good programming practice. By splitting design attributes from the elements (which usually have javascript to execute some business logic) you achieve good programming style.
  • Wide array of style attributes


However, CSS is not without its disadvantages, some of which include

Disadvantages

  • Browser incompatibilities. There are certain attributes which are exclusively supported only by Firefox, and there are some other which are supported only by IE.

However, it will be a good idea to check for the corresponding attribute incompatibility if you are doubtful.
Enough said, let us start with our first Hello World! CSS.

Create a new html file with the following content Code:

<html>

<head>

<style type="text/css">

body
{
background-color: lightblue;
}

h3
{
text-decoration: underline;
}

</style>

<body>
<h3>Hello World!</h3>
<body>
</html>
The output looks like the following:
Posted Image


We write our Style attributes withing tag. The format of a writing a CSS attribute is given below


selector
{
property1: value1;
property2: value2;
...
propertyN: valueN;
}
where a selector can be any HTML tag on which we want to apply style attributes to. In the above example, we have applied style to body tag. The selector here is "body". And then we set the property, background-color to lightblue.

After the body tag, we have applied style to heading 3, setting the attribute text-decoration to underline. There is also another method to apply style to HTML. Every HTML tag has an attribute style which can link to a style. Now imagine a scenario in which you have several heading3 tags. You want one particular H3 tag not to have its text underlined and want its font color to be maroon. We can override the style setting specified using the <style> </style> as follows

<h3 style="color:red; text-decoration:none">I am special H3 tag</h3>
The resulting HTML page would look like this:
Posted Image

Please note that the above method is not considered very good practice in cases you don't need specialization of design. If you have a common design for all elements, it is always recommended to put them separately in within <style> tags. Now that we have seen how to develop and work with CSS, we now proceed to see Page Design using CSS
  • 2

#2 John

John

    CC Mentor

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

Posted 14 September 2008 - 08:15 PM

Nice tutorial Lop. I see you titled it "Part 1." Is it safe to assume you intend on writing more tutorials?
  • 0

#3 Lop

Lop

    Speaks fluent binary

  • Just Joined
  • PipPipPipPipPipPipPip
  • 1112 posts

Posted 14 September 2008 - 08:16 PM

I do intend on writing some more tutorials, but I am unsure on what.
  • 0

#4 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 15 September 2008 - 02:24 AM

Excellent tutorial. I'm sure there's tons more that you can talk about with regards to CSS. :D

Only one disadvantage for CSS?
  • 0





Also tagged with one or more of these keywords: hello world

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