Tutorials.

+ HTML

+ CSS

+ XHTML

+ JavaScript

ADDITIONAL CSS PROPERTIES




★Additional properties
If what we have covered isn't enough, well, there's more that you can do with CSS! :) In this next section, you'll learn how set IDs and Classes, how to position elements on your site, diplay, as well as floating properties.


back to top

★Classes
Classes are defined whenever you need a specific paragraph, for instance, to be formatted in a certain way that is different from the 'standard' format of a paragraph as defined in your CSS. Here's two different ways of creating classes:

The first is by paragraphs. Let's say I want a particular paragraph on my site to be enclosed a dotted border and another paragraph to have a letter-spacing of 3px.

Thus I would add on the following code to my style sheet:

p.firstparagraph { border-style: dotted }
p.secondparagraph { letter-spacing: 3px }

And somewhere between the <body> and </body> tags of my HTML source, I'll type this:

<p class="firstparagraph">This paragraph has a dotted border.</p>

<p class="secondparagraph">The text in this paragraph has a letter-spacing of 3px.</p>

Note the value in italics and how it has to correspond. So, how will the code look like on the site?

This paragraph has a dotted border.

The text in this paragraph has a letter-spacing of 3px.



The second way of setting classes is by DIV classes. They work almost the same way, so using the same example as above, add this to your style sheet:

.firstparagraph { border-style: dotted }
.secondparagraph { The text in this paragraph has letter-spacing of 3px. }

And somewhere between the <body> and </body> tags of my HTML source, I'll type this:

<DIV class="firstparagraph">This paragraph has a dotted border.</div>

<DIV class="secondparagraph">The text in this paragraph has a letter-spacing of 3px.</div>

Just like using paragraphs, note the value in italics and how it has to correspond. Now, instead of 'p', it is 'DIV'. In terms of look, it will appear exactly the same on your site as using the first method. It's just a matter of preference :)


back to top

★IDs
Classes and IDs actually work the same way, but the difference between them is that IDs are unique will can only be used once in your HTML source, whereas classes can be repeatedly used throughout the HTML source of your webpage.

Let's try setting a particular paragraph to have a background-color of #999966 and to have all its text transformed to be capitalized (meaning the first letter of every word is in uppercase). In the CSS, add on this:

p#coolparagraph { background-color: #999966; text-transform: capitalize }

Corresponding code in the body of your site (placed between <body> and </body> tags):

<p id="coolparagraph">This paragraph has a background-color of #996666 and all the words have been capitalized.</p>

And your paragraph will look like this!

This paragraph has a background-color of #996666 and all the words have been capitalized.


back to top

★Positioning
There are two kinds of positioning: relative and absolute.

Relative positioning is used when you want to adjust a header, for instance, from where it will normally be by default to a different position (e.g. moving it left by 10px). When positioning, there are two key elements - TOP and LEFT.

Here's an example to shift a paragraph down by 10px and right by 5px, relative to where it is originally. This adjustment is done to the 'paragraph' section of the style sheet.

p
{ position: relative;
top: 10px;
left: 5px; }

Note:
To shift right, insert a positive value for 'left:'
To shift left, insert a negative value for 'left:'
To shift down, insert a positive value for 'top:'
To shift up, insert a negative value for 'top:'


The second kind of positioning is absolute positioning. This sets the exact coordinates of where your item should be placed on your webpage. Similar to relative positioning, the two important elements are TOP and LEFT.

Here they basically mean: how many pixels from the TOP of the page and how many pixels from the LEFT hand side of the page.

Let's say we want to position (absolute) headers (h1) to 150px from the top and 455px from the left. This is how the code will look like (add this to the 'header' section of the style sheet).

h1
{ position: absolute;
top: 150px;
left: 455px; }

Positioning can also be used with classes and IDs. For example, let's say we were to set a DIV class called 'image' with particular border specifications. We can now also specify where the image will appear:

.image
{ border-style: dashed;
border-width: 2px;
 
position: absolute;
top: 150px;
left: 455px; }

Hence, between the <body> and </body> tags, we can type:

<DIV class="image"><img src="image_example.jpg"></DIV>
and we can expect to find our image called 'image_example.jpg' located at 150px from the top and 455px from the left with the specified border properties.


back to top

★Display
Display is a cool property that allows you to play around with the format of your HTML objects, be it links, paragraphs, headers, or whatever! Here's how it works:

display: block causes a particular HTML object (e.g. paragraphs) to be aligned in blocks so they'll look really neat and tidy.
display: inline causes a particular HTML object to be aligned along the same line.

Here's an example to help you visualize better:

p { display: block }
a { display: inline }

I'll test this by putting the following between the <body> and </body> tags:

<p>These paragraphs are set to be in a block.</p>
<p>These paragraphs are set to be in a block.</p>
<p>These paragraphs are set to be in a block.</p>
<p>These paragraphs are set to be in a block.</p>
 
<a href="http://www.mind-sketch" target="_blank">These</a>
<a href="http://www.mind-sketch" target="_blank">links</a>
<a href="http://www.mind-sketch" target="_blank">should</a>
<a href="http://www.mind-sketch" target="_blank">appear</a>
<a href="http://www.mind-sketch" target="_blank">inline</a>

Click here to see how the above code will look like.


back to top

★Float
Float is used for adjusting images when they are placed together with a paragraph of text. This comes in useful when you don't want the image to appear above the text, but instead you would want the text to wrap around the image.

CSS code example:

img.floatLeft
{ float: left;
margin: 2px; }

img.floatRight
{ float: right;
margin: 2px; }

and this is the HTML code that goes between the <body> and </body> tags:

<img src="your_image.jpg" border="0" class="floatLEFT">
<p>Your text here.</p>

<img src="your_image.jpg" border="0" class="floatRIGHT">
<p>Your text here.</p>

This is how it looks:

This text wraps around the image which can be found at the left hand side because the CLASS is set to be 'floatLEFT'. This text wraps around the image which can be found at the left hand side because the CLASS is set to be 'floatLEFT'. This text wraps around the image which can be found at the left hand side because the CLASS is set to be 'floatLEFT'. This text wraps around the image which can be found at the left hand side because the CLASS is set to be 'floatLEFT'.

This text wraps around the image which can be found at the right hand side because the CLASS is set to be 'floatRIGHT'. This text wraps around the image which can be found at the right hand side because the CLASS is set to be 'floatRIGHT'. This text wraps around the image which can be found at the right hand side because the CLASS is set to be 'floatRIGHT'. This text wraps around the image which can be found at the right hand side because the CLASS is set to be 'floatRIGHT'.


back to top



HTML Tutorials    CSS    Class    ID    Position    Display    Float