Introduction to CSS(2) : COMP1141 Practical Activity
Naming ElementsYou can give your X(HTML) elements either a unique name or one that identifies them as belonging to a particular class. You can then apply styles to all elements with a given name.
To name groups of elements:
Type: class=”name” where name is the identifying name of the class.
Try it now. You need a basic (X)HTML page with some text and some headings for example:
<html>
<head>
<title>
Test css2
</title>
<style type="text/css">
.para1{font-style:italic}
.para2{font-weight:bold}
</style>
</head>
<body>
<h1> Introduction to Simple CSS </h1>
<p class="para1"> This is a simple introduction to CSS</P>
<h2> Trying out Naming Elements</h2>
<p class="para2">I am experimenting with naming elements.</p>
</body>
</html>
The above example applies italic and bold styles to the first and second paragraphs only.
Breaking a Page Into Divisions
Breaking your page into divisions allows you to apply styles to an entire chunk of your page at once. This is particularly useful for designing layouts with css.
At the beginning of the division type: <div
If desired type id=”name” where name uniquely identifies the division
Type > to complete the division tag.
NOTE you don’t have to label each division with a class but they are much more powerful if you do.
Example: Applying styles to Divisions
<html>
<head>
<title>
Test css2
</title>
<style type="text/css">
.para1{font-style:italic}
.para2{font-weight:bold}
.emph{font-weight:bold;color:red}
</style>
</head>
<body>
<h1> Introduction to Simple CSS </h1>
<p class="para1"> This is a simple introduction to CSS</P>
<div class="emph">
This is a division
</div>
<h2> Trying out Naming Elements</h2>
<p class="para2">I am experimenting with naming elements.</p>
<div class="emph">
This is a division
</div>
</body>
</html>
Try it out for yourself.
There are many more things you can do with divisions, they are especially useful for layout. It is beyond the scope of this module to create complex layouts but you can experiment with your own pages. A few more ideas next week!