Css: Difference between revisions

From miki
Jump to navigation Jump to search
Line 115: Line 115:
|ID selectors
|ID selectors
|}
|}

== Property Override vs Inheritance ==
* First, a visual element inherits the properties of its containing parent object.
* Then, the browser seeks all CSS stylesheets for specification that applies to the visual object (i.e. those which the selector fits)
* In case of conflicts, the last settings in the CSS has precedence (TODO: confirm this). One can use <code>inherit</code> to cancel the effect of a previous specification in the CSS.


== Miscellaneous ==
== Miscellaneous ==

Revision as of 20:17, 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

Property Override vs Inheritance

  • First, a visual element inherits the properties of its containing parent object.
  • Then, the browser seeks all CSS stylesheets for specification that applies to the visual object (i.e. those which the selector fits)
  • In case of conflicts, the last settings in the CSS has precedence (TODO: confirm this). One can use inherit to cancel the effect of a previous specification in the CSS.

Miscellaneous

Using Opera DragonFly

Opera DragonFly is a powerful tool to write / debug CSS:

  • Browse rapidly and easily through all CSS properties of any visual object, and get detailed view on how they are computed.
  • Easy access to CSS property documentation.

Font size

  • Use property font-size to define the font size of a given visual element.

Short reminder on font sizes:

  • pt (points) is defined as 1/72 of screen inch. For 96 dpi resolution (i.e. 96 pixels per inch), we have 1pt=1.333px.
  • px (pixel) the smallest graphic element on the screen. The number of pixels (or dots) per inch (DPI) gives the screen resolution. Nowadays DPI is usually equal to 96.
  • em (for the letter M) is a unit of width in the field of typography, equal to the currently specified point size. Originally 1em was the width of the capital M in the current font.

Some usual values (see also pxtoem.com):

DPI 1 pt 12pt (1 pica)
72 1px 12px
96 1.333px 16px

Note that em is a relative font size. It sets the size of current elements in function of the size of the containing parent. So 1.2em means 20% current font size of parent object.


.

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;
}
Retrieved from "https://miki.immie.org/mediawiki/index.php?title=Css&oldid=5468"