What is CSS?

Multiple Styles Will Cascade Into One

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
   1. Browser default
   2. External style sheet
   3. Internal style sheet (inside the <head> tag)
   4. Inline style (inside an HTML element)
Learn about External, Internal, and Inline Styles in section HTML Styles within AdvanceHTML.htm

CSS Syntax

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

Note: If the value is multiple words, put quotes around the value:
p,h2,table {font-family: "sans serif";color:red}

Separate multiple properties by a semicolon (;). Selectors can be grouped by separating by commas


Tag Selector [ 2 Types ]

The header "CSS Syntax" uses the existing tag <h2> as selector with style:
h6 {background:lime}


Class Selector

With the class selector you can define different styles for the same type of HTML element.
This text uses the orangy class declared in the styles for <i> element
i.orangy{color:#FF8C00}
This text uses the pinkish class declared in the styles for <i> element
i.pinkish{color:#FF00FF}
This text uses class="fonty" that can be used for any tag/element
.fonty{font-family:"Cooper Black"}

Combining two classes, <x class="fonty greenish"> where x is any tag/element
.fonty{font-family:"Cooper Black"} and .greenish{color:lime}


ID Selector

This text uses CSS defined by the id name "sample1_id" which only matches the <p> tag
<p id="sample1_id"> - CSS: p#sample1_id{...}

This text uses CSS defined by the id name "sample2_id" which matches with any tag
<x id="sample2_id"> CSS: #sample2_id{...}


Add Styles to Elements with Particular Attributes

This textbox's background color is described by the input tag's attribute type="text"
input[type="text"] {background-color: blue} 


Add Styles to Links

This is Link One
This is Link Two

CSS Background

The CSS background properties define the background effects of an element. See the upper portion of this page's source code in the body's CSS section to see some of the different background formatting possibilities.


Visit THIS LINK for a list of CSS Background Properties and possible property values

CSS Text

Letter Spacing

This text is highlighted. This text is not highlighted. But this text is. And this ones not.

This text has a letter spacing of -4px
This text has a letter-spacing:0.3cm


Line Height and Indention

This paragraph is indented at first line -> text-indent: 1cm;
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.

<p class=line_height1>
This uses CSS property line-height:90%;
This is a paragraph with a smaller line-height.

<p class=line_height2>
This uses CSS property line-height:200%
This is a paragraph with a bigger line-height.


Controlling the letters in a text (text-transform:uppercase;)

Controlling the letters in a text (text-transform:lowercase;)

Controlling the letters in a texth (text-transform:capitalize;)


White spaces increased by CSS property word-spacing:30px

white-space: nowrap; the line is not wrapped
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Visit THIS LINK for a list of CSS Text Properties and possible property values

CSS Fonts

The CSS font properties define the font in text. They allow you to change the font family, boldness, size, and the style of a text. Here is a sample list of CSS Font properties with values:

Visit THIS LINK for a list of CSS Font Properties and possible property values

CSS Border

The CSS border properties define the borders around an element. They allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Visit THIS LINK for a list of CSS Border Properties and possible property values

CSS Outline

The CSS outline properties is used to draw a line around an element, outside the border edge. An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". The CSS outline properties sets the outlines around elements. You can specify the style, color, and width of the outline.
Note: Outlines do not take up space, and they do not have to be rectangular.

Visit THIS LINK for a list of CSS Outline Properties and possible property values

CSS Margin

The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!

Visit THIS LINK for a list of CSS Margin Properties and possible property values

CSS Padding

The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.

Visit THIS LINK for a list of CSS Padding Properties and possible property values

CSS List

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.

Visit THIS LINK for a list of CSS List Properties and possible property values

CSS Table

The CSS table properties allow you to set the layout of a table.

Visit THIS LINK for a list of CSS Table Properties and possible property values