CSS

-----------------------------------------------------------------------------------------------------------------------------------------
What is CSS?
-----------------------------------------------------------------------------------------------------------------------------------------
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
At this point you have some choices of how to use the CSS, either internally or externally.
-----------------------------------------------------------------------------------------------------------------------------------------
CSS Syntax
-----------------------------------------------------------------------------------------------------------------------------------------
A CSS rule set consists of a selector and a declaration block:
h1
{color : blue;}
Selector Property Value
The declaration block contains one or more declarations separated by semicolons. Each selector
can have multiple properties, and each property within that selector can have independent values.

The property and value are separated with a colon and contained within curly brackets.
h1 {color:blue; font-size:20px;}

Multiple values within a property are separated by commas, and if an individual value contains more
than one word you surround it with quotation marks.
#box {
width:1020px;
height:800px;
padding:20px, 20px, 20px, 20px;
}
-----------------------------------------------------------------------------------------------------------------------------------------
CSS Comments
-----------------------------------------------------------------------------------------------------------------------------------------
Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers. A CSS comment starts with /* and ends with /.

Comments can also span multiple lines:
h1 {color:blue; font-size:12px;} /* This text is in blue color */
-----------------------------------------------------------------------------------------------------------------------------------------
The id Selector
-----------------------------------------------------------------------------------------------------------------------------------------
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find
a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":
#textbox {color:red; text-align:center;}
-----------------------------------------------------------------------------------------------------------------------------------------
The class Selector
-----------------------------------------------------------------------------------------------------------------------------------------
The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the name of the class:
In the example below, all HTML elements with class="center" will be center-aligned:
.textbox {color:red; text-align:center;}

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
p.textbox {text-align:center; color:red;}

-----------------------------------------------------------------------------------------------------------------------------------------
Grouping Selectors
-----------------------------------------------------------------------------------------------------------------------------------------
In style sheets there are often elements with the same style:
h1{text-align:center; color:red;}
h2{text-align:center; color:red;}
p{text-align:center; color:red;}
To minimize the code, you can group selectors. To group selectors, separate each selector with a
comma. In the example below we have grouped the selectors from the code above:
h1,h2,p {text-align:center; color:red;}

-----------------------------------------------------------------------------------------------------------------Three Ways to insert CSS Styles

External style sheet, Internal style sheet, and Inline style

-----------------------------------------------------------------------------------------------------------------------------------------
External Style Sheet
-----------------------------------------------------------------------------------------------------------------------------------------
An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
-----------------------------------------------------------------------------------------------------------------------------------------
Internal Style Sheet
-----------------------------------------------------------------------------------------------------------------------------------------
An internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>
-----------------------------------------------------------------------------------------------------------------------------------------
Inline Style Sheet
-----------------------------------------------------------------------------------------------------------------------------------------
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
-----------------------------------------------------------------------------------------------------------------------------------------
Inheritance
-----------------------------------------------------------------------------------------------------------------------------------------
When you nest one element inside another, the nested element will inherit the properties assigned to
the containing element. Unless you modify the inner elements values independently.

For example, a font declared in the body will be inherited by all text in the file no matter the containing
element, unless you declare another.
body {font-family: Verdana, serif;}
Now all text within the (X)HTML file will be set to Verdana.

If you wanted to style h1 and paragraph with different fonts.

h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

