Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

CSS Style Sheets

Page 5 of 5


CSS in a separate file

CSS styles are all about being practical; so why not being even more practical and write a separate file with all the CSS formatting you are going to use across your web site? (Instead of writing the
<style>
section all over again at the header of each HTML document).

That is easy to do. Just create a new text file, this one with the .css extension and link it from any HTML document where you want to use. Take a look at the example below:

CSS file (example.css):
body {
   background-color: #D4D0AC;
   font-family: arial, Helvetica;
   color: # 050AA3;
   font-size: 12px;
   }

p {
   margin-left: 2em;
   margin-top: .5em;
   }

.subtitle {
   font-size: 1.2em;
   color: #865B31;
   margin-top: 1.5em;
   margin-bottom: 0;
   }

#mainTitle {
   size: 2em;
   text-align: center;
   color: #883300;
   }
First HTML document (example1.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="example.css" type="text/css" />
</head>
<body>
<h1 id="mainTitle">Life is Cool</h1>
<h2 class="subtitle">Consectetuer adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut neque. Sed adipiscing. Praesent est mauris, mattis ac, dapibus in, sagittis at, neque. Duis ac ipsum vitae leo molestie viverra. Duis iaculis dolor ut arcu. Nunc vel dolor sit amet pede lacinia scelerisque. Proin pretium.</p>
<h2 class="subtitle">Integer dignissim</h2>
<p>Aenean scelerisque nulla id tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam libero turpis, sollicitudin ut, aliquam at, elementum vel, mi. Nunc aliquet euismod orci. In aliquam condimentum magna. Praesent id quam. Vivamus vitae mi. Maecenas id tellus. Morbi consequat accumsan enim. Nulla a felis eleifend leo tincidunt porta. Donec facilisis pulvinar lorem. Donec pellentesque velit ut purus.</p>
</body>
</html>
Second HTML document (example2.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="example.css" type="text/css" />
</head>
<body>
<h1 id="mainTitle">Enjoy It!</h1>
<h2 class="subtitle">Nunc aliquet euismod orci</h2>
<p>Etiam libero turpis, sollicitudin ut, aliquam at, elementum vel, mi. Nunc aliquet euismod orci. In aliquam condimentum magna. Praesent id quam. Vivamus vitae mi. Maecenas id tellus. Morbi consequat accumsan enim. Nulla a felis eleifend leo tincidunt porta. Donec facilisis pulvinar lorem. Donec pellentesque velit ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nonummy magna ut metus. Integer dignissim justo non lectus. Maecenas dictum est id nunc. Cras lectus. Ut sed lectus. Aenean gravida, est in tincidunt pharetra, nulla quam tempus felis, sit amet iaculis dui orci vitae augue. Praesent hendrerit quam. Maecenas magna. Nunc nonummy nisl in massa. Vivamus feugiat cursus pede.</p>
</body>
</html>
Renders of both HTML documents.
As you can see, both HTML documents are "calling" to the same .css file using the
<link>
tag inside the
<header>
section (see code above). This way they share the same overall formatting.

Separate CSS files make it easier to modify/correct/maintain the formatting of several pages at once.


In the next few tutorials we will focus (and practice) on the particular CSS properties you can use to add formatting to:
  • The overall body of the web page
  • Links
  • Paragraphs
  • Lists
  • Tables
  • Images
     ... and more.

I'll see you soon!

More pages of this tutorial → CSS Style Sheets  <12345

Comments & Questions