Make delicious recipes!

Chapter 1: Introduction to CSS



CSS stands for Cascading Style Sheets. It is a way to separate presentation logic from the layout of a webpage. In a typical web-site, there are a lot of style elements like color, font size and type, background images etc. CSS helps in pulling out this styling information, grouping it more concisely and logically and re-using this style across pages.

Selectors


Styling information in CSS is specified using the following format:

    <selector> {
        <property1> : <value1>;
        <property2> : <value2>
    }


Example:
body {
	background-color: #f0e0f0;
	color: black ;
}

In the above, "body" is the selector, and properties being set are "background-color" and "color".


Types of selectors


There are three types of selectors:

  1. HTML selectors: HTML Selectors are used to define properties for all HTML elements.

  2. Class selectors: These are used to define properties for only those HTML tags whose class is the same as the style tag.

  3. ID selectors: These are used to define styles to objects with a specific ID

  4. Javascript selectors: Used to dynamically change the style of an element. Example: object.style.fontFamily="arial, sans-serif"


Example:

Consider the following div tags:

<div>This div has neither ID nor class</div>

<div class="myDivClass">This div has a class</div>

<div id="myDivId">This div has an ID</div>


CSS for all three types of selectors can be defined as:

div {
    color:red
}

.myDivClass {
    color:blue
}

#myDivId {
    color:green
}


Result:
This div has neither ID nor class
This div has a class
This div has an ID


In the above example, red color is chosen for all the div elements (HTML selector case).
If only this style is loaded, then all the div elements of the page will become red.

Next, we choose blue color for the class myDivClass. Syntax for doing this is .<class> (Class selector case).
Similarly, green color is chosen for an ID. Syntax for doing this is #<ID> (ID selector case).

Difference between ID and class is that, ID is normally chosen to refer to one particular instance of a tag.
While class is normally chosen to refer to a wider range of tags. For example, in the above case, any element with a class myDivClass will become blue.


Grouping selectors


It is possible to combine common properties for styles into one single style to avoid repetition.
For example, consider the following CSS:

.class1{
    font-family:verdana; color:black; background:white;
}

.class2 {
    font-family:verdana; color:black; background:yellow;
}

.class3 {
    font-family:verdana; color:black; background:lightblue;
}


Note that all the classes above have same properties except the background color.
This can written more concisely as:

.class1, .class2, .class3 {
    font-family:verdana; color:black;
}

.class1 {
    background:white;
}

.class2 {
    background:yellow;
}

.class3 {
   background:lightblue;
}


It is recommended to group styles logically to improve the maintainabilty of the code and reduce bugs.


Adding context awareness to selectors


The style for a web-page can be pretty complicated.
CSS provides a way to capture this complexity in an easy way.
For example, it may be required to highlight only those elements in a web-page which are bold and italic and inside the tag <p>. Any other bold and italic tags should be left untouched.
This can be specified in CSS as:

P B I {
   color:yellow;
}



Note the absence of comma as compared to "grouped selectors"
If commas were present in the above style sheet as:

P, B, I {
   color:yellow;
}


Then its meaning would have changed from "context aware selector" to "grouped selector" i.e. with the presence of comma, the selector would have meant:
"Apply yellow color to all three tags P, B and I"
instead of
"Apply yellow color to all tags which are bold and italic and inside the tag <p>"

More complex selectors



It is possible to mix and match the above selectors to make them more complicated.
For example, consider the following CSS:

P B, DIV I, P .myDivClass, #myDivID {
   color:yellow;
}


Here grouping happens on selectors delimited by comma, which are:

P B
DIV I
P .myDivClass
#myDivID

Last selector here is the ID selector, while the first three are context aware selectors.





Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal