- 1). Launch an HTML editor or Notepad, and paste the text shown below into the body section of a new HTML document:
<div class="contentbox1">
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
<br />
Text Text Text Text Text Text
</div>
This creates a div element that contains text. The div references a CSS class named “contentBox1” that styles the div. - 2). Paste the "contentBox1" CSS class shown below into the document's style section:
.contentbox1
{
width: 200px; height: 200px;
border-style: double; border-color: Blue; border-width: 4px;
Note the class's attributes. The width, height and border attributes set your content box's width, height and border style. These values are in pixels. The border-style attribute, set to "double" in this example, draws a double border around the box. Change the height and width attributes if you like. You can also change the border-style from "double" to other values such as "dotted," "dashed," "outset" and "none." Change the box's border size by decreasing or increasing the value for border-width. - 3). Paste the following text below the code shown in step two:
padding:10px;
background-color: #eeeeee;
}
The padding attribute sets the distance between the box's edges and the text inside. Assigning a value to this attribute allows you to give the text in your box "breathing room" and creates a margin around the text. The background-color attribute sets the box’s background color to “#eeeeee.” This is a hexadecimal representation of an HTML color that produces a light gray color. - 4). Add the CSS class shown below after the code shown in step three:
.contentbox2
{width: 200px; height: 200px;
border-style: double; border-color: Blue; border-width: 4px;
padding:10px;
background: #eeeeee url('pencil.png') no-repeat;
background-position:100% 100%;
}
This class, named “contentbox2” is identical to the “contentbox1” class except for the addition of two attributes at the end: background and background-position. The background attribute sets the background color to “#eeeeee.” The “url” attribute adds an image named “pencil.png” to the background. Replace “pencil.png” with the name of a small image file on your hard drive or the URL of an image on the Web. The background-position attribute determines where the image appears inside the box. The first value, “100%” sets the image’s location in relation to the box’s left edge. The “100%” value tells browsers to place the image in the box’s right corner. The second value, also “100%,” determines the image’s distance from the top of the box. Because both values are “100%,” the image appears in the content box’s bottom right corner. - 5). Save the document, and view it in a browser. The content box will appear on the page and display the visual characteristics set in the contentbox1 CSS class.
- 6). Return to the document, and locate the div tag in the body section. Delete the first line of the div tag and replace it with the following:
<div class="contentbox2">
The div now points to the "content2" CSS class.” Save the document, return to your browser and press “F5” to refresh the Web page. The content box will now display the image defined in the contentbox2 CSS class.
- Advertisement -
- Advertisement -