Css: Difference between revisions

From miki
Jump to navigation Jump to search
Line 117: Line 117:


== Miscellaneous ==
== 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 ===
=== Font size ===
* Use property <code>font-size</code> to define the font size of a given visual element.
* Use property [http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size <code>font-size</code>] 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.
* '''[http://en.wikipedia.org/wiki/Em_(typography) 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 [http://pxtoem.com/ pxtoem.com]):

{| class=wikitable
|-
!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 ==
== Examples ==

Revision as of 19:53, 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

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