How to Use CSS for Web Page Appearance

How to Use CSS for Web Page Appearance

Images and Colors for Cascading Style Sheets Containers

Control the look of web page CSS content containers with colors, borders, and background images.

Employing an external CSS file for backgrounds and colors of CSS boxes brings the usual advantages of dividing character from the content in the HTML page code and gives steady site-wide features. The specifications are in one external file and need only one chance to apply the effect to the whole site.

How To Design Web Page Layout With CSS explains how to design CSS containers employing the Div box composition, so their size and position suit their determination

Similarly, their features can also bolster their function on a web page and produce visual departure from other containers, expressly when nesting containers.

These are easy to implement by adding attributes to the container specification list in the external CSS file.


Background Colors

The background color is a simple and efficient way to visually separate CSS containers using the color property in the div box background specification. It occurs in only one set in the apparent CSS file to determine the browser’s background color for a special CSS container.

This is the extra line in the CSS file for the list of attributes a particular div box:

background-color: lightblue ;

background-color: #add8e6;

Please specify the color by name or by its numerical code; in this example, both lines give the same color.

Like graphics commands, the host sends the frame for every pixel to the browser, causing loading time imperceptibly longer.

For readability, containers for the principal text body on a web page must have a white background and bold text, so apply this technique to group smaller containers on the same page.

Background Images

There is a place for background images in CSS containers, providing designers consider their effect on web page loading times.

Combining standard text and background images is a valuable technique for page or column headers. In the screenshot of our original page portrayed below, the right column top is a miniature graphic component that sinks to white and blends with the official background color with normal content text overloading the image. Because the text is separate from the graphic, the graphic is re-useable for columns on other pages simply by changing the text. The graphic image only stacks once, proceeding for glossy passages between pages. The same applies to the image for the background image for the page header.

Adopting regular text as part of the heading for a page or column is proper for page loading concerns. It has involvements for Search Engine Optimization, SEO, as search engines scan for text content to index a page, especially headings.

It is the specification in the CSS file for a background image:

background:white URL(‘suitepics/gradheader.gif’) no-repeat top center;

There are certain parameters in this article; the first is still a fixed background color for the browser to apply if the image does not permeate the container.

Then there is the image link, and it is much milder than regular HTML image coding, with no size message, only the pathway to the image file. The web page creator is accountable for sizing the image, so it matches in the container.

The following parameter tells the browser if the image is repeated over the whole container or displayed just once. In this case, the image is shown at the top center of the image, as indicated by the last two parameters. Small images can be repeated to provide a patterned or textured background with minimal impact on loading times.

Alternatively, the parameters can be separately declared:

background-color: white;



background-position:top center;


A border area separates each container from its surroundings by with the available width, styles colors optional. Each side of the rectangular text box can have these attributes specified individually, so designers have the freedom to create partial borders.

Figures are similar to borders and are employed to add a strange border form around a container; only it is implemented to all parties, there are no unfinished outlines. Outlines are spread around the outside of the border area.

The size and style of the border are used to provide visual clues to the reader about the association of nested containers and their contents.

Padding and Margins

These control the spacing of content around the inside and outside edges of the container.

Padding is the interior spacing, and margins are spacing around the outside of the container. Margins increase the adequate size of the container and add to the width or height of the container when designing nested containers.

Padding and margins provide white space to create soft barriers between content items. Designers often specify a more considerable distance between objects that are unrelated than the space between related entities. The term white space has a print heritage, and the color on a web page is usually the default background color of a container.

CSS Container Specification



float: right;

background-color: white;

width: 18%;

margin-top: 20px;

margin-right: 5px;

padding: 10px;

border: 1px solid gray;


This container is a simple box on the right side of the page, ideal for text with a subtle solid border on all sides of the box. The margins show how to space the box differently from the surrounding content at the top and the right side. All around the box, the content is 10 pixels away from the border, using the white space as part of the visual dividing line between content items.

Colors and images are powerful visual tools for web design but should be used sparingly to avoid a cluttered page. If there are too many elements, they compete with each other for the reader’s attention, and the page’s focus becomes unclear to the reader.


Leave a Reply

Your email address will not be published.