Unit10: CSS


Courses Introduction Criteria Assignments Notes Links


ITQ Presentations

ITQ Art & Images

FD Unit4

ND Unit3

ND Unit10

ND Unit15

ND Unit21

ND Unit24


Examples of simple CSS tasks

Create a very simple web page with a few headings and some paragraphs.

This example has had text colours, sizes etc applied by changing its properties in Dreamweaver MX.

Below is the code which will have been created. See how often code is repeated for paragraphs. All the dark code can be deleted and the effects produced by a CSS stylesheet as you'll see further down this page.

<p><font color="#990000" size="7" face="Sylfaen, Times New Roman, serif">This might be a big heading which
will be <a href="#">&lt;h1&gt;</a></font></p>
<p><font color="#993366" size="5" face="Arial, Helvetica, sans-serif">Then you'll need a sub-heading -
might as well call it <a href="#">&lt;h2&gt;</a></font></p>
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Of course, there's also
the ordinary paragraph text, <a href="#">&lt;p&gt;</a> of course. </font></p>
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Lorem ipsum veri vocibus
fabellas vix id. Nec te detraxit deterruisset signiferumque, ad his falli pertinax,
conceptam necessitatibus pro te. Cum utroque rationibus consetetur et, sea periculis
ocurreret definitionem ad. Ei debet populo est, te assum reprehendunt qui. Ne
usu vulputate percipitur. Odio paulo corpora eu duo, elit sanctus sensibus sit
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Ne porro graece postea est,
pro eirmod melius ceteros at. <a href="#">His ad quas nominati</a>, ei sit eripuit
eleifend referrentur. Mea quas assum denique id, id tota phaedrum sit. Tale
moderatius an eos, primis definiebas ea nec.</font></p>
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Cum ei integre elaboraret.
Sint <a href="#">tempor</a> graeci vel te, ei his omnium invidunt. Augue quidam
ea cum, iriure electram nam no, an sed admodum nostrum. Mea menandri reprimique
ad, vix ea brute reprimique.</font></p>
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Ei vix vide epicuri, populo
graeco urbanitas an has, usu error adipiscing ex. Soluta atomorum rationibus
at eum, graece populo consequuntur per id. Id maiorum inciderint nam. Esse gubergren
democritum te ius. Insolens signiferumque mel ne.</font></p>
<p><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif">Ius erat dignissim no, ut
meis noluisse sea, id quem nisl laoreet quo. Accusamus splendide et ius, vim
ut eruditi adolescens scriptorem. Mel at augue oratio, nostro blandit contentiones
vel ei, primis conceptam reprehendunt nam eu. <a href="#">Duo adipiscing</a>
elaboraret an. Est ne aeterno facilisis, et mea congue latine.</font></p>
<p><strong><font color="#660000" size="3" face="Sylfaen, Times New Roman, serif">A
smaller<a href="#"> &lt;h3&gt;</a> heading may be useful for something somewhere.</font></strong></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Lastly,
for now, a footer &lt;h4&gt; could be useful too.</strong></font></p>

Here's a sample stylesheet. It sets colours, font sizes and font family for each type of style needed. It also sets how links <a> will appear. (This <a> css code will only apply to text links - if you have images as links or rollover effects then you'd leave that code alone for now. Replacing that with CSS is more complicated!)

and here's the sample page with all the dark code above removed and replaced by <h1>, <h2> etc.

More about this task

Page updated 22 September, 2009 Content and design © Andrew Hill