Introduction:

In this article we will learn what is CSS style or how to use css on the html pages or how many type can add css on a html page with example.

Description:

CSS style is added on HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

Inline CSS is used to apply CSS on a single line or element.

Example:

<p style="color:blue">Hello CSS</p>

Simple demonstration of using inline css:

<!DOCTYPE html>
<html>
<head>
    <title>Example of Inline css Styles</title>
</head>
<body>
    <p style="color:blue;font-size:46px;">
        I'm a big, blue, <strong>strong</strong> paragraph.
    </p>
</body>
</html>

2. Internal CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html. 

Example:

<style>
        p {
            color: blue;
        }
    </style>

 

Simple demonstration of using Internal css:

<!DOCTYPE html>
<html>
<head>
    <title>Example of internal css Styles</title>
    <style>
        p {
            color: blue;
            font-size: 46px;
        }
    </style> 
</head>
<body>
    <p>
        I'm a big, blue, <strong>strong</strong> paragraph.
    </p>
</body>
</html>

3. External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS

code in a css file. Its extension must be .css for example stylesheet.css.

Example:

Create the Style Sheet

Type CSS code into a plain text file, and save with stylesheet.css extension (for example,

styles.css).

body {
    background-color: darkslategrey;
    color: azure;
    font-size: 1.1em;
}
 
p {
    color: blue;
    font-size: 46px;
}

 

Link to the Style Sheet from the HTML Documents

 

Add the following code between the <head></head> tags of all HTML documents that you want to reference the external style sheet. This code uses the HTML <link> element to link to the external style sheet.

 

<link href="stylesheet.css" rel="stylesheet" />

simple demonstration of using external css:

<!DOCTYPE html>
<html>
<head>
    <title>Example of external css Styles</title>
 
    <link href="stylesheet.css" rel="stylesheet" />
</head>
<body>
    <p>
        I'm a big, blue, <strong>strong</strong> paragraph.
    </p>
</body>
</html>

 

I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like