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