HTML and CSS Reference
In-Depth Information
CSS rules can be placed directly within most (X)HTML tags by setting the core attribute
style to the rule. For example, to set the color and alignment of an h1 heading, we might use
<h1 style="color: red; text-align: center;"> Big Red CSS Text! </h1>
Such direct use of CSS is called inline style and is the least favorable form of CSS because of
its tight coupling to the actual (X)HTML tags.
Instead of placing rules directly within markup elements, we might more appropriately
create a rule that binds to a particular element or set of elements, which will lend itself for
future reuse. CSS rules not found within a particular tag consist of a selector followed by its
associated style declarations within curly braces. Similar to being used inline, a style rule is
composed of property names and property values separated by colons, with each style
declaration (property/value pair) in turn being separated by a semicolon. In general, the
syntax is
selector {property1 : value1; ... propertyN : valueN;}
An example rule conforming to correct CSS syntax broken out into its individual
components is shown here:
Property Name
Declaration Separation
h1 {font-size: xx-large; color: red;}
Declaration Block
N OTE The final declaration in a style rule block does not require the semicolon. However, for good
measure and easy insertion of future properties, page authors should always use semicolons after
all style properties.
CSS property names are separated by dashes when they are multiple words—for
example, font-face , font-size , line-height , and so on. Allowed values come in many
forms; from simple keywords like xx-small , strings like "Arial" , plain numbers like 0 ,
numbers with units like 100px or 2cm , and special delimited values such as URLs, url(../
styles/fancy.css) .
Given this brief CSS syntax overview, to create a style dictating that all h1 elements are
red and centered, use the following rule:
h1 {color: red; text-align: center;}
As rules are added, you may take advantage of the fact that CSS is not terribly
whitespace sensitive, so
h1 {font-size:xx-large;color:red;font-family:Arial;}
Search WWH ::

Custom Search