Css: Difference between revisions

From miki
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

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