| Viewed 154 times

how to use css in html


how to use css in html

1 Answer
Mikdam Qandeel
Answered
6

First of All, CSS stands for (Cascading Style Sheets).

It can be added to HTML page in 3 ways:

1. Inline

In this type, you can directly add Style Attributes to any HTML element.

Example:

<p style="color:yellow;  background:blue;">This is a yellow paragraphwith a blue background-color</h2>

Output:

This is a yellow paragraph with a blue background-colour

2. Internal 

Using internal CSS to define a style for a single HTML page. We can add internal CSS Style by using <style> tag, Inside the <head> section.

Example:

<!DOCTYPE html>
<html>
        <head>
                <style>
                        body {background-color: powderblue;}
                        h1   {color: blue;}
                        p    {color: red;}
                </style>
        </head>
        <body>
                <h1>I am a heading</h1>
                <p>I am a paragraph.</p>
        </body>
</html>

Output:

I am a heading

I am a paragraph.

3. External 

It is the most common method of attaching CSS Styles to HTML page. The external style sheet is used to define the style for many HTML pages.

We can add External CSS Style by using <link> tag, Inside the <head> section.

Example:

<!DOCTYPE html>
<html>
        <head>
              <link rel="stylesheet" type="text/css" href="#" " />
        </head>
        <body>
        </body>
</html>

In the href="" attribute, you add the path for your CSS file. The CSS file can be written in any text editor. The file must not contain any HTML code and must be saved with a .css extension.

For example, If the CSS file name is MyStyle it must be MyStyle.css And to we use it Like this:

<!DOCTYPE html>
<html>
        <head>
              <link rel="stylesheet" type="text/css" href="MyStyle.css" " />
        </head>
        <body>
        </body>
</html>