CSS

Basics

The CSS syntax is made up of three parts: selector {property:value} for example:

body {
    color:black
}
  1. selector: The selector is normally the HTML element/tag you wish to define
  2. property: The property is the attribute you wish to change
  3. 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!

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License