HTML CSS

HTML Tutorial

About Lesson

HTML CSS

In this tutorial, we will learn about CSS ,CSS types and their implementation in HTML with the help of examples.

CSS

CSS stands for Cascading Style Sheets. CSS is a set of commands used to control the layout of various elements on web pages.
It describes how the HTML documents are displayed on browsers.
CSS saves a lot of time and work by providing easy and effective ways to specify various attributes for HTML tags.

Types of CSS

There are three types or ways to use CSS in HTML document :

Inline CSS – By using style attribute inside HTML elements.
Internal CSS – By using <style> element inside the <head> section of the HTML document.
External CSS – By using <link> element to link an external CSS file with the HTML document.

Inline CSS

An inline CSS is specified within an HTML element using the style attribute.
It is used to apply style on a single HTML element.

Note : An inline CSS rule overrides the External CSS as well as Internal CSS rules.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <p style = "color : blue;" >This is a simple paragraph.</p>
    <h4 style = "color : red;">This is heading 4.</h4>
  </body>
</html>

Output

This is a simple paragraph.

This is heading 4.

Internal CSS

An internal CSS is specified within the <head> element of the HTML document. It is applied by using <style> element inside the <head> section.
An internal CSS is used to define a style for a single HTML document.

Note : Internal CSS rules override the External CSS rules.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS</title>
    <style>
      body {
        background : black;
      }
      p {
        color : yellow;
      }
      h4 {
        color : red;
      }
    </style>
  </head>
  <body>
    <p>This is a simple paragraph.</p>
    <h4>This is heading 4.</h4>
  </body>
</html>

Output

This is a simple paragraph.

This is heading 4.

External CSS

An external CSS is used to define the style for many HTML pages with a single file. It is declared in an external file with extension .css.
External CSS is used by the <link> tag which should be placed in the head section of an HTML document.
When using an external Style Sheet, we can change the look of an entire website, by changing one file. The <link> element defines a link between a document and an external resource.

The <link> element contains three attributes :

Attribute	Value	Description
`rel`	Stylesheet	It is used when using an external stylesheet on a webpage
`type`	text/CSS	It is used to declare the type of document we will attach
`href`	URL/name of file	Used to denote the location and name of the external stylesheet to be used

Example :

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS</title>
    <link rel = "stylesheet" href = "style.css">
  </head>
  <body>
    <p>This is a simple paragraph.</p>
    <h4>This is heading 4.</h4>
  </body>
</html>

style.css

body {
  background : black;
}
p {
  color : yellow;
}
h4 {
  color : red;
}

Output

This is a simple paragraph.