HTML & CSS

 

HTML & CSS:

                CSS Stands for “Cascading Style Sheet”. It was introduced in late 1996.

            CSS saves a lot of work and time.

With CSS, you can control the color, font, the size of text, the spacing between elements,  what background images or background colors are to be used, different displays for different devices and screen sizes, how elements are positioned and laid out, and much more!

 It is used to control the layout of various

            Web pages all at once.

Types of CSS:

            There are three types of the style sheet

1.      Inline styling

2.      Internal styling

3.      External styling

Inline Styling:

                An inline CSS is used to apply a style to a single HTML element.

An inline CSS uses the "style" attribute of an HTML element.

 

Example:

                Following are some examples of inline CSS.

1.         <h1 style="color:red;">A Red Heading</h1>

2.         <p style="color:green;">A Green paragraph.</p>

Internal Styling:

               

An internal CSS is defined in the <head> section of an HTML page, within a <style> element. Used to apply a style for a single HTML page.

Example:

The following example sets the text color of ALL the <h1> elements (on that page) to “silver” and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderBlue"

<html>

<head>

<style>

body {background-color: powderblue;}

h1   {color: selver;}

p    {color: red;}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

External Styling:

            An external style sheet is defined in a separate file saved with “.css” extension.

            To use an external style sheet, add a link to it in the <head> section of each HTML page by using <link> tag.

It is useful when the style is applied to many web pages

Example:

           

 

<html>

<head>

                        <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

<body>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

 

The file must not contain any HTML code and must be saved with a .css extension.

The external style sheet can be written in any text editor.

 

The "styles.css" file looks like:

 

"styles.css":

 

body {

 

  background-color: silver;

}

h1 {

  color: red;

}

p {

  color: blue;

}