Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

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

4.29/5 (3 votes)
2 Apr 2014CPOL4 min read 6.9K  
Beautification of the web

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.
eg :
CSS
<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.
eg :
CSS
 <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
Eg:
HTML
<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]
Rule eg
1 X[title]
CSS
a[title]{ color:red;} 
select the anchor tags that have a title attribute
2 elem[attributeName="ValueToMatch"]
CSS
img[alt="txt"]{color:yellow;} 
Select the all image tags, which having alt attribute with value of "txt"

3

elemt[attributeName^="ValueTomatch"]

Starts with selector

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

elment[attributeName$="ValueToMatch"]

Ends with selector

CSS
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


tr>>

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.
CSS
p{font-family:"Times New Roman", Times, serif;} 
2 font-style font style is used to give extra styles, such as Normal or Italic
CSS
#p1{font-style:normal} 
#p2{font-style:italic} 
3 font-size specifies the font size
CSS
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
CSS
font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder
5 background-color property sets the background color of an element
CSS
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.
MC++
background-image: nonebackground-image: url(http://www.example.com/images/bck.png)
7 background-repeat background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all.
CSS
background-repeat: repeat-x     
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat
8 background-position property sets the initial position
CSS
#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

License

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