CSS



Cascading Style Sheets
: Separate styles from the actual document structure (HTML).
Syntax:
Selector {property_1: val1; property_1: val2; ...; property_n : valn;}              /*selector selelcts HTMLElements*/

Example: h1{color:blue;font-size:12px;}      /*This is a comment - Changes the color and font size of all h1 content to the provided values*/

Selector

  1. HTML element tag (e.g. h1)  -  h1{color:blue;font-size:12px;}
  2. #id: HTML element tag with id equal to id (e.g. #paragraphid1)  -  #paragraphid1{text-align:center; color:red}
  3. .class: HTML element tag with class property equal to class (e.g. .centerclass)  -  .centerclass {text-align:center}
  4. [attribute=""] Attribute Selector: Selects HTML elements that have specific attributes (and values) like here and here 
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }
                 /*selects input tags with a type attribute valued "text"*/
input[type="button"] { width:120px; margin-left:35px; display:block; }
                 /*selects input tags with a type attribute valued "button"*/
5. tag.class Extended Selector - Specify which HTML elements with class equal to .class should be affected - p.center {text-align:center;}

<html>
    <head>
        <style type="text/css">
            p.center {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <h1 class="center">This heading will not be affected</h1>
        <p class="center">This paragraph will be center-aligned.</p>
    </body>
</html>

Grouping

if several slectors have same css style you can separate the selectors by comma
h1,h2,p
{
color:green;
}

Nested Selector

RUN SELECTOR FROM LEFT TO RIGHT AND FINALLY APPLY CSS TO THE ULTIMATE SELECTED ELEMENTS.
<html>
    <head>
        <style type="text/css">
            p {color:blue; text-align:center; }
            .marked {background-color:blue}
            .marked p { color:white;}
        </style>
    </head>

    <body>
        <p>This is a blue, center-aligned paragraph.</p>
        <div class="marked">
            <p>This p element should not be blue.</p>
        </div>
        <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
    </body>
</html>

Where to Put Style Sheets

1. Separate style sheets in a .css file - when it is used in a lot of pages. Provide a link to the .css file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Example content of .css file
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
2. Internal as in the example above, provided in the head of the page.
3. Inline
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Inherit Styles or Not

The one with more specific values will be chosen.
 Style sheet in external file
Style sheet internal
 Final style sheet
 h3
{
color:red;
text-align:left;
font-size:8pt
}
 h3
{
text-align:right;
font-size:20pt
}
color:red;
text-align:right;
font-size:20pt

The result will be the inheritance of all the style sheets with the value priority of the more specific style sheet.
If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand2


.
.






Comments