Creating our First CSS website

 

We  will create our First CSS website in this section.

 

What is DOM?

 

DOM stands for document object model. When a page is loaded, the browser creates a DOM of the page which is constructed as a tree of objects.

 

HTML id ad Class Attributes.

 

When an HTML element is given an id, it serves as a unique identifier for that element. On the other hand, when a HTML element is given a Class, it now belongs to that class. More than one element can belong to a single class but every element must have a unique id (if assigned).

 

We can add multiple class to an element like this.

Three Ways to add CSS to HTML:-

1.  <style> tag :- Adding <style> ……</style> tag to HTML in Head.
2.  Inline CSS:- Adding CSS using style attribute.
3. External CSS :- Adding a Style Sheet (.css) to HTML using <link> tag.

CSS Selectors

A CSS selector is used to select an HTML elements(s) for styling.

Body {

Color: red ;

Background : pink ;

}

Element Selector

It is used to select an element based on the tagname.

For example:-

h1 {

Color : red;

}

Id Selector

It is used to select an element with a given id.

For example:

#first {

Color : white ;

background: black ;

}

Class Selector

It is used to select an element with a given class.

For example:-

.red {

Background : red;

}

Important Notes:

We can group selectors like this.

h1,h2,h3,div {

color : blue ;                                     (h1,h2,h3,div will be in blue color)

}

We can use element.class as a selector like this:

p.red {

color : red ;

}

Star (*) Can be used as a universal selector to select all the elements.

    * {

margin : 0;

padding : 0 ;

}

An inline style will override external and internal styles.

Comments in CSS

Comments in CSS is text which is not parse and is thus ignored.

/* mention your comments*/