Relation between HTML and CSS

This section describes how HTML is related to CSS, which defines how an HTML document should be presented on the screen.

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in HTML or other markup languages.

Here is an example of HTML document adopted from "CSS tutorial" Website at

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- CSS_Example.html
  <title>My first styled page</title>
  <link rel="stylesheet" href="CSS_Example.css">


<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>


The presentation look and feel can be controlled by the following CSS definitions:

/* CSS_Example.css
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Here is how the HTML document look like in a browser with above CSS definitions:

HTML Presented with CSS
HTML Presented with CSS

Table of Contents

 About This Book

Introduction of HTML

 What Is HTML

 History of HTML

 Differences between HTML and XHTML

Relation between HTML and CSS

 Relation between HTML and JavaScript

 Relation between HTML and DOM

 Relation between HTML and DHTML

 Relation between HTML and SVG

 Relation between HTML and MathML

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents


 Full Version in PDF/EPUB