Basics
The CSS syntax is made up of three parts: selector {property:value} for example:
body {
color:black
}
- selector: The selector is normally the HTML element/tag you wish to define
- property: The property is the attribute you wish to change
- value: The value of the property
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".
Id Selector
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".
<p id="xx"> ... </p>
#xx
{
text-align:center;
color:red
}
The style rule below will match a <span> element that has an id with a value of "xx":
span#xx
{
text-align:center;
color:red
}
Class Selector
The class selector is used to specify a style for a group of elements and is defined with a "."
The following with be applied with to all HTML elements with class="center":
.center {text-align:center;}
The following will apply to all p elements with class="center":
p.center {text-align:center;}
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" />
Make input readonly
We can not make an input element readonly or disabled using css!