Css

From miki
Revision as of 14:46, 16 January 2016 by Mip (talk | contribs) (→‎Web fonts)
Jump to navigation Jump to search

References

Specifications
W3Schools
Compatibility

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

How Cascading Works

Quick and simplified overview:

  • First, inherited properties (from parent object)
  • Second, properties for that objects, taking account override (according to property specificities).
  • !important keyword, etc.

More information:

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.

Web fonts

web fonts allows for rendering pages using fonts that are not available on the client, but downloaded from the server. It uses CSS3 tag @font-fact.

Reference:

  • If uploaded fonts contains special characters, select No subsetting, or font squirrel will strip these glyphs from the font package.
  • Using @font-face (CSS tricks to maximize browser compatibility, thorought analysis)
Minimum code

Add to your stylesheet: 

@font-face {
    font-family: 'Chess Merida Unicode';
    src: url('chess_merida_unicode.ttf');
}

Note: If the path does not work, try with a relative path instead (url('./chess_merida_unicode.ttf')), but it should works without it [1]. Also, simple or double quotes in url are optional.

Troubleshooting
  • Fonts must be in same directory or subtree. Not on another site or up tree! [2]
@font-face {
    font-family: 'Chess Merida Unicode';
    src: url('../chess_merida_unicode.ttf');      # BAD! THIS WILL FAIL IN FIREFOX
}

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=8074"