Css: Difference between revisions

From miki
Jump to navigation Jump to search
No edit summary
Line 52: Line 52:
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
</source>
</source>

== Examples ==
<source lang="css">
/* 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;
}
</source>



== Selectors ==
== Selectors ==
Line 131: Line 115:
|ID selectors
|ID selectors
|}
|}


== Examples ==
<source lang="css">
/* 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;
}
</source>

Revision as of 19:36, 15 January 2014

References

Syntax

External CSS

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 CSS

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 CSS

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>

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


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;
}