Cascading Style Sheets - Basic intro

The primary motivation for CSS was to seperate presentation and content. It also promoted the DRY (don't repeat yourself) principle. Once we define styles for elements in the stylesheet, they do not need to be defined everywhere the element is used. We just need to ensure that the link to the stylesheet is maintained. If we need to change the style, we have to change only the definition in the stylesheet, instead of the elements. This is good, because for a change request we have to make fewer changes.

The CSS syntax is made up of 3 parts.
selector {property: value}
h1, h2, p
{
color: black;
font-family: "sans serif"
}
Note that the above example has multiple properties (that are seperated with a ; and one property has a value which comprises of multiple words), and it also has multiple (grouped) selectors.

The selector is usually the html element, the property is usually an attribute of the element, and the value is the value. So if I understand this correctly, CSS helps us factor the attributes of various html elements into style sheets, rather than defining them in the document with the element. Hmm, well this may not always be true, for example, the input element has an attribute called type, and I do not think we can or should define such attributes in a CSS. However, the concept is true for formatting related attributes of elements.

What if we want to support different styles for different elements at various places. We cannot rely only on selectors, because that will allow only one style. For such a requirement we must define a logical selector (also called a class) and map an actual selector to this logical selector. Using this reasoning, we can define multiple logical selectors or classes, and then map our actual html elements to these classes. The mapping is defined in the html file along with the definition of the element.

Classes can be created for an element, like this:
p.style1 {color: red}
p.style2 {color: blue}
p.style3 {font-family: "sans serif"}

<p class="style1 style3">Note that I have combined 2 styles</p>

or at a generic level

.style1 {color: blue}
.style2 {color: green}

<p class="style1 style2">What color will this text be displayed in?</p>

What will be dispalyed if there is a conflict as in the above case?

TIP: Do not start a class name with a number, because it will not work in Mozilla.
.1style {color: red}
will not work

We can also ensure that certain styles are associated only with elements that have certain attribute values.

input[type=text]
{
color: red
}

The above style can be used only for the text input html element.
<input type="text">

Styles can also be defined to work only with those elements that have a particular id.

/* This style def is for elements that have an id g120 */
#g120
{
color: green;
font-family: "sans serif"
}

will work only with those elements that have the id g120 (Note the comment at the top of the style definiton).

<p id="g120">
Some text
</p>

and if we want the style to work only with <p> elements that have an id of g120, then we use p#g120 instead of #g120.

TIP: Do not start the id name with a number, because it will not work with Mozilla. What this really means is that we should not define any id's in our html page that start with a number. If we do, then we will not be able to associate style definitions that work specifically with them.