|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)
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.
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) |
