Published on: 03 August, 2013

What is CSS?

Tumblr Digg Google Plus

CSS stands for Cascading Style Sheet and is used to define of how the html elements displayed. CSS style sheet is usually placed in an external file or can be embedded directly to a html page or html tag.

It is recommended that you place the css file externally for better design purposes and easy maintenance. Having combine all of html tags with css styles together will be hard to maintain.

What is the Css Syntax?

Here is the basic syntax of css that you will need to know:

Symbol Description
{ } Open and close curly bracket
; semicolon symbol
# hash symbol (represent ID)
. dot symbol (represent class name)
: colon symbol (entered after defining the property)

Sample CSS syntax:

 
body{
     font-size:14px;
}

p{
     font-size:12px;
}

.box{
     color:#ffffff;
}

.title{
     color:#000000;
}

#header{
      padding:20px;
}

#main
      padding:10px;
}

If the css style is going to have the same value or properties, you can combine them together like below:

body, p{
     font-size:14px;
}

.box, .title{
     color:#ffffff;
}

#header, #main{
      padding:10px;
}

Where to place it?

You can place the css style sheet externally to a file or you can embedded to the page.

Below is the example on how to include the css file externally.

css external link file

Here is how you embed the css style directly to your html page.

css embedded to html page

Note: Position or Location of External CSS File / Embedded style sheet

Although there is no restriction to place the css file or embedded style sheet, but it is recommended you place it in the header tag, this is because the html is read and rendered by browsers from the top to the bottom position.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.