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.
Here is how you embed the css style directly to your 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.