IMG-LOGO

What is CSS?

andy - 03 Aug, 2013 4095 Views 0 Comment

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 Blogs

How to style pagination links with CSS?

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.

Optimizing your site for printing

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 ...

Related Tutorials

CSS Z-Index

z-index is a css property that allows to position an object/element in front/behind of other elements.

CSS Colors

Learn how you can can style text in different colors.