Skip to main content

HTML Styles using CSS

What is CSS?​

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

note

The word cascading means that a style applied to a parent element will also apply to all children elements within the parent.

Three ways to apply CSS​

CSS can be added to HTML documents in 3 ways:

  • Inline: by using the style attribute inside HTML elements
  • Internal or Embedded: by using a <style> element in the <head> section
  • External: by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS​

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).

Example:

<h3 style="color: red;  
            font-style: italic;  
            text-align: center;  
            font-size: 50px;  
            padding-top: 25px;">Learning HTML using Inline CSS</h3>

Output:

Inline CSS example

Internal CSS:​

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

<!DOCTYPE html>  
<html>  
    <head>  
      <style>  
      /*Internal CSS using element name*/  
            body{background-color:lavender;  
             text-align: center;}  
             h2{font-style: italic;  
              font-size: 30px;  
              color: #f08080;}  
            p{font-size: 20px;}  
        /*Internal CSS using class name*/  
            .blue{color: blue;}  
            .red{color: red;}  
            .green{color: green;}  
      </style>  
    </head>  
  <body>  
   <h2>Learning HTML with internal CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

Output:

Inline CSS example

External CSS:​

An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.

There are two files need to create to apply external CSS

  • First, create the HTML file
  • Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
  • Link the CSS file in your HTML file using tag in header section of HTML document.

Example:

  • HTML
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="my-style.css">
    </head>
  <body>
   <h2>Learning HTML with External CSS</h2>
    <p class="blue">This is a blue color paragraph</p>
    <p class="red">This is a red color paragraph</p>
    <p class="green">This is a green color paragraph</p>
  </body>
</html>
  • CSS
body{  
    background-color:lavender;  
    text-align: center;  
} 
 
h2{  
    font-style: italic;  
    size: 30px;  
    color: #f08080;  
} 
 
p{  
    font-size: 20px;  
}  
  
.blue{  
    color: blue;  
}  

.red{  
    color: red;  
}  

.green{  
    color: green;  
}
note

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Table of Contents