How to Create and Style CSS3 Borders, Heights and Widths

CSS Properties of Borders and Height and Width

In early versions of HTML and CSS, the only way you could create an attractive border around your tables or div tags was to use images. As you can imagine, this was a nightmare for designers who needed to align each image with surrounding image borders. If you wanted rounded borders on the corners of your tables, you needed to create an image that aligned with the top, bottom and sides of your table or div tags. When newer styles of CSS and HTML were introduced, the hassle of borders was remedied and now designers can use premade CSS classes to create a border around an HTML element. These borders can be a simple solid or dashed line, or you can use images with your designs with less hassle than the early days of website design.

CSS 3 and Border Properties

Older styles of CSS let you define plain borders such as a solid line or a dotted line that surrounded a table or div tag. This works for very simple pages, but it doesn't work for current designs. Current designs call for images, but knowing how to use simple borders using CSS is still useful in some applications. With simple, standard CSS borders, you can define a style (dotted or solid), a color and a width. The following CSS class defines a solid green line with a 1px width that surrounds a div tag.

div.mybox {
border: 1px solid green;
}

In the above CSS class, you must define a div tag with the class property "mybox." The "border" property tells the browser to use a border on the top, bottom, left, and right sides of the div container. The following HTML shows you how to implement the above CSS class.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<div class="mybox"> This div container has a solid green line on all sides. </div>

</body>

</html>

CSS also lets you create borders by defining a border and style for each side. For instance, you might want a solid line of the left side of the div container, but you want a dotted line on the right side. Each side of a container can have its own border style defined. Take a look at the following CSS style that defines a border style for each side of the "mybox" div container.

div.mybox {
    border-top-style: solid;
    border-right-style: dotted;
    border-bottom-style: solid;
    border-left-style: solid;
}

In the above CSS declaration, all sides of the div container has a solid line except the right side, which uses a dotted line. This granular declaration lets you mix and match borders as you need them. Incidentally, the border property can also used the "dashed" value, which uses hyphens as a dotted lined border.

With CSS 3, you can round your borders on all corners. The "border-radius" property makes it easier than with previous CSS versions. For instance, suppose you want to create a green border around the entire div container, but you want to round each corner. The following CSS class rounds the borders for you without much coding.

div.mybox {
border: 1px solid green;

border-radius: 20px;
}

When you're new to CSS and border styling, you might need to test your border-radius styles until you figure out the right degree of rounded corners. Higher pixel numbers in the radius value create a larger depth in the rounded areas. For instance, a value of 3px will have slightly rounded corners with the 20-pixel value has a much more rounded corner. Use the above code and change the pixel value in the "border-radius" property to see the differences in styles.

In most cases, you want to use more than just a solid line around a container. You usually want some type of image to make the web page design more attractive. With CSS, you can define an image as a border. With CSS 3, images are handled without the need of aligning them. You might need to adjust your images to ensure that they look right on the page, but you no longer need to create tables to lay out images for your content containers.

CSS 3 has a property called "border-image." This property lets you use an image for your borders instead of using predefined values. The following CSS code shows you how to use an image from your local web server.

div.mybox {
border-image: url('/myimages/myborder.png') round;
}

Notice the "round" value. This value tells the browser how to lay out the image. What if an image is too large for the space given? What if it's too small? How should the image be tiled if it's too small? Should it fill the space or just display once? If you recall, a background image also had the same properties and styles assigned to it. With background images, you usually tiled one image across the page. With borders, you usually want to display the image once or tile it horizontally or vertically, depending on which border side you're working with.

With the "round" value, the image is automatically scaled to fit the area. This is useful if you have one image and you want to use it with different sections of you pages. In some cases, you might not want the image to scale but instead, you want it to tile and fill the area. The "repeat" value repeats the image until it fills the area. You can also choose to use one image and stretch it across the area. The "stretch" value is the default, but you can also manually define the property value. Stretching images is usually discouraged, because it pixelates the image, which means that the quality of images is reduced.

