HTML Styles - CSS

CSS is used to style HTML. It determines how the HTML elements appear on the screen, paper, or in other media.

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

You can add CSS to HTML elements in 3 ways:

  • Inline, where the style attribute is used in HTML elements.
  • Internal, where the <style> element is used in the <head> section.
  • External, where an external CSS file is used.

Let’s look through each way.

Inline CSS

An inline CSS applies a particular style to a single HTML element. Here the style attribute of an HTML element is used.

In the example below the text color of the <p> element is red:

Example of the inline CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Usage of the inline CSS</h1>
    <p style="color:red;">The paragraph is red.</p>
  </body>
</html>

Internal CSS

An internal CSS specifies a style for a single HTML page. It is defined in the <head> element of an HTML page, inside of a <style> tag:

Example of the internal CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        font-size: 30px;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

External CSS

An external style sheet specifies the style for multiple HTML pages. It can change the look of the whole website by changing just one file.

For using an external style sheet, you should add a link to it inside of the element of the HTML page:

Example of the external CSS sheet:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

The file can’t contain any HTML code and must be saved with a .css extension.

CSS Fonts

The CSS color property describes the color of the text content.

The CSS font-family property defines the font of the text content.

The CSS font-size property defines the text size.

Example of the CSS fonts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

CSS Border

The CSS border property sets values to all four sides of an element.

Example of the CSS border property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dotted red;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

CSS Padding

The CSS padding property specifies padding (space) between the text and the border.

Example of the CSS padding property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #008022;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

CSS Margin

The CSS margin property creates space around the element.

Example of the CSS margin property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #090fce;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

The id Attribute

The id attribute specifies a specific style for one element.

Example of the id attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #large-text {
        border: 8px groove powderblue;
        font-size: 24px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p id="large-text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

The Class Attribute:

The class attribute is used to specify a style for special kinds of elements.

Example of the class attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        border: 8px inset powderblue;
        font-size: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>



Do you find this helpful?

Related articles