CSS is short for Cascading Style Sheets.CSS was first used in HTML4 to better render HTML elements.CSS can control the presentation of multiple HTML elements at the same time. It also can control the layout of the page.

How to use CSS

CSS can be added to HTML in the following ways:

  • Inline – use “style” attribute in HTML element.
  • Internal – use <style> elements in the <head> section.
  • External – use external css file.

It is usually best for you to refer to external CSS files. However, sometimes you can use inline CSS for demonstration purposes.

Inline CSS

Each HTML element has a style attribute. You can define the CSS style directly in the style attribute, but it is only valid for that element.

We add an inline css to the <p> element to change its default font color and margins:

<p style="color:blue;margin:20px 0;">This is a paragraph.</p>

The background-color attribute defines the background color of an element:

<body style="background-color:yellow;">

  <h2 style="background-color:red;">This is a title</h2>

  <p style="background-color:green;">This is a paragraph. </p>


the font-family, color and font-size attributes define the font style:

<h1 style="font-family:verdana;">A title</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph. </p>

The text-align attribute specifies the horizontal and vertical alignment of the text:

<h1 style="text-align:center;">Align Centered Title</h1>

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

Internal CSS

You can use the <style> element to define page styles within the <head> section:


<style type="text/css">

body {background-color:yellow;}

p {color:blue;}



External CSS

External CSS will be the ideal choice when styles need to be applied to many pages. Using external CSS, you can change the appearance of the entire site by changing one file.

<!DOCTYPE html>



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



<h1>This is a heading</h1>

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



An external css file can be written by any text editor. The contents of the file cannot contain any HTML element, and the file must be saved as a “.css” file.

Here is the content of the style.css file:

body {
    background-color: powderblue;

h1 {
    color: blue;

p {
    color: red;

The id attribute

To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

#p01 {
    color: blue;

The class attribute

To define a style for a special type of elements, add a class attribute to the element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

p.error {
    color: red;

Leave a Comment

Your email address will not be published.