CSS Rules
Home > Build > Programming
> CSS
by
Don Herion
(1)
(2)
Inline CSS
These CSS styles are applied directly
to a specific HTML tag. This gives you complete control on a specific aspect of
a Web page. Here is an example of an 'Inline CSS' in a paragraph.
| <p style="font-family: times;
font-size: 14pt;">
This paragraph will be displayed in 14 point times.
</p> |
Syntax Rules of CSS
CSS is relatively simple to master. The rules for 'External CSS' and 'Embedded
CSS' are only slightly different from 'Inline CSS.'
If you are using
'External' or 'Embedded' CSS the syntax must be contained within <style>
</style> tags inside the <head></head> tags. 'Inline' CSS is
contained within individual HTML tags themselves.
CSS is composed
of three parts, the 'Selector,' the 'Property,' and the 'Value.' Selectors are
usually HTML elements like paragraph <p>, a header <h1>, and even
classes. A 'Class' is adding a named extension to a Selector. For example - p.center
- centers a paragraph that uses a - class=center - attribute. 'Property' defines
the 'Selector.' In the example below - font-family: - is a property. 'Value' defines
the 'Property.' In the example below - times; - is the value. Always add semi-colons
to the end of value even if you are using only one style element.
| p {
text-align: justify;
text-indent: .50in;
font-size: 14pt;
font-family: times;
} |
| Selector |
p (paragraph tag) |
| | |
| Property |
Value |
|
text-align: |
justify; |
|
text-indent: |
.50in; |
|
font-size: |
14pt; |
|
font-family: |
times; |
The brackets
that enclose the 'Property' and 'Value' are called a 'declaration.' A declaration
and selector are called a 'rule.' Now anytime you add a paragraph to a Web page
using the CSS syntax above it will be justified, the first line indented .50 inches,
and the text will be rendered in the times font and at 14 pt size. If the browser
does not have the correct font it will use the system's default font.
If you wanted to added these style elements in an 'Inline CSS' you would remove
the brackets and contain your properties and values with quotation marks. This
CSS syntax will only effect the paragraph it contains.
| <p style="text-align: justify; text-indent: .50in;
font-size: 14pt; font-family: times;">
This is an example of using
inline CSS.
</p> |
This has been
only an introduction to the power of using CSS within your Web site. In the follow
up article I will reveal information on how to combine the three types of CSS,
how to uses Classes and Grouping, and provide a listing of some of the most used
CSS elements.
