Difference between revisions of "Cascading Style Sheets"

From PeformIQ Upgrade
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 28: Line 28:
* [http://www.csszengarden.com/ CSS ZenGarden]
* [http://www.csszengarden.com/ CSS ZenGarden]
* [http://www.cameraontheroad.com/?p=189 Camera on the Road Site]
* [http://www.cameraontheroad.com/?p=189 Camera on the Road Site]
* http://wdvl.internet.com/Authoring/Style/Sheets/Meyer/


=Example Sites=
=Example Sites=
Line 37: Line 38:


* http://www.tizag.com/cssT/reference.php
* http://www.tizag.com/cssT/reference.php
* http://www.htmldog.com/guides/cssadvanced/
* http://www.htmldog.com/guides/cssadvanced/atrules/


=Tutorials=
=Tutorials=
Line 50: Line 53:
* http://www.htmlgoodies.com/beyond/css/
* http://www.htmlgoodies.com/beyond/css/
* http://www.thenoodleincident.com/tutorials/css/
* http://www.thenoodleincident.com/tutorials/css/
 
* http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
 
* http://www.bigbaer.com/css_tutorials/
 
* http://www.d.umn.edu/is/support/Training/Online/webdesign/css.html


=Incorporation into HTML=
=Incorporation into HTML=
Line 74: Line 77:
</pre>
</pre>


=CSS Syntax=
=Syntax=
 
Define attributes to be associated with an HTML tag as follows:
 
<pre>
<HTML tag> {  <CSS Property> : <Value> ; }
</pre>
 
eg.
 
<pre>
  body  {
    background-color: blue;
    background: url(/img/rock.gif);
  }
  p  {
    color: white;
  }
</pre>
 
==Using CSS Classes==
 
Using classes is simple. Add an extension to the typical CSS definition and make sure you specify this extension as the class in your HTML.  For example.
 
CSS Code:
<pre>
p.first{ color: blue; }
p.second{ color: red; }
</pre>
HTML Code:
<pre>
<html>
<body>
<p>This is a normal paragraph.</p>
 
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
...
</pre>
 
Here is a more complex example where overloading is used:
 
CSS Code:
<pre>
p{ color: red; font-size: 20px; }
p.first{ color: blue; }
p.second{ font-size: 12px; }
</pre>
HTML Code:
<pre>
<html>
<body>
<p>This is a normal paragraph.</p>
 
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
...
</pre>
 
==More Examples==
 
===background-color===
 
<pre>
h4 { background-color: white; }
p  { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
<pre>
 
===background-image===
 
<pre>
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }
</pre>
 
<pre>
p { 
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 { 
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}
ol { 
background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul { 
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}
</pre>
 
==Font==
 
====Colour====
<pre>
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
</pre>
 
====Family====
 
<pre>
h4 { font-family: sans-serif; }
h5 ( font-family: serif; }
h6 { font-family: arial; }
</pre>
 
====Size====
 
<pre>
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
</pre>
 
====Style====
 
<pre>
p { font-style: italic; }
h4{ font-style: oblique; }
</pre>
 
====Weight====
<pre>
p { font-weight: 100; }
ul{ font-weight: bolder; }
</pre>
 
====Variant====
<pre>
p { font-variant: small-caps; }
</pre>
 
===Padding===
 
<pre>
p {padding: 15px; border: 1px solid black; } 
h5{padding: 0px; border: 1px solid red;}
</pre>
 
<pre>
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
</pre>
 
 
<pre>
p { padding-left: 5px; border: 1px solid black; }
h5{
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 13px;
    padding-left: 21px;
    border: 1px solid red;
}
</pre>
 
Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.
 
When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage.
 
<pre>
p {
    padding: 5px 15px;
    border: 1px solid black;
} 
h5{
    padding: 0px 5px 10px 3px;
    border: 1px solid red;
} </pre>
 
===Margin===


Similar to padding but outside rather than inside object border.
See [[CSS Syntax]]


<pre>
=Documents=
p {margin: 5px; border: 1px solid black; } 
h5{margin: 0px; border: 1px solid red;}
</pre>


<pre>
* [http://www.performiq.com.au/kb/images/CSS2.pdf Cascading Style Sheets, level 2 CSS2 Specification]
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
</pre>
 
<pre>
p { margin-left: 5px; border: 1px solid black; }
h5{ margin-top: 0px;
margin-right: 2px;
margin-bottom: 13px;
margin-left: 21px;
border: 1px solid red; }
</pre>
 
<pre>
p {margin: 5px 15px;
border: 1px solid black; } 
h5{margin: 0px 5px 10px 3px;
border: 1px solid red;}
</pre>
 
===Border===
 
http://www.tizag.com/cssT/border.php
 
<pre>
p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
</pre>
 
===Lists===
 
http://www.tizag.com/cssT/list.php
 
<pre>
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
</pre>
 
<pre>
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
</pre>
 
<pre>
ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}</pre>
</pre>
 
===Links===
 
A link has four different states that it can be in. CSS allows you to customize each state. The following keywords are used as pseudo-class modifiers of an attribute to modify its appearance in that state:
 
* link - this is a link that has not been used, nor is a mouse pointer hovering over it
* visited - this is a link that has been used before, but has no mouse on it
* hover - this is a link currently has a mouse pointer hovering over it/on it
* active - this is a link that is in the process of being clicked
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
<pre>
</pre>
 
==CSS Pseudo-Classes==
 
<pre>
a:(STATE'S NAME) { attribute: value; }
</pre>
 
Eg.
 
<pre>
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }
</pre>
 
or
 
<pre>
a:link {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
 
a:visited {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
 
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}
</pre>
 
==CSS Layers==
 
See http://www.tizag.com/cssT/layers.php
 
==Classes vs. IDs==
 
The W3C defines class ID as "a unique identifier to an element".
 
See http://www.tizag.com/cssT/cssid.php
 
<pre>
p#Ex1 { background-color: white; }
p#Ex2 { text-transform: uppercase; }
</pre>
 
<pre>
<p id="Ex1">This paragraph has an ID name of
"Ex1" and has a white CSS defined background</p>
<p id="Ex2">This paragraph has an ID name of
"Ex2" and has had its text transformed to uppercase letters.</p>
</pre>
 
Suggested approach is to use IDs when there is only one occurrence per page.  Use classes when there are one or more occurences per page.
 
eg.
 
* Menu - div#menuPane
* Content - div#content
 
==Block vs. Inline Display==
 
See http://www.tizag.com/cssT/display.php
 
<pre>
a { display: block; }
p { display: inline; }
</pre>
 
<pre>
p.show { display: block }
p.hide { display: none; }
</pre>




Latest revision as of 15:41, 21 March 2008

Full Name

Cascading Style Sheets - Otherwise known as CSS

Information

A scripting language used to describe the presentation of structured documents. A structured document is a document whose sections are clearly defined and categorized. A program presenting the document can present it in different styles because the content has been categorized. One common style sheet language with widespread use is CSS (Cascading Style Sheets), which is used to style documents written in HTML, XHTML, SVG, XUL, and other markup languages. One of the most attractive features of structured documents is that the content can be reused in many contexts and presented in various ways. Different style sheets can be attached to the logical structure to produce different presentations.

When used in conjunction with HTML 4.0 (or later) and Javascript embodies what is known as Dynamic HTML or DHTML

Related Links

Also referred to by the abbreviation, CSS

Wikipedia Articles

Other Links

Example Sites

Syntax References

Tutorials

Incorporation into HTML

Incorporate stle sheets by inclusion of a file as follows: 

<link href="/css/common.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />

Note the different media types...

The successful load of CSS files can be verified with Javascript as follows: 

  <script type="text/javascript">
    try {
      DynamicCss.addCssUrl('/css/print.css', 'print');
    } catch(e) {}
  </script>

Syntax

See CSS Syntax

Documents

Retrieved from "https://performiq.com/kb/index.php?title=Cascading_Style_Sheets&oldid=1838"