Now all <h1> tags within the file will be set to Georgia and all
<p> tags are set to Tahoma.
-----------------------------------------------------------------------------------------------------------------------------------------
Background Color
----------------------------------------------------------------------------------------------------------------------------------------
The background-color is the most simple of the background properties.
You set a color using the background-color property, and the background is filled with that color.
body {background-color:#caebff;}
-----------------------------------------------------------------------------------------------------------------------------------------
Background Image
----------------------------------------------------------------------------------------------------------------------------------------
The background-image property specifies an image to use as the background of an element.
body {background-image:url(images/blue_circle.png);}
----------------------------------------------------------------------------------------------------------------------------------------
Background Image - Repeat
----------------------------------------------------------------------------------------------------------------------------------------
There are four possible values for background-repeat. The default is simply repeat, it repeats the
image horizontally and vertically as many times as is needed to fill the element.

The other values are repeat-x for horizontal repeating, repeat-y for vertical repeating, and no-repeat
which causes the image to display once only.
body {background-repeat:repeat-x;}
body {background-repeat:repeat-y;}
body {background-repeat:no-repeat;}

One last noteCSS3 offers a couple of as-yet-unsupported ways to make the repeats fill the element
an exact number of times.
background-repeat: round rescales the image until the repeats fill an exact number of times.
background-repeat: space adds space between the tiles until they fit the element exactly.
----------------------------------------------------------------------------------------------------------------------------------------
Background Position
----------------------------------------------------------------------------------------------------------------------------------------
background-position is probably the most complex of the background properties.

The four basic background-position settings are the keywords top, left, bottom, right, and center,
and you can specify any two of them in the property values.

The background-position property simultaneously defines the origin point of both the element and
the image. That origin point defines the horizontal and vertical coordinates of a point within both the
element and the image by which they are aligned.
----------------------------------------------------------------------------------------------------------------------------------------
Text Color
----------------------------------------------------------------------------------------------------------------------------------------
The color property is used to set the color of the text. With CSS, a color is most often specified by:
A HEX value - like "#ff0000"
An RGB value - like "rgb(255,0,0)"
A color name - like "red"
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
----------------------------------------------------------------------------------------------------------------------------------------
Text Alignment
----------------------------------------------------------------------------------------------------------------------------------------
The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned
to the left or right, or justified.


When text-align is set to "justify", each line is stretched so that every line has equal width, and the left
and right margins are straight (like in magazines and newspapers).
h1 {text-align:center;}
h2 {text-align:right;}
p {text-align:justify;}
----------------------------------------------------------------------------------------------------------------------------------------
Text Decoration
----------------------------------------------------------------------------------------------------------------------------------------
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
----------------------------------------------------------------------------------------------------------------------------------------
Text Transformation
----------------------------------------------------------------------------------------------------------------------------------------
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
----------------------------------------------------------------------------------------------------------------------------------------
Text Indentation
----------------------------------------------------------------------------------------------------------------------------------------
The text-indent property is used to specify the indentation of the first line of a text.
p {text-indent:50px;}
----------------------------------------------------------------------------------------------------------------------------------------
Font Family
----------------------------------------------------------------------------------------------------------------------------------------
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does
not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available. Note: If the name of a font family is more than one word, it
must be in quotation marks,
like: "Times New Roman".

More than one font family is specified in a comma-separated list:
p {font-family:"Times New Roman", Times, serif;}
----------------------------------------------------------------------------------------------------------------------------------------
Font Style
----------------------------------------------------------------------------------------------------------------------------------------
The font-style property is mostly used to specify italic text. This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
----------------------------------------------------------------------------------------------------------------------------------------
Font Size
----------------------------------------------------------------------------------------------------------------------------------------
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

Set Font Size with Pixels
Setting the text size with pixels gives you full control over the text size:
p {font-size:14px;}

Set Font Size with Em
To avoid the resizing problem with older versions of Internet Explorer, many developers use
em instead of pixels.

The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text
size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em.
----------------------------------------------------------------------------------------------------------------------------------------
Font Weight
----------------------------------------------------------------------------------------------------------------------------------------
The font-weight sets how thick or thin characters in text should be displayed.
p {font-weight: normal;}
p {font-weight: bold;}
p {font-weight: 100;}
Possible values are: lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder
----------------------------------------------------------------------------------------------------------------------------------------
Letterspacing
----------------------------------------------------------------------------------------------------------------------------------------
You can adjust the space between letters in the following manner.
Setting the value to 0, prevents the text from justifying. You can use negative values.
p {letter-spacing:5px;}
----------------------------------------------------------------------------------------------------------------------------------------
Wordspacing
----------------------------------------------------------------------------------------------------------------------------------------
You can indent the first line of text in an (X)HTML element with the following:
p {word-spacing: 5px;}
----------------------------------------------------------------------------------------------------------------------------------------
Lists
----------------------------------------------------------------------------------------------------------------------------------------
In HTML, there are two types of lists unordered lists <ul>: the list items are marked with bullets and
ordered lists <ol>:
the list items are marked with numbers or letters.

With CSS, lists can be styled further, and images can be used as the list item marker.

The type of list item marker is specified with the list-style-type property:
ul {list-style-type:circle;}
ul {list-style-type:square;}
ol {list-style-type:upper-roman;}
ol {list-style-type:lower-alpha;}
ul {list-style-image:url(sqpurple.gif);}
----------------------------------------------------------------------------------------------------------------------------------------
Box Model
----------------------------------------------------------------------------------------------------------------------------------------
All HTML elements can be considered as boxes. In CSS, the term box model is used when talking
about design and layout. The CSS box model is essentially a box that wraps around HTML elements,
and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.
By default, the border of each box isnt visible and the background of the box is transparent, so the
underlying box structure is not immediately apparent. The properties fall in three groups: Border,
Padding, Margin.
----------------------------------------------------------------------------------------------------------------------------------------
Border
----------------------------------------------------------------------------------------------------------------------------------------
You can set the thickness, style, and color of the border.
p.warning {border:solid #F33;}
----------------------------------------------------------------------------------------------------------------------------------------
Margins
----------------------------------------------------------------------------------------------------------------------------------------
You can set the distance between this box and adjacent elements.
The box has four sides, so the properties associated with border, padding, and margin each have
Four setting: top, right, bottom, left.
margin-top: length, percentage or auto;
margin-left: length, percentage or auto;
margin-right: length, percentage or auto;
margin-bottom: length, percentage or auto;

You can also declare all the margins of an element in a single property
#box {margin:10px 20px 10px 20px;}/* Top,Right,Bottom,Left */

This sets margins for all sides:
#box {margin:10px;}/* All 4 margins */

If you only declare two or three values, the undeclared values are:
#box {margin: 10px 20px;} /* 2 Values T&B and L&R */
#box {margin: 10px 20px 10px;} /* 3 Values T and L&R and B */

You can set the margin property to negative values.
#box {margin:-10px;}
----------------------------------------------------------------------------------------------------------------------------------------
Padding
----------------------------------------------------------------------------------------------------------------------------------------
The padding clears an area around the content (inside the border) of an element.
The padding is affected by the background color of the element.
padding-top: length, percentage or auto;
padding-left: length, percentage or auto;
padding-right: length, percentage or auto;
padding-bottom: length, percentage or auto;

You can also declare all the padding of an element in a single property
#box {padding:10px 20px 10px 20px;}/* Top,Right,Bottom,Left */

This sets padding for all sides:
#box {padding:10px;}/* All 4 margins */

If you only declare two or three values, the undeclared values are:
#box {padding: 10px 20px;} /* 2 Values T&B and L&R */
#box {padding: 10px 20px 10px;} /* 3 Values T and L&R and B */
You cannot set the padding property to negative values.