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 from http://www.w3.org/Style/Examples/011/firstcss.en.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- CSS_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="CSS_Example.css">  
</head>

<body>

<!-- 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>
</ul>

<!-- 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
anywhere&hellip;

<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>

</body>
</html>

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

/* CSS_Example.css
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
*/
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

Last update: 2014.

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

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version