Interested in learning more? Why not take an online CSS course?

Height and Width Properties

Another common design technique is adjusting height and width of your elements. In almost every web design, height and width must be defined for containers that contain your content. Whether it's an image or a div container that holds some text content, you need dimension properties to adjust the way they render on your pages.

There are several ways you can set your height and width. You can use percentages, maximum and minimum values, and you can fill a page or container. For instance, your main body is usually set to fill a page to ensure you use all the web page real estate available for your content.

First, we'll cover the basics of these two dimensions. Suppose you have a div tag that you want to fill the entire page. You can set the value as 100%, which means you want the div tag to take up 100% of its container, which in this case is the page. The following CSS represents the class you can define.

div.maincontainer {
width: 100%;
}

The above code tells the browser to make the width of the "maincontainer" class element the full width of its container. It's important to note that making a width 100% does not fill the page. The 100% value fills the container. For instance, suppose your body only takes up 50% of the page. If you then placed the "maincontainer" div within this body tag, it would take up 100% of the body container, which in this example is only 50% of the page. This is an important factor when designing your pages.

CSS lets you define a specific pixel amount. If you know that you want a div container to only take up 100 pixels, you can statically define this width in your CSS designs. For instance, the following code takes up 100 pixels of a page.

div.subcontainer {
width: 100px;
}

Just like the width property, you can also set the height property. The height dimension works in the same way as the width property. It's common to combine these dimensions together to define a container's overall shape. The following CSS class sets the width to 100% but keeps the height at 100 pixels.

div.subcontainer {
width: 100%;

height: 100px;
}

Of course, if you want to set a container to fill its parent container fully, you would set both the width and height to 100%.

Using borders and dimensions is a part of most web design projects. You'll need to design each of your elements to fit the page properly. For instance, you might have a product section of your web page that then has a small container that displays prices. Borders and dimensions control the ways these elements and containers display on your pages, which in turn define the location of the elements. It usually takes some testing and practice to understand how these properties work, so set up your HTML pages and use different pixel and percentage values to see how they work with your browser.

CSS Pseudo Elements

CSS not only lets you control styles of an element, but it also lets you control styles for parts of an element. For instance, you might want to create a different style for the first letter of a paragraph. CSS pseudo elements let you set a style for the first letter and apply another CSS class to the rest of the element content.

Setting a First Letter Style

Have you ever noticed that in some books the first letter is slightly larger than the rest of the text? You can emulate this type of layout with CSS styles using pseudo elements. The "first-letter" pseudo element applies a specific style to only the first letter of a container. Usually, this container is a div or paragraph element. Take a look at the following CSS declaration.

div {
color: #000000;
font-size: initial;
}

div::first-letter {
color: red;
font-size: xx-large;
}

Notice the first part of the pseudo element is the container. Then, two colons and the specification for the section of the container are defined. This example uses the "first-letter" pseudo element, which will apply the style to the first letter only. The first CSS declaration is then applied to the rest of the div container. The rest of the container uses the browser default size, which is normally 16 pixels. The color is set to red for the first letter, and then the rest of the text uses black font, which is specified in hexadecimal notation.

Setting the First Line Style

Some web designs call for a difference in style for the first line of text. Instead of just the first letter, a style is set for the entire text of the first line of text. For instance, you might want to use all capital letters in the first line of content, and then return to normal case for the rest of the content. This is typically done when you have a custom font for the first part of a paragraph and then a normal font for the rest of the text. You see this type of style on sites such as photography or gaming websites.

The following CSS code uses the same default div style as the previous declarations, but uses the "first-line" pseudo element for the rest of the div containers content.

div {
color: #000000;
font-size: initial;
}

div::first-line {
color: red;
font-variant: small-caps;
}

In this example, the same red color is used for the first line with small caps as the font variant. This property hasn't been seen before thisarticle, but it's a useful style when you want to create custom styles for text throughout your designs.

