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.
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>
@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.
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:
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);
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
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:
See:
Specs:
Compatibility:
Articles:
Emacs:
$ sudo apt-get install css-mode
Graphical editor:
$ sudo apt-get install cssed