<span> Tag

 

The <span> tag is an HTML tag and is used to target inline elements in a document. The <span> tag provides no visual change by itself and it works with CSS codes to style a part of a larger group. Basically CSS targets tags to style elements, but if you happen to have an element without a tag, you can wrap <span> tag around the element and then apply the id or class CSS to that element.

 

For instance to change the color of one word in a sentence, you can put <span> tag around it, then assign a class for the <span> and style it in the CSS section.

 

In the code below we are applying red color to the word "example":

 

<html>

<head><style type="text/css">
.red {color: #ff0000;}
</style>

</head>

 

<body>
This is an <span class=”red”> example </span> of class selector.
</body>

</html>

 

 

Result:

 

This is an example of class selector.

 

 

 

<div> Tag

 

Div is short for division and the <div> element is a block-level element that is used to divide the page into logical sections. <div> tags can hold any element inside them including text and image. Div tags are well-suited to take over from tables as a layout tool for laying out web pages.

 

Defining ID: div tags don’t have a default identity, so anytime you create a <div>, give it an id. Each unique id will be referred to in the <style> section starting with # sign, and can be styled with CSS rules.

 

 

Example:

 

<html>
<head>

<style type="text/css">
#box1 {
width: 300px;
height: 50px;
background-color: #ccff00;
}
</style>

</head>


<body>
<div id="box1">
This is a box.
</div>
</body>

</html>

 

 

Result:


This is a box.

 

 

<div> Default Size and Position

 

Anytime you create a <div> tag, it will have the following specs as default:

 

Width: 100% of the available screen width
Height: 0 pixels
Stack underneath one another (unless you position them)

 

So the first thing you need to do is to assign the following for each <div>:

  1. Width
  2. Height
  3. Background color
  4. Positioning (see next section)

 


NOTE: if you don’t assign height for a Div, it’ll stretch to accommodate its content.

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>