Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

The focus of CSS is on the HTML element. CSS answers the question of how a

tag appears to the viewer. There are two methods of working with HTML elements statically: as part of the individual tag and within a header that defines a style for all tags of the same type.

It’s a mistake to assume that all browsers render CSS precisely the same. Two browsers on the same system running the same operating system often offer slightly different presentations. In addition, it’s an error to think that a browser will provide a consistent appearance on all platforms it supports.

For example, Firefox presents slightly different displays when using Mac OS X, Linux, and Windows. A browser can also show the page differently when device constraints demand. A page shown on a smartphone screen differs from the same page shown on a PC. Think of CSS as more of a guideline than an absolute requirement.

How to work with HTML tags

One of the options for configuring the HTML tags on a page is to grab all the tags of a certain type and format them as part of a loop. That’s what the following example does.

function ChangeStyles()
{
  // Modify the <h1> tag style.
  var Header = document.getElementsByTagName("h1")
  for (var i = 0; i < Header.length; i++)
  {
   Header[i].style.fontFamily = "Arial";
   Header[i].style.fontSize = "45px";
   Header[i].style.fontWeight = "bold";
   Header[i].style.color = "green";
   Header[i].style.textAlign = "center";
   Header[i].style.marginLeft = "20px";
   Header[i].style.marginRight = "20px";
   Header[i].style.border = "medium double green";
  }
  // Modify the <p> tag style.
  var Para = document.getElementsByTagName("p");
  for (var i= 0; i < Para.length; i++)
  {
   Para[i].style.fontFamily = "serif";
   Para[i].style.fontStyle = "italic";
   Para[i].style.fontSize = "1em";
   Para[i].style.color = "blue";
  }
}

In this case, the example uses getElementsByTagName() to obtain an array of all of the elements of a particular type on a page. The example formats both the

and

tags on the page. When you have a list of these elements, you can format each element in turn by using a for loop as shown. The example shows a number of common formatting tasks, including setting element margins.

When you’re working with graphic additions, such as a border, it helps to have an understanding of where the various styles fit into the picture. For example, the margin affects the distance between the edge of the screen and the border, and padding affects the distance between the border and the content it encloses.

You should notice a few features in this example. A fontFamily property can contain a family name, such as Arial, or a generic name, such as serif. The font size can appear in pixels (px) or ems (one em is equal to 16 px), amongst other value types. You can also use relative measures for the font size, such as small.

image0.jpg

How to work with heading styles

Most developers are used to working with a

About This Article

This article can be found in the category: