HTML Tutorial – CSS

Styling HTML with CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

CSS can be added to HTML in the following ways:

  • Inline – using the style attribute in HTML elements
  • Internal – using the <style> element in the section
  • External – using an external CSS file

Inline Styles

Inline CSS style can be used to apply style to a single element.

HTML Inline CSS Style Example

<!DOCTYPE html>
<html>
<body>
<p style="color:red;">This is a paragraph with red color text.</p>
<p style="font-weight:bold;">How to make a text bold with CSS</p>
</body>
</html>
Try it yourself »

Internal Style Sheet

Internal CSS styles are defined in the <head> by using the <style> tag.

HTML Internal Style Sheet Example

<!DOCTYPE html>
<html>
<head>
<style>
p {color:blue;}
h3 {color:red;}
</style>
</head>
<body>
<p>Blue color text because of "p {color:blue;}" in the head</p>
<h3>Red color text because of "h6 {color:red;}" in the head</h3>
</body>
</html>
Try it yourself »

External Style Sheet

With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag in the <head> section.

HTML External Style Sheet Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>

An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the “styles.css” looks:

body {
    background-color: #888;
}
h1 {
    color: red;
}
p {
    color: blue;
}