CSS. Selectors. Pseudo classes. Attributes

HTML5 is contemporary format. (HTML 4.01 <br>, xHTML <br />, HTML supports both).

HTML5 brings new tags like <header>, <footer>, also tags for audio and video.

<div> for paragraphs

<span> for inline text

HTML Validator

<blockquote> and <q> for quotes

для IE специальный тег <meta http-equiv= “X-UA-Compatible” content=”IE=edge”>

3 WAYS OF APPLYING STYLES TO DOCUMENT

1. Inline <p style =”font…></p>
2. InFile in tags <style></style>
3. In external css file – faster and convenient way. Connecting to our html like this <link href=”styles.CSS” rel=”stylesheet”>

DOWNLOAD FONT FROM GOOGLE AND USE IT

<link href="http://fonts.googleapis.com/css?family=Gravitas+One"
rel="stylesheet">

p {
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
}

SELECTORS

All tags like <p>

p {
 color: red
}

Class selectors. Only tags with class = “myClass”, cannot start with digit, only with letter, allow apply rules for group of tags

.myClass {
 color: red;
}

ID selectors. Only tags with class = “myClass”, cannot start with digit, only with letter

#myID {
 color: red;
}

GROUP SELECTORS

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
h1, p, .copyright, #banner { color: #F1CD33; }
* { font-weight: bold; } // for all selectors

.banner * {
  color: red;
} // all tags inside tag banner

INHERITANCE OF SELECTORS

example of changing group of a selectors

ul li a {} // a that is inside li that is inside ul, and so on...
body li a {}
html li a {}
html body ul li a {}

the same for classes

.myClass p {}

PSEUDO CLASSES

(on <a></a> example)
a:link // any not visited link 
a:visited // visited link
a:hover // on mouse move
a:active // on click

:focus
::before
::after
::Selection // selected text

// for example
::selection {
color: #FFFFFF;
background-color: #993366;
}

CHILD PSEUDO CLASSES

h1:first-child {}
h1:last-child {}
tr:nth-child(odd) { background-color: #D9F0FF; }
tr:nth-child(even) { background-color: #FFFFFF; }
tr td:nth-child(3n+2) { background-color:#900; } // starts after 2, every 3-d element

CHILD PSEUDO CLASSES BY TYPE

.sidebar p:first-of-type // first p in sidebar
.sidebar p:last-of-type
.sidebar p:nth-of-type

img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }

NOT SELECTOR

p:not(.classy) { color: blue; } // all p except with class classy

PSEUDO ELEMENTS

::first-letter {}  
::first-line {}

SELECTORS OF ATTRIBUTES

p[title] {
 color: red; 
}

p[title="myTitle"] {
 color: red; 
}