Using Images as Pseudo Elements

Most web designs use images throughout their pages. For instance, you might want to use an image as the starting element in a paragraph. Instead of setting a first letter property, you can set an image. Have you ever noticed that most blog sites have an image that is set as the beginning of a paragraph of text? This is done using the "before" pseudo element. The property is the "content" property, and this property sets the image URL. Take a look at the following CSS declaration.

p::before {
content: url(paragraphstart.png);
}

The above CSS class places the "paragraphstart.png" image directly before the paragraph text. This also helps you avoid cumbersome div placements that were used prior to CSS pseudo elements.

CSS has an "after" pseudo element as well. This pseudo element adds an image after the content. The declaration is similar to the "before" pseudo element, but it uses the "after" property instead. The following CSS code is an example of the "after" CSS pseudo element using the same image as we used in the previous sample.

p::after {
content: url(paragraphstart.png);
}

Pseudo Elements and HTML Links

Pseudo elements are also used with link styles. If you remember old websites, you probably remember that the default text color of a link was blue and any links you had already visited were colored purple on the page. With new CSS styles and pseudo elements, you can change these default colors to match the current layout and design of your pages to make them more attractive. This is accomplished using the "link," "visited," and "active" pseudo elements.

Most new designers recognize "link" and "visited" directives, but "active" is sometimes a new concept. The "active" pseudo element defines when a mouse is actually clicking on a link. You might click links quickly and not even realize that when you click a link, a different color is set than after you've visited the site. Just remember that you can set a color for a link, a color for when the mouse button is clicking the link, and when the user opens your web page and has already visited a particular link.

The following CSS declarations show you how to set each of these pseudo elements and their respective properties.

a:link {
color: white;
}

a:active {
color: green;
}

a:visited {
color: black;
}

a:hover {
background-color: yellow;
}

There are four defined pseudo elements in the above CSS code. When you open a page, the link font color is set to white. Of course, you should have a dark background color to use a white font. The default background color is white, so you'll need to define a background color for the container for the link text to be visible to your viewers.

The next declaration is the active color. When you click a link, the "mouse down" action triggers the CSS to change the font color to green. After you release the mouse button, the web page opens and the link now becomes a "visited" link. If you return to the previous page, you'll noticed that the visited link text changes to a font color of black.

Finally, we did not mention the "hover" pseudo element. This pseudo element gives your visitors a visual aid in recognizing links. The browser already switches the mouse icon to a hand when the viewer hovers over a link, but it helps users identify links throughout your pages when they can hover over text and the design changes. This is especially useful when you want to engage users and help them recognize links to pages such as products or important content pages.

Setting Child Paragraph Styles

Sometimes, you want to change styles of a paragraph element within a specific container. You can perform this using the "first-child" pseudo element. The first-child pseudo element selects the first <p> tag within a container and applies styles to this paragraph. Instead of setting a style to the first line of a paragraph, you can use the <p> tag to create text and apply a CSS style to this first paragraph.

The following CSS declaration shows you how to use this pseudo element.

p:first-child {
background-color: yellow;
}

In this example, the first child element of the <p> tag is set with a background color of yellow. You can also apply other styles to the pseudo element and define other parent elements for your styles. For instance, suppose you want to set the background for the first list in the paragraph element. You would apply a similar style, but take a look at the changes in the following example.

p:first-child li {
background-color: yellow;
}

This chapter covered most of the pseudo elements in CSS. You will mostly use the pseudo element that involves images and the first letter of a paragraph, but you might find that knowing the others is useful if you run into a tricky design situation. These styles are typically used sparingly, because other CSS styles also perform the same function. For instance, a div container is set to a specific design attribute and then another div container is used for a separate style. The way you perform your layout is really a matter of your own preference, but it's good to know how to use pseudo elements in case you need to edit or work with another coder's CSS code.