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


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.

Definition of CSS standards.
Home page for CSS specification umbrella.
Status of all modules.
CSS level 2 at latest rev.
CSS level 2 rev 1.

Default style for HTML elements

Adding CSS to HTML

Include to CSS file in head tag:

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

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

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

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

   h1 {border-width: 1; border: solid; text-align: center}

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.

Declaring character encodings in CSS.
@charset CSS at-rule at MDN.


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


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);
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; }
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.
Rules applied for any browser where the height is greater than or equal to the width.
Rules for any browser where the width is greater than the height.


Use CSS media queries for responsiveness



Unpublished: CSS Device Adaptation Module Level 1
viewport attribute in meta tag.
Firefox mobile support for viewport.
Original viewport specs.


Compatibility table.
Device table with viewport width.


How viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen.
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

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

CSS browser support

Editor support


$ sudo apt-get install css-mode

Graphical editor:

$ sudo apt-get install cssed