WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Div and Span Sun Nov 14, 2010 6:11 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Div and Span
Learn CSS - part 10


The elements <span> and <div>
We have seen that through the attributes class and ID can we specify special properties for selected elements.
Now we see application of <span> and <div>, these two elements are usually used in conjunction with the attributes class and id.

The <span> element
Normally are we using the <span> elemtn to mark or highlight special content.

Imagine that we got following text: The last year were I very busy with my work and didn't sleep well in long time.
Whith this example do we want to highlight year, busy and didn't. The source could would then look like this by using HTML.
Code:
<html>
<head>
<title>Span</title>
<link rel="stylesheet" type="text/css" href="stylesheetspan.css">
</head>
<body>
<p>The <span class="highlight">last</span> year were I very <span class="highlight">busy</span> with my work and <span class="highlight">didn't</span> sleep well in long time.</p>
</body>
</html>
The following stylesheet will look like this.
Code:
span.highlight {
color: #FF0000;
}
Notice! We could also have used ID instead of class.

The <div> element
The <div> element is normally used to style big things such as boxes etc. Templates is also often builded with <div>'s.

We are using the same text as before, but this time, do we want the whole text red with a black background. It can be done like this.
Code:
<html>
<head>
<title>DIV</title>
<link rel="stylesheet" type="text/css" href="stylesheetdiv.css">
</head>
<body> <div id="marked">
The last year were I very busy with my work and didn't sleep well in long time.
</div>
</body>
</html>
The following stylesheet will look like this.
Code:
#marked {
background: #000000;
color: #FF0000;
}
Note: Instead of "id" could you also have used "class", if more blocks is intended to emphasize the same marker.
In contrast to the "class" and "ID", may <span> and <div> not stand "alone"!

It was another lesson - let's then go futher.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum