Css: Difference between revisions

From miki
Jump to navigation Jump to search
(Created page with '== References == * Specification ** [http://www.w3.org/TR/CSS2/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification] * W3Schools * [http://www.w3schools.com/css/css…')
 
 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== References ==
== References ==
;Specifications
* Specification
** [http://www.w3.org/TR/CSS2/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]
* [http://www.w3.org/TR/CSS2/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]
* [http://www.w3.org/TR/css3-fonts/#font-weight0 CSS 3 - CSS Fonts Module Level 3] (<code> font-family font-weight font-stretch font-style font-size ...</code>)
* W3Schools

;W3Schools
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools]
* [http://www.w3schools.com/css/css_reference.asp CSS Reference from W3Schools]
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools]
* [http://www.w3schools.com/css/default.asp CSS Tutorial from W3Schools]

;Tutorials:
* [https://flexboxfroggy.com/ Flex Box Froggy - Game to learn CSS flex]
* [http://www.cssgridgarden.com/ Grid Garden - game to learn CSS grids]
* [https://jgthms.com/css-in-44-minutes-ebook CSS in 44 minutes] (pdf)
* More [https://news.ycombinator.com/item?id=21050501 here]

;Compatibility
* [http://caniuse.com/ Can I Use ____ ?]

;Tools
* [http://www.w3schools.com/tags/ref_colormixer.asp Color mixer] (by step of 5%)
* [https://www.brunildo.org/test/index.html CSS tests and experiments]

;WTF
* [https://x.st/spinning-diagrams-with-css/ Spinning Diagrams with CSS]

== Quick reference ==
=== Fonts ===
{| class=wikitable
|-
|<source lang="css">
p { font-size: 30px; }
p { font-size: 12pt; }
p { font-size: 100%; }
p { font-size: 1.5em; }
</source>
|Set the font size
|}

== 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 <code><link></code> instead of <code><style></code>.

Content of file <tt>test.css</tt>:
<source lang="css">
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
</source>

Example html file using the stylesheet above:
<source lang="html4strict">
<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>
</source>

=== Internal CSS ===
When using ''internal CSS'', you must add a new tag, <code><style></code>, inside the <code><head></code> tag.
<source lang="css">
<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>
</source>

=== Inline CSS ===
To add style to a given HTML element, just specify the desired CSS properties with the HTML <code>style</code> attribute:
<source lang="html4strict">
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
</source>


== Selectors ==
== Selectors ==
See the [http://www.w3.org/TR/CSS2/selector.html reference here].
To be completed

{| class="wikitable"
|-
!Pattern!!Meaning!!Described in section
|-
|<source lang=css enclose=none>*</source>
|Matches any element.
|Universal selector
|-
|<source lang=css enclose=none>E</source>
|Matches any E element (i.e., an element of type E).
|Type selectors
|-
|<source lang=css enclose=none>E F</source>
|Matches any F element that is a descendant of an E element.
|Descendant selectors
|-
|<source lang=css enclose=none>E > F</source>
|Matches any F element that is a child of an element E.
|Child selectors
|-
|<source lang=css enclose=none>E:first-child</source>
|Matches element E when E is the first child of its parent.
|The :first-child pseudo-class
|-
|<source lang=css enclose=none>
E:link
E:visited
</source>
|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
|-
|<source lang=css enclose=none>
E:active
E:hover
E:focus
</source>
|Matches E during certain user actions.
|The dynamic pseudo-classes
|-
|<source lang=css enclose=none>E + F</source>
|Matches any F element immediately preceded by a sibling element E.
|Adjacent selectors
|-
|<source lang=css enclose=none>
E[foo]
E[foo="warning"]
E[foo~="warning"]
</source>
|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
|-
|<source lang=css enclose=none>DIV.warning</source>
|Language specific. (In HTML, the same as DIV[class~="warning"].)
|Class selectors
|-
|<source lang=css enclose=none>E#myid</source>
|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).
* <code>!important</code> keyword, etc.

More information:

* [http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ !important CSS Declarations: How and When to Use Them]
* [http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/ CSS Specificity And Inheritance]
* [http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ CSS Specificity: Things You Should Know]

== Tips ==
=== 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 [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.

=== Inlining tables ===
Use <code>display:inline-block</code> or <code>display:inline-table</code> to have table element flowed like regular text. Use <code>vertical-align:middle</code> to change vertical alignment.
<source lang=html4strict>
some text
<table style="display:inline-block; vertical-align:middle;">
<tr><td>4<br/>3<br/>2<br/>1<br/></td></tr>
<tr><td>abcd</td></tr>
</table>
some text
</source>

== 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 <code>@font-face</code>.

Reference:
* [http://www.html5rocks.com/en/tutorials/webfonts/quick/ webfonts overview].
* [http://www.fontsquirrel.com/tools/webfont-generator Font Squirrel Generator]
:* If uploaded fonts contains special characters, select '''No subsetting''', or font squirrel will strip these glyphs from the font package.
* [https://css-tricks.com/snippets/css/using-font-face/ Using @font-face] (CSS tricks to maximize browser compatibility, thorought analysis)

;Minimum code
Add to your stylesheet:
<source lang=css>
@font-face {
font-family: 'Chess Merida Unicode';
src: url('chess_merida_unicode.ttf');
}
</source>
Note: If the path does not work, try with a relative path instead (<code>url('./chess_merida_unicode.ttf')</code>), but it should works without it [http://www.w3.org/TR/REC-CSS1/#url]. Also, simple or double quotes in url are optional.

;Multi-file for several styles
From [https://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font SO]:
<source lang=css>
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans.ttf");
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-Oblique.ttf");
font-style: italic, oblique;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
</source>

;Webfont on remote server (doesn't work on FF it seems)
Add to your stylesheet:
<source lang=css>
@import url(//fonts.googleapis.com/css?family=Open+Sans);
</source>

Then we can use it to style elements:
<source lang=css>
body {
font-family: 'Open Sans', sans-serif;
}
</source>

;Troubleshooting
* Fonts must be in same directory or subtree. '''Not on another site or up tree'''! [http://stackoverflow.com/questions/19817459/firefox-font-face-with-local-file-downloadable-font-download-failed]
<source lang=css>
@font-face {
font-family: 'Chess Merida Unicode';
src: url('../chess_merida_unicode.ttf'); # BAD! THIS WILL FAIL IN FIREFOX
}
</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>

Latest revision as of 14:26, 21 April 2023

References

Specifications
W3Schools
Tutorials
Compatibility
Tools
WTF

Quick reference

Fonts

p { font-size: 30px; }
p { font-size: 12pt; }
p { font-size: 100%; }
p { font-size: 1.5em; }
Set the font size

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:

Tips

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.

Inlining tables

Use display:inline-block or display:inline-table to have table element flowed like regular text. Use vertical-align:middle to change vertical alignment. 

some text
<table style="display:inline-block; vertical-align:middle;">
  <tr><td>4<br/>3<br/>2<br/>1<br/></td></tr>
  <tr><td>abcd</td></tr>
</table>
some text

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-face.

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.

Multi-file for several styles

From SO: 

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}
Webfont on remote server (doesn't work on FF it seems)

Add to your stylesheet: 

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Then we can use it to style elements: 

body {
  font-family: 'Open Sans', sans-serif;
}
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=16786"