Published on: 03 August, 2013

What is CSS?

Posted by andy | 1365 views 0 likes 0 favourites 0 comments
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.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.