HTML CSS

CCS is short for Cascading Style Sheets.

CSS provides a convenient mechanism for adding styles (fonts, colors, height, width, alignment, etc.) to HTML elements.

CSS can be used with HTML in the following ways:

Inline CSS - Styling of an element is done using style attribute direct in HTML elements.
Internal CSS - Styling of an element is done using <style> tag within the <Head> section of the HTML document.
External CSS - Styling of an element is done using external CSS file.

Inline CSS is used to style a single element.

Hello world !

Internal CSS is used to style elements within a single page.

External CSS is used to style elements in more than one HTML web pages.

And external style sheet file with .css extension is used to style elements in more than one HTML pages.

The external css file is linked to an HTML page by declaring it within the <head> section of the document as shown below:

Following is an example of an external css file:


body {
    background-color:while;
}
p {
    font-size:14px;
    font-style:italic;
}

img {
    width:100px;
    height:100px;
}

The id attribute of an element is used to set style to a single element.

Then, in the external css file, each element is styled using id selector (#id) as shown below:

my-style.css



#title {
    font-size:14px;
    font-style:italic;
}

#img1 {
    width:100px;
    height:100px;
}

The class attribute of an element is used to set style to a single or multiple elements.

Then, in the external css file class name prefix with dot (.) is used to set style as shown below:

my-style.css



.title-head {
    font-size:14px;
    font-style:italic;
}

.img-1 {
    width:100px;
    height:100px;
}