Introduction to Cascading Style Sheets
Extra Credit
Notes from CSS class...
Week Four
The ID selector is used to define specific elements, and it
holds more weight in the hierarchy.
Define the ID in the external or embedded style sheet and
apply it inline. CSS uses the hash mark to name IDs:
#newitem {color:red;}
#soldout {text-decoration: line-through;}
Then apply it inline:
<LI ID="newitem">Kewl Stuff!</LI>
<LI ID="soldout">Old junk</LI>
Import an external style sheet with the following syntax.
<STYLE TYPE="text/css">
<!— @import url(mystyle.css); —>
</STYLE>
Comments
- // Here is a single-line comment
- /* If you are using multiple lines in your comments,
use this format which puts a forward slash and asterisk at the beginning
and end. */
Page Break
- <p STYLE="page-break-before: always;">
- Pseudo-selector names begin with a colon. These CSS1 pseudo-selectors
are:first-line, :first-letter, :active, :visited and :link.
A new pseudo-selector added in CSS2 is :hover.
- You can specify the rules for pseudo-elements either in the
embedded or linked external style sheet.
- CSS1 includes three pseudo-classes which can be applied to the
three anchor <A> states :active, :link and :visited.
Space
- Line-height controls the space between each line of text within a paragraph.
<P STYLE="line-height:2">
- Word-spacing will increase the space between words if you set a
positive length value, and decrease the space between words if you
set a negative length value.
<P STYLE="word-spacing:-5px;">
- Letter-spacing is used to increase or decrease the space between letters.
<p STYLE="letter-spacing: 5pt;">
- Text-indent specifies the amount of space to indent the first
line of a paragraph or other element.
<p STYLE="text-indent: 30px;">
- Vertical-align is used to set the vertical alignment of text or an
image relative to the surrounding text or images.
Vertical-align is a property applied to inline elements
such as I, B, EM, A, IMG or SPAN (not applied to elements that forces line-break).
Values used with vertical-align are
Block super
Block <B STYLE="vertical-align:super;">super</B>
Block sub
Block <B STYLE="vertical-align:sub;">sub</B>
Block baseline
Block <B STYLE="vertical-align:baseline;">baseline</B>
Block 50%
Block <B STYLE="vertical-align:50%;">50%</B>
Block 75%
Block <B STYLE="vertical-align:75%;">75%</B>
Block 10%
Block <B STYLE="vertical-align:10%;">10%</B>
Block text-top
Block <B STYLE="vertical-align:text-top;">text-top</B>
Display defines how and if an element is displayed, which can be applied to any element.
Its values are: inline, block, list-item, and none.
- block forces a line break
- inline treats the element as an inline element; cancels an expected line break
- list-item forces a line break and adds a bullet
- none turns off the display of the element and closes up the space it would have filled
White space determines how spaces in the source will be treated.
- white-space:pre presents the white space as it appears in the source.
- white-space:normal will set spacing to the normal collapsed
display common to modern browsers.
- white-space:nowrap prevents the text from wrapping unless it encounters a BR tag.
|