[ About | Licence | Contacts ]
Written by Oleksandr Gavenko (AKA gavenkoa), compiled on 2017-01-30 from rev ccaa2f364422+.

CSS

CSS specification

Starting from CSS level 2 specification splited into individual modules. Each module have own levels.

CSS level 3 means CSS level 2 plus modules that refine and extend CSS 2.

https://www.w3.org/TR/CSS/
Definition of CSS standards.
https://www.w3.org/Style/CSS/
Home page for CSS specification umbrella.
https://www.w3.org/Style/CSS/current-work
Status of all modules.
https://www.w3.org/TR/CSS2/
CSS level 2 at latest rev.
https://www.w3.org/TR/CSS21/
CSS level 2 rev 1.

Default style for HTML elements

Adding CSS to HTML

Include to CSS file in head tag:

<html>
  <head>
    <link href="path-to.css" rel="stylesheet" type="text/css">
  </head>
  ...
<html>

or embed style into style tag (that tag valid only in head tag):

<head>
 <style type="text/css">
   h1 {border-width: 1; border: solid; text-align: center}
 </style>
</head>

HTML 5 standard doesn't require type attribute, above example may be rewritten into:

<head>
 <style>
   h1 {border-width: 1; border: solid; text-align: center}
 </style>
</head>

To change style of specific tag embedding into style attribute (style syntax doesn't use selectors!):

<b style="color: blue; font-family: ariel">Welcome!</b>

CSS encoding

@charset rule should be the first sequence in CSS document without preceding white spaces, should use double quotes and exactly one space between keyword and charset:

@charset "UTF-8";

UTF BOM have precedence over @charset.

Another source of encoding is HTTP header Content-Type that have highest precedence:

Content-Type: text/css; charset=utf-8

Using charset attribute on the link element is deprecated by HTML5.

https://www.w3.org/International/questions/qa-css-charset.en
Declaring character encodings in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
@charset CSS at-rule at MDN.

Selectors

tag {}
.class {}
#id {} для id разрешены символы
* {} - любой элемент

tag tag1 {} - выбор tag1, у которых есть предок tag
tag > tag {} - выбор дочернего элемента
tag + tag {} - выбор соседних элементов
tag ~ tag {} - выбор любого соседа

[attr] {}
[attr1][attr2] {}
[attr="..."] {}
[attr~="..."] {} - присутствует слово ... в поле атрибута
[attr*="..."] {} - присутствует набор символов ... в поле атрибута
[attr^="..."] {} - начинается с ... в поле атрибута
[attr$="..."] {} - заканчивается на ... в поле атрибута
tag [attr|="..."] {}

:link - не посещенные ссылки
:visited - посещенные ссылки
:active - нажатие на левую клавишу мыши на элементе
:hover - назначать при наведении
:focus - при фокусировке элемента
:first-child - первый подэлемент
:last-child - последний подэлемент

:first-line
:first-letter - выбрать первую букву (не приминимо к inline элементам)
:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
использовать счетчики)
:after{} - тоже, что и before, только ставит текст после контента тега

See:

CSS import statement

Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset):

@import "common.css";
@import url("common.css");

Import statment supports media query syntax:

@import url("print.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);
https://www.w3.org/TR/css-cascade-3/#at-import
Importing Style Sheets: the @import rule.

Including font

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }
https://www.w3.org/TR/css-fonts-3/
CSS Fonts Module Level 3.

Media queries

Syntax for media queries inside CSS file is:

@media print { ... }

@media (min-width: 400px) and (max-width: 600px) { ... }

@import url(print.css) print;

It is possible to link to CSS file with media queries with media attribute:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Possible predicates:

(min-width: VAL)
Rules applied for any browser width over the value defined in the query.
(max-width: VAL)
Rules applied for any browser width below the value defined in the query.
(min-height: VAL)
Rules applied for any browser height over the value defined in the query.
(max-height: VAL)
Rules applied for any browser height below the value defined in the query.
(orientation=portrait)
Rules applied for any browser where the height is greater than or equal to the width.
(orientation=landscape)
Rules for any browser where the width is greater than the height.

See:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
Use CSS media queries for responsiveness

Viewport

Specs:

https://www.w3.org/TR/css-device-adapt/
Unpublished: CSS Device Adaptation Module Level 1
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
viewport attribute in meta tag.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Firefox mobile support for viewport.
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Original viewport specs.

Compatibility:

http://www.quirksmode.org/mobile/tableViewport.html
Compatibility table.
http://viewportsizes.com/
Device table with viewport width.

Articles:

http://www.quirksmode.org/mobile/viewports.html
How viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen.
http://www.quirksmode.org/mobile/viewports2.html
How viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen.

CSS compilers

http://lesscss.org/
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
http://sass-lang.com/
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

CSS browser support

Editor support

Emacs:

$ sudo apt-get install css-mode

Graphical editor:

$ sudo apt-get install cssed