Css: Difference between revisions

Latest revision as of 14:26, 21 April 2023

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

Tutorials

Compatibility

Can I Use ____ ?

Tools

Color mixer (by step of 5%)
CSS tests and experiments

WTF

Spinning Diagrams with CSS

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.

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

@@ Line 1: / Line 1: @@
 == 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/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 ==
@@ Line 129: / Line 160: @@
 * [http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ CSS Specificity: Things You Should Know]
-== Miscellaneous ==
+== Tips ==
 === Using Opera DragonFly ===
 Opera ''DragonFly'' is a powerful tool to write / debug CSS:
@@ Line 156: / 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.
+=== 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 ==

Css: Difference between revisions

Latest revision as of 14:26, 21 April 2023

Contents

References

Quick reference

Fonts

Syntax

External CSS

Internal CSS

Inline CSS

Selectors

How Cascading Works

Tips

Using Opera DragonFly

Font size

Inlining tables

Web fonts

Examples

Navigation menu

Css: Difference between revisions

Latest revision as of 14:26, 21 April 2023

References

Quick reference

Fonts

Syntax

External CSS

Internal CSS

Inline CSS

Selectors

How Cascading Works

Tips

Using Opera DragonFly

Font size

Inlining tables

Web fonts

Examples

Navigation menu

Search