HTML CSS

❮ Previous Home Next ❯

CSS stands for Cascading Style Sheets.

CSS describe how documents are presented on screens, in print, or perhaps how they are pronounced.

W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994.

CSS provide easy and effective alternatives to specify various attributes for the HTML tags.

Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:).

Each property declaration is separated by a semi-colon (;).

Example

<p style="color:red;font-size:32px;">Hello World!</p>



Using CSS

You can use CSS in three ways in your HTML document:

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 practice. Let's see all the three cases one by one with the help of suitable examples.


Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag.

This should be done only when you are interested to make a particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an internal and external CSS.

Example

<p style="color:red;font-size:32px;">Hello World!</p>






Internal Style Sheet

You can apply style sheet rules to a single document only, then you can include those rules in <head> section of the HTML document using <style> tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS file.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: tomato;}
h1   {color: blue;}
p    {color: white;}
</style>
</head>
<body>

<h1>Heading of the Page</h1>
<p>Paragraph of the page.</p>

</body>
</html>



External Style Sheet

An external style sheet is used to define the style for many HTML pages.

If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.

Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Heading of the Page</h1>
<p>Paragraph of the page.</p>

</body>
</html>

styles.css file

The external style sheet can be written in any text editor with extension of .css. The file must not contain any HTML code and here is what the "styles.css" file looks like:

styles.css

body {
  background-color: tomato;
}

h1 {
  color: blue;
}

p {
  color: white;
}

See styles.css file.

❮ Previous Home Next ❯