CSS Overview - HTML

Cascading Style Sheets were created to provide a powerful, yet flexible means for formatting HTML content. CSS works much like style sheets in a word processing program—you define a “style” that contains formatting options that can be applied to document elements.

For example, consider the following code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”><html><head><title>A Sample Style</title><style type=“text/css”> h1 { color: Red; }</style></head><body> ...

Note the <style> element inside of the <head> element. It defines one style, setting the font color of all <h1> elements to red. This is the same as using the following code throughout the document, wherever <h1> elements are used:

<h1><font color=“red”>Heading Text</font></h1>

Using the preceding method (<font> tags), you would need to change every instance in the document if you later changed your mind about the formatting. Using CSS requires that you change only the style definition at the top of the document to affect all <h1> elements.

Note CSS can be a complicated beast, especially once you get into the different selector methods, inheritance, and the complete cascade picture. However, at its core it is a very simple concept: Assign formatting attributes in one place that can be easily modified later. As you read through the chapters in Part II, keep this concept in mind and resist getting bogged down in the CSS concepts that you may not need.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics