Css: Difference between revisions
Line 173: | Line 173: | ||
@font-face { |
@font-face { |
||
font-family: 'Chess Merida Unicode'; |
font-family: 'Chess Merida Unicode'; |
||
/* Make sure to use relative path, such that fonts is searched relative to css stylesheet */ |
|||
src: url('chess_merida_unicode.ttf'); |
src: url('./chess_merida_unicode.ttf'); |
||
} |
} |
||
</source> |
</source> |
Revision as of 04:42, 3 January 2016
References
- Specifications
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
- CSS 3 - CSS Fonts Module Level 3 (
font-family font-weight font-stretch font-style font-size ...
)
- W3Schools
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:
- !important CSS Declarations: How and When to Use Them
- CSS Specificity And Inheritance
- CSS Specificity: Things You Should Know
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';
/* Make sure to use relative path, such that fonts is searched relative to css stylesheet */
src: url('./chess_merida_unicode.ttf');
}
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;
}