Css: Difference between revisions
Jump to navigation
Jump to search
| Line 5: | Line 5: | ||
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools] |
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools] |
||
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools] |
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools] |
||
== Syntax == |
|||
=== External === |
|||
''External CSS'' is a file that contains only CSS code and is saved with a '''.css''' file extension. This CSS file is then referenced in your HTML using the <code><link></code> instead of <code><style></code>. |
|||
Content of file <tt>test.css</tt>: |
|||
<source lang="css"> |
|||
body{ background-color: gray;} |
|||
p { color: blue; } |
|||
h3{ color: white; } |
|||
</source> |
|||
Example html file using the stylesheet above: |
|||
<source lang="html4strict"> |
|||
<html> |
|||
<head> |
|||
<link rel="stylesheet" type="text/css" href="test.css" /> |
|||
</head> |
|||
<body> |
|||
<h3> A White Header </h3> |
|||
<p> This paragraph has a blue font. |
|||
The background color of this page is gray because we changed it with CSS! </p> |
|||
</body> |
|||
</html> |
|||
</source> |
|||
=== Internal === |
|||
When using ''internal CSS'', you must add a new tag, <code><style></code>, inside the <code><head></code> tag. |
|||
<source lang="css"> |
|||
<html> |
|||
<head> |
|||
<style type="text/css"> |
|||
p {color: white; } |
|||
body {background-color: black; } |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<p>White text on a black background!</p> |
|||
</body> |
|||
</html> |
|||
</source> |
|||
=== Inline === |
|||
To add style to a given HTML element, just specify the desired CSS properties with the HTML <code>style</code> attribute: |
|||
<source lang="html4strict"> |
|||
<p style="background: blue; color: white;">A new background and font color with inline CSS</p> |
|||
</source> |
|||
== Examples == |
== Examples == |
||
Revision as of 11:23, 16 September 2010
References
- Specification
- W3Schools
- CSS Reference from W3Schools
- CSS Tutorial from W3Schools
Syntax
External
External CSS is a file that contains only CSS code and is saved with a .css file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.
Content of file test.css:
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Example html file using the stylesheet above:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body>
</html>
Internal
When using internal CSS, you must add a new tag, <style>, inside the <head> tag.
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Inline
To add style to a given HTML element, just specify the desired CSS properties with the HTML style attribute:
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
Examples
/* install_log class for install log table */
table.install_log td:first-child
{
width:7.5em;
font-size: x-small;
}
table.install_log td:first-child:before
{
content:url(/miki/skins/monobook/bullet.gif);
margin-right:0.6em;
}
Selectors
See the reference here.
| Pattern | Meaning | Described in section |
|---|---|---|
*
|
Matches any element. | Universal selector |
E
|
Matches any E element (i.e., an element of type E). | Type selectors |
E F
|
Matches any F element that is a descendant of an E element. | Descendant selectors |
E > F
|
Matches any F element that is a child of an element E. | Child selectors |
E:first-child
|
Matches element E when E is the first child of its parent. | The :first-child pseudo-class |
E:link
E:visited
|
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). | The link pseudo-classes |
E:active
E:hover
E:focus
|
Matches E during certain user actions. | The dynamic pseudo-classes |
E + F
|
Matches any F element immediately preceded by a sibling element E. | Adjacent selectors |
E[foo]
E[foo="warning"]
E[foo~="warning"]
|
Matches any E element whose "foo" attribute set OR value is exactly equal to "warning" OR value is a list of space-separated values, one of which is exactly equal to "warning". | Attribute selectors |
DIV.warning
|
Language specific. (In HTML, the same as DIV[class~="warning"].) | Class selectors |
E#myid
|
Matches any E element with ID equal to "myid". | ID selectors |