Click here to Skip to main content
13,086,120 members (82,767 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


8 bookmarked
Posted 2 Apr 2014

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

, 2 Apr 2014
Rate this:
Please Sign up or sign in to vote.
Beautification of the web


This article is continuation of the HTML5/CSS3 Contest. You can read the part 1

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


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.
eg :
    <a href="#">CodProject</a>
        <li><a href="#"> Style can be applied at any levl</a></li>
/*style.css */
  • 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.
eg :
        <li><a href="#" class="MenuItems"> Home</a>
        <li><a href="#" class="MenuItems"> About us </a>
        <li><a href="#" class="MenuItems"> Contact </a>
in styles. css
.MenuItms { /* . followed by the class Name
  • 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
  • Attribute selectors : based on the attribute we can style our web pages. attribute selector accepts [attribute=valueToMatch]
Rule eg
1 X[title]
a[title]{ color:red;} 
select the anchor tags that have a title attribute
2 elem[attributeName="ValueToMatch"]
Select the all image tags, which having alt attribute with value of "txt"


elemt[attributeName^="ValueTomatch"]<span style="white-space: pre;" class="Apple-tab-span"> </span>

Starts with selector

a[href^="http"] { 
margin:5px; padding:2px; 
Get all the anchor tag with attribute starts with particular value.


Ends with selector

img[src$=".gif"]{border:1px solid red;}     
Get all images, with source attribute ends with ".gif"

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


Sl.No CSS rules Explanation example
1 font-family font-family property should have several font names. If the browser does not support the first font, it tries the next font.
p{font-family:"Times New Roman", Times, serif;} 
2 font-style font style is used to give extra styles, such as Normal or Italic
3 font-size specifies the font size
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 */   
4 font-weight the weight or boldness of the font
font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder
5 background-color property sets the background color of an element
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
6 background-image sets one or several background images for an element.
background-image: nonebackground-image: url(
7 background-repeat background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all.
background-repeat: repeat-x     
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat
8 background-position property sets the initial position
  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 :
  4. Minify the CSS (remove extra spaces) or you can use online minifier
  5. try to make your selectors shorter, it will improve readability


  1. Mozilla Developer network
  2. How CSS Works
  3. CSS style Guides
  4. google CSS style guides

Points of Interest

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


Version 1.0 - Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ravi Gadag
Software Developer Symphony Teleca
India India
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionYou missed something Pin
Kornfeld Eliyahu Peter3-Apr-14 19:11
professionalKornfeld Eliyahu Peter3-Apr-14 19:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170813.1 | Last Updated 2 Apr 2014
Article Copyright 2014 by Ravi Gadag
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid