css typing tips:

Start with a comment line to indicate the purpose of your stylesheet

Comments start with /* and end with */ . It is the same for single line or multiple
line comments
/* These style classes apply to the home page */

style classes are mentioned with selector and set of properties

selector {
property1:value1; property2:value2;
}
selector can be of id, class, tag name.
#id1 - id selector. Styles an html element with id="id1"
.class1 - is class selector. Styles an element with class as class=".. class1 .."
tag1 - is tag name selector. Styles all <tag1> elements

To start writing the selector, type # or . or (nothing for tagname)

Then copy the id value or class value from the html page and paste it after the
#(for id) or . (for class)
Start the set of styles with opening and closing flower brackets {}
Bring the browser back to the middle of the brackets and press enter twice.
#id1 or .class1 or tag1 {

}
Start typing the property name. Make use of suggestions from the editor in case of
long names to avoid spelling mistake
Follow the property name with :
type the value of the property (do not use '' or "")
End the assignment with ;
Add the next property and value in the next line.

You can give multiple selectors to a set of properties.

To give multiple selectors use ,
#id1, .class1, tag1
dont use , after the last selector
#id1, .class1, tag1 {property:value;}
Use space in the selector name to indicate the parent -child relationship of the
selector
#id1 tag1 (styles an element with <tag1> inside the element with id="id1". Need not
be direct child)
<div id="id1"> <section> <tag1> </tag1></section></div>

Create .class1 selector apply styles to multiple elements of any tag name.

Create most specific classes in the last.

<div class="class1 class2">
If you write .class1 first and .class2 second in the class attribute,
class2 styles will override class1 styles

If you write same class more than once in the stylesheet,

properties of below class will override properties of above class.
div {
font-size:12px;
text-align:left;
}
.class1, .class2, #id1 {
}
.
.
.
div {
font-size:20px;
text-color:blue;
}

font-size applied to div will be 20px.

!important property overrides all styles including inline styles.

<h2 style="font-size:20px">
in css
h2 {
font-size:14px !important;
}
.
.
.
h2 {
font-size: 12px;
}
Use !important carefully.

Import css file into html page in the head element using
<link type="text/css" href="cssfile.css">

For few style classes write css classs in <style></style> tag in head element
Avoid writing in-line styles for multiple elements and for multiple properties.