Css: Difference between revisions

From miki
Jump to navigation Jump to search
 
(17 intermediate revisions by the same user not shown)
Line 7: Line 7:
* [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 ==
== Syntax ==
Line 131: Line 160:
* [http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ CSS Specificity: Things You Should Know]
* [http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ CSS Specificity: Things You Should Know]


== Miscellaneous ==
== Tips ==
=== Using Opera DragonFly ===
=== Using Opera DragonFly ===
Opera ''DragonFly'' is a powerful tool to write / debug CSS:
Opera ''DragonFly'' is a powerful tool to write / debug CSS:
Line 158: Line 187:


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.
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 ==
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-fact</code>.
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:
Reference:
* [http://www.html5rocks.com/en/tutorials/webfonts/quick/ webfonts overview].
* [http://www.html5rocks.com/en/tutorials/webfonts/quick/ webfonts overview].
* [http://www.fontsquirrel.com/tools/webfont-generator Font Squirrel Generator]
* [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 ==
== Examples ==

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"