HTML with CSS

CSS is a language that is used for styling a document written in any kind of mark up language like HTML, XHTML etc. It stands for Cascading Style Sheet.

You can connect CSS with HTML in following ways:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

You can change a single element in a unique style by using inline CSS. It uses the style attribute of HTML.

Example:

<h1 style="color: blue">This is a Heading. </h1>

Run Example

Internal CSS

You can use a specific design for a specific document by using internal CSS.

Example:

<head>
<style>
h1 {
  color: red;
  font-size: 24px;
}
</style>
</head>

Run Example

External CSS

External CSS is the most important and usable way to connect CSS with a HTML document. By using External CSS the style of whole website can be changed by one file. Here each page must be linked with the reference of the external file.

Here is the linking of External CSS file with HTML document inside the <link> elemnt.

Example:

<head>
<link rel="stylesheet" href="style.css">
</head>

The External CSS code can be written using any text editor. No HTML tags should not be written in the CSS file and the extension of this file must be saved in .css such as style.css.

Here is the code of style.css file.

Example:

body {
  background: blue;
  font-size: 20px;
}
h1 {
  color: white;
}
p {
  font-family: verdana;
}

Run Example

Recommended Posts:

Related Tags: HTML Basics, CSS Basics, Bootstrap