Beginner's Guide to HTML5/CSS3 - Styling Your First Web Page

Introduction

This article is continuation of the HTML5/CSS3 Contest. You can read the part 1 http://www.codeproject.com/Articles/751542/Beginners-Guide-to-HTML-CSS-Building-the-Basics

Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts

What is Cascading in CSS ?

The style is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen. Three main sources of style information form a cascade

1. The browser's default styles for the markup language.
2. Styles specified by a user who is reading the document.
3. The styles linked to the document by its author. These can be specified in three places:

• In an external file.
• In a definition at the beginning of the document
• On a specific element in the body of the document

Why CSS ?

1. CSS helps you to keep the information content of a document separate from the details of how to display it
2. You keep the style separate from the content so that you can:
• Avoid duplication
• Make maintenance easier
• Use the same content with different styles for different purposes

Now, we know what CSS and how it's useful for web application, then let's get started for the CSS Basics.

Setting up a CSS document

CSS documents can be created by using any Text editor, with the file extension of ".css", Let's create "Styles.css" for this article

Basics of CSS

CSS Declaration. : As I mentioned above, each rule or declaration will be mentioned in CSS document. A property and value pair is called a declaration. The declaration is also split into two parts, separated by a colon : property and value, below is the example of declaration of CSS rule

below is the basic example for how to use CSS,

<h1>This is heading with Red color </h1> 

CSS style declarion in Styles.css

h1{
    color:red;
} 

CSS Selectors

selectors are patterns used to select the element(s) you want to style.

• Basic Selectors

• Type selectors
• Class selectors
• ID selectors
• Universal selectors
• Attribute selectors

Let's visit each one of the selector type

• Type Selector : What if you want to target all elements on a page, according to their type, for eg: you want to apply style rule for all anchor (<a>) tag with blue color. Type selector will apply the rule for all element with specified type.

<div> 
    <a href="#">CodProject</a>
    <ul>
        <li><a href="#"> Style can be applied at any levl</a></li>
    </ul>
</div> 
/*style.css */
a{
    color:blue;
    text-decoration:underline;
} 

• Class Selector : Classes are used for re usability. what if you want to declare a generic rule for all common elements with having same class name. Class selector is declared by using "." before the class name.

 <div>
    <ul>
        <li><a href="#" class="MenuItems"> Home</a>
        </li>
        <li><a href="#" class="MenuItems"> About us </a>
        </li>
        <li><a href="#" class="MenuItems"> Contact </a>
        </li>
    </ul>
</div>
in styles. css
.MenuItms { /* . followed by the class Name
    color:red;
    text-decoration:underline;
} 

• ID Selectors : ID Selectors helps to apply style rule for particular element with having the ID. Id selectors are used to apply unique rules. ID Selectors declared with "#" before the element ID

<p id="para1">
    text for styling the paragraph tags. ID selectors
</p> 
#para1{
        font-size:25pt;
        font-weight:bold; 
} 

• Attribute selectors : based on the attribute we can style our web pages. attribute selector accepts [attribute=valueToMatch]

a[title]{ color:red;} 

img[alt="txt"]{color:yellow;} 

a[href^="http"] { 
margin:5px; padding:2px; 
} 

img[src$=".gif"]{border:1px solid red;}     

Backgrounds and Text

In CSS, we can do lot of styles for text, there are many CSS rules are there, let's list out them here

tr>>

p{font-family:"Times New Roman", Times, serif;} 

#p1{font-style:normal} 
#p2{font-style:italic} 

font-size: xx-small  /* absolute<absolute-size> values */
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large

font-size: larger    /* relative<relative-size> values */
font-size: smaller

font-size: 12px      /* lentgh<length> values */
font-size: 0.8em

font-size: 80%       /* <percentage> percentage values */   

font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

background-color: red
background-color: rgb(255, 255, 128)
background-color: hsla(50, 33%, 25%, 0.75)
background-color: currentColor
background-color: transparent
background-color: #bbff00

background-image: nonebackground-image: url(http://www.example.com/images/bck.png)

background-repeat: repeat-x     
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat

#someDiv{
  background-image: url("logo.png");
  background-position: top;
} 

CSS style guides for effective use

1. Use ID selectors : ID are faster compared to class and other selctors
2. Use CSS Sprites : CSS Sprites are really useful to reduce the number of requests for the server. Combine your background images into a single image and use the CSS background-image and background-position properties to display the required image
3. Usage of CSS Resets : Browsers ship with different default styles : http://meyerweb.com/eric/tools/css/reset/
4. Minify the CSS (remove extra spaces) or you can use online minifier
5. try to make your selectors shorter, it will improve readability

References

1. Mozilla Developer network https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
2. How CSS Works http://www.slideshare.net/webdevninja/how-css-works
3. CSS style Guides http://css-tricks.com/css-style-guides/
4. google CSS style guides http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

Points of Interest

While writing article, i learnt about CSS Resets and how CSS works in the browser

History

Version 1.0 - Initial version