Basics and Selectors
The CSS syntax is made up of three parts: a selector, a property and a value: selector {property:value} for example: body {color:black}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces: p {text-align:center;color:red;font-family:"sans serif"}. When the value is more than one word then we put it in "".
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class.
For example: .center {text-align:center} applies to all HTML elements with class="center".
CSS id selector
#col {color:blue} will match the element that has an id attribute with a value of "col".
The style rule below will match the p element that has an id with a value of "xx":
p#xx
{
text-align:center;
color:red
}
Add Styles to Elements with Particular Attributes
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of "text":
input[type="text"] {background-color:blue}
Internal Style Sheet
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Inline Styles
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Calculating total width/height
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Check Browsers Compatibilities as well.
CSS Grouping
h1,h2,h3,h4,h5,h6
{
color:green
}
Class
It is an extension to the css code and is a selector. With the class selector you can define different styles for the same type of HTML element.
p.first{ color: blue; }
p.second{ color: red; }
And in html:
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
<p class="first second">Second paragraph</p>
Comment
You can comment using /* */
Adding css file
A css file can be added to the page using the link html element:
<link href="css/main.css" rel="stylesheet" type="text/css" />
