| CSS: Cascading Style Sheets. |
|
CSS: Cascading Style Sheets.
Here are 2 examples of where the "STYLE" tag is actually places. The actual top tag should technically be <STYLE TYPE="text/css"> because there MAY be other types than "text/css" some time in the future but there is not one now and it would probably be the default anyway.
<HTML>
<TITLE>My home page</TITLE>
<STYLE>
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
---------- the same with "text/css"
<HTML>
<TITLE> My home page</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
What do we need to know?
|
| ADDRESS, B, BLOCKQUOTE, BODY, BR, CITE, CODE, DD, DIR, DIV, DL DT, EM, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, KBD, LI MENU, OL, P, PRE, SAMP, SPAN STRONG, TT, UL, VAR, |
|
CSS Properties There are only so many properties and each can have one or more values. Font Properties Color and Background Properties Text Properties Table Properties Padding ( space between the border and it's content in length or percentage) {padding: 2px} Padding will be 2 pixels on each side. In an other case: {padding: 8px 3px 6px 4px} (Remember: top center, than clockwise) Bottom padding will be 6 Top padding will be 8 pixels; Right padding will be 3 pixels. bottom padding will be 6 pixels; left padding will be 4 pixels. Top Padding { padding-top: 0.3em } Right Padding { padding-right: 10px } Bottom Padding { padding-bottom: 2em } Left Padding { padding-left: 20% } Border (A generic term) like: { border: solid 0.5em } or { border: solid thick red }. Border Width (Value: thin | medium | thick | length) Top Border Width or Right Border Width or Bottom Border Width or Left Border Width {border-top-width: medium; border-right-width: thick; border-bottom-width: thin; border-left-width: 10px;}. Border Color {border-color: black; } . Border Style {border-style: dotted} . (Values: none | dotted | dashed | solid | double | groove | ridge | inset | outset) Top Border or Right Border or Bottom Border or Left Border (Style or color) Width (Values: length | percentage | auto ) { width: 100px }. Height (Values: length | auto ) { height: 100px } . Float { float: left }, { float: right }, { float: none }, (With a value of 'left' the element [normally an image] will be moved to the left and the text will wrap on the right side of the element.) Clear { clear: none }, { clear: left }, { clear: right }, { clear: both } (Defines where floating elements are NOT allowed. The area is 'Clear') . Classification Properties Measurements |
GENERAL FORM (there are shortcuts)
<STYLE TYPE="text/css">
<!--
Selector (s) {Property: Value
; Property: Value ...
}
-->
</STYLE>
Colors can usually be SOME names like red, blue but almost always by HEX
like #FF09A3
Sizes MAY be by "em", "%", (in the case of font "pt")
<STYLE TYPE="text/css">
<!--
p
{font-family: Helvetica, Geneva; /* font-family: Arial, serif;
The same idea as in "face" for the FONT tag */
font-weight: bold; /* font-weight: normal; */
font-size: 12pt; /* Like type setters points - 72 = an inch
on the screen it will be sort of like that */
font-style: italic; /* font-style: italized; */
font-variant: normal;
line-height: normal;
}
-->
</STYLE>
Margins
<STYLE TYPE="text/css">
<!--
BLOCKQUOTE {
margin-top: 1em;
margin-right: 0.5em;
margin-bottom: 2em;
margin-left: 0.4em;
}
-->
</STYLE>
The "em" unit is on a scale relative to the font size. And "1em" is a
margins as high as the font size that us used there
SHORTCUT:
BLOCKQUOTE {
margin: 1em 0.5em 1em 0.4em;
}
It goes from the top, than clockwise.
margin: 1em 0.5em 2em 0.4em;
| | | |
| | | |==> (your) Left Margin
| | |
| | |==> Bottom Margin
| |
| |==> (your) Right Margin
|
|==> Top Margin
padding: 0.5em; /* This is the SAME amount on all sides */
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
|
|
! important Rules with ! important will win out over contradictory styles of otherwise equal weight. like { font-size: 12pt ! important; font-style: italic } Linking the "Style sheet" can be in a seperate file and called out. So it acts as if it was actualy written in the <HEAD>. So it can be written once and applied to lots of web pages.
To use the same styles for several Web pages you call in
a style sheet (which you wrote) and add a few special ones
<STYLE TYPE="text/css">
<!--
<link rel="stylesheet" href="style.css">
I { color: green }
U { color: red ; font-size: 120% }
H1 { color: green }
H2 { color: blue }
H3 { color: red }
LI { color: red }
PRE { color: blue }
-->;
</STYLE>
ID This is where a particular "Selector" "Style" applies to only those IDentafied as the ones it should apply to. Also a "Style" to be used by ANY selector which is identified later. The pound sign, "#" is the key to the style you call out, and Identifying what "Selector" (tag) uses it. OK, say in the head you have:
<STYLE TYPE="text/css">
<!--
U#see1 { color: red ; font-size: 120% }
#frog { color: green }
... (other stuff here)
-->;
</STYLE>
Than in the body you have <U ID=see1>Big Underlined text</U>. and this would only apply to underlined text. The next one applies to ANY tag (AKA Selector) Say <I ID=frog>Green italized text</I> or <B ID=frog>Green bold text</B> Class Is like ID but it uses a dot (period) in place of the pound sign.
<STYLE TYPE="text/css">
<!--
.warning { font-weight: bolder; color: red; background: white }
P.warning { font-weight: bolder; color: red; background: white }
... (other stuff here)
-->;
</STYLE>
Than in the body you have:
<B CLASS=warning> Notice: Do NOT piss on the spark plug when the engine is
running.</B>
Inherentance Simple means anything within the tags named out, also gets the "value" unless specificly called out different. For example: Between <TABLE> and </TABLE> Things like <TD> and </TD> get the style that was applied to <TABLE>. |