Moronacity Journals:  Catholic | Cooking | Cycling | Health | Horse| Tech

Moronacity Tech Journal » CSS

Customizing the Body Using CSS

By Diane Ursu
Style sheets are incredibly useful when creating a uniform look across multiple web pages. CSS also simplifies the coding within each page.

The first step in using a stylesheet is to create the look of the web page by defining each tag in the stylesheet. Let’s start with the basic elements.

Currently, the web page displays the default browser settings because the style.css file is blank:

What we see when we visit a web page is the information that is displayed between the <body> and </body> tags within its code. Generally, the font and background are the same throughout the page, so it is easiest to define these for “body” within the stylesheet.

In the style sheet, each tag is defined by listing its name and including its information between brackets. For example, we can begin defining the “body” as such:

body { }

Now, let’s create the body style by defining its different elements within the brackets. The most basic parts of a font are:
  • font family: arial, verdana, sans-serif, for example;
  • font size: how large or small the font will be, described using traditional font size such as -1, 0, 1, 2, 3, 4, etc.; or using sizes such as 10pt, 12pt, 14pt, etc.; or 10px, 12px, 14px, etc; some argue that px is more exact than pt, and should be used, instead;
  • weight: light, medium, bold, etc.;
  • color: black, red, #ffffff, etc.
Place each element on its own line. Each line should end with a semicolon (;). In the following example, the font will be black, arial, and of normal weight, which the browser should automatically display.

body { font-family: arial; font-size: 12px; color: black; }

This makes the web page look like this:

Since the browser defaults to the desired weight, I did not include it in the body tag; however, not all browsers are the same, so some prefer to include the weight.

body { font-family: arial; font-size: 12px; font-weight: medium; color: black; }

The space after the colon is not necessary, and is often included to make it easier for reading during editing. Therefore, the following, without spaces, is also correct:

body { font-family:arial; font-size:12px; font-weight:medium; color:black; }

In fact, it could also be written as such:

body {font-family: arial; font-size: 12px; font-weight: medium; color: black;}

The body element in style.css defines the most basic elements of the page. Even the title, which is between <h1> and </h1> tags, displays the arial font of the body; however, the size does not override the default <h1> size. As we will see in the next article, other elements can be defined which will override the body specifications for specific items.

Previous: Creating Cascading Style Sheets

Do you have a comment, question, or advice?