HTML and CSS basics – Part II – What the hell is this?

What the hell is this?

font: [font-style||font-variant||font-weight]
  font-size
  [/line-height]
  font-family |
  inherit
          

Shorthand properties

.some-class {
  font: italic small-caps bold 14px/12px Arial, Helvetica, sans-serif;
}
          

eqauls to

.some-class {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 14px;
  line-height: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
          

• background
• font
• border
• margin
• padding
• ...

.some-class {
  margin: 0px 0px 0px 0px;
}
          

eqauls to

.some-class {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
          

eqauls to

.some-class {
  margin: 0;
}
          

.some-class {
  margin: 10px 15px;
}
          

eqauls to

.some-class {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 15px;
}
          

.some-class {
  margin: 10px 15px 20px;
}
          

eqauls to

.some-class {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
}
          

Same rules for padding

Box model

box-sizing

.some-class {
  box-sizing: border-box;
}
          

• still -moz- in Firefox
• IE < ? dno

CSS selectors. How to?

• 30 CSS selectors to memorize
• Play with selectors

div {
  property: value;
}
          

applied to all 'divs'

Example

#mySuperID {
  property: value;
}
          

applied to element with id = "#mySuperID"

Example

.my-awesome-class {
  property: value;
}
          

applied to ALL elements with class = "my-awesome-class"

Example

div.super-class {
  property: value;
}
          

applied to ALL 'divs' with class = "my-awesome-class"

Example

parent-selector child-selector {
  property: value;
}
          

applied to all elements satisfying 2 condition:

• element matches 'child-selector'
• one of parents of this element matches 'parent-selector'

Example

parent-selector > child-selector {
  property: value;
}
          

applied to all elements satisfying 2 condition:

• element matches 'child-selector'
• the first parent of this element matches 'parent-selector'

Example

selector1 + selector2 {
  property: value;
}
          

first sibling selector

Example

selector1 ~ selector2 {
  property: value;
}
          

sibling selector

Example

selector[attrName] {
  property: value;
}
          

applied to all elements which have 'attrName' attribute

Example

selector[attrName="attrValue"] {
  property: value;
}
          

applied to all elements which have 'attrName' attribute with value = "attrValue"

Example

selector[attrName^="someString"] {
  property: value;
}
          

applied to all elements which:

• have 'attrName' attribute
• attribute value starts with 'someString'

Example

selector[attrName*="partOfValue"] {
  property: value;
}
          

applied to all elements which:

• have 'attrName' attribute
• indexOf 'partOfValue' in attribute value != -1

Example

selector[attrName$="endsWith"] {
  property: value;
}
          

applied to all elements which:

• have 'attrName' attribute
• attribute value ends with 'endsWith'

Example

State pseudo classes

• :hover
• :active
• :focus
• :hover
• :visited (links)