CSS - Cascading Style Sheets


Using them, you can dress up your page

History

  • CSS 1, introduced in 1996, laid the groundwork for Cascading Style Sheets. selector concept
  • CSS 2 added:
    • new features:

      - the ability to target your CSS to different printers, monitors, and other devices.

      - added new selectors and the ability to precisely position elements on a Web page.

  • CSS 3
    • multi-column output of text
    • rounded corners on borders
    • opacity control
    • HSL/HSLA/RGBA colors
    • and text shadows

Compose CSS-friendly HTML

and site's visitors will appreciate you


Or say goodbye to the <font> tag (obsolete)

Ways to set the css

  • inline
  • internal
  • external
  • scoped (Browser Support: FF)

Inline


Inline

Internal




Internal

External


     

.external_example {
    background: #10c0d0;
    border: 2px dashed #5ee614;
}

External file benefits: pages loads faster (due to cache)


But don't forget to force reload while developing

  • Windows: ctrl + F5, ctrl + R
  • Mac/Apple: Apple + R or command + R
  • Linux: F5

Scope *


Scope

Check the page in FF.

Scope

Check the page in FF.

* Don't use pseudo-elements in your scope

What is in your style

  1. selector
  2. declaration block

.selector {
    background: #10c0d0;
    border: 2px dashed #5ee614;
}

Selector tells what element to style. p, div, etc.

What you want it to format
Declaration block may contain an infinite number of declarations

Every declaration has two parts:

  • property
  • value

display: block;

Don't forget to end each property/value pair with a semicolon

What are selectors

  • Tag selectors: p, div, span, etc.

  • Class selectors:
    
    .class_name {}
    
    1. Must begin with a period
    2. Only letters, numbers, hyphens, underscores
    3. After the period, must always start with a letter
    4. .Case_sensitive isn't the same as .case_sensitive
    5. You can use multiple classes in tags

  • ID selectors:
    
    #idname {}
    

    Is the unique part of the page. Can be used only once per page. Where to use: js, anchors.

    1. Must begin with "#"
    2. Only letters, numbers, hyphens, underscores
    3. After the "#", must always start with a letter
    4. #Case_sensitive isn't the same as #case_sensitive
    5. You can't use multiple IDs in tags

Group selectors


h2 {
    color: #fff;
}
p {
    color: #fff;
}
a {
    color: #fff;
}

The same as:


h2, p, a {
    color: #fff;
}

Universal selector


* {
    margin: 0;
    padding: 0;
}

div * {
    border: 1px red dashed;
}

Descendant selectors


ul li {
    font: italic bold 12px Arial, sans-serif;
}

.classname p {
    color: #ff0;
}

Child Selectors


body > h1 {
    font-size: 3em;
}

Only child, but not daughter or son :)

Adjacent sibling selector
General Sibling Selector


  • list item

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum


ul.list_example + p {
    color: #ff0;
}
ul.list_example ~ p {
    color: #13bbc5;
    font-size: 20px;
}
  • list item

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Attribute selectors

a[title] with concrette title

a[href="http://test.com"]

a[href*="http"]

input[type=radio]:checked

etc...

Pseudo-classes and pseudo-elements

Pseudo-classes

a:link

a:visited

:hover

a:active

:focus

:first-child

:last-child

:nth-child(n)

:nth-of-type(n)

:first-of-type

:lang(language)

etc.


.classes_example p:first-child {
    color: yellow;
}

.classes_example p:last-child {
    color: #13bbc5;
}

.classes_example p:nth-child(3) {
    background: green;
}

.classes_example p:nth-child(even) {
    font-style: italic;
}

.classes_example p:nth-of-type(2) {
    background: orange;
    color: grey;
}

.classes_example p:first-of-type {
    text-decoration: underline;
}

.classes_example p:lang(ua) {
    border: 1px solid red;
}

Pseudo-elements match virtual elements that don’t exist explicitly in the document tree. Pseudo-elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered.

They can also represent content that’s generated by CSS rules.

In CSS1 and CSS2, pseudo-elements start with a colon (:), just like pseudo-classes.

In CSS3, pseudo-elements start with a double colon (::), which differentiates them from pseudo-classes.

CSS1 gave us :first-letter and :first-line; CSS2 gave us generated content and the :before and :after pseudo-elements; and CSS3 added ::selection.

Pseudo-elements

:first-letter

:first-line

::selection

:first-letter

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

:first-line

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

.elements_example p:first-letter {
    color: yellow;
    font-weight: bold;
    font-size: 50px;
}

.elements_example:first-line {
    color: lightblue;
}

.elements_example ::selection {
    background: #c6ff39;
}

Pseudo-elements match virtual elements that don’t exist explicitly in the document tree. Pseudo-elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered. They can also represent content that’s generated by CSS rules.

In CSS1 and CSS2, pseudo-elements start with a colon (:), just like pseudo-classes. In CSS3, pseudo-elements start with a double colon (::), which differentiates them from pseudo-classes.

CSS1 gave us :first-letter and :first-line; CSS2 gave us generated content and the :before and :after pseudo-elements; and CSS3 added ::selection.

:root

:empty

Generated content Pseudo-elements

:before

:after


This pseudo-element represents generated content rendered before another element, and is used in conjunction with the content property. Additional properties can be specified to style the pseudo-element. Note that the generated content is only rendered—it doesn't become part of the document tree although the generated content of course will inherit properties from it's parent.


.before-after_example:before {
    content: "Description";
}

.before-after_example:after {
    content: "The end";    
}

This pseudo-element represents generated content rendered before another element, and is used in conjunction with the content property. Additional properties can be specified to style the pseudo-element. Note that the generated content is only rendered—it doesn't become part of the document tree although the generated content of course will inherit properties from it's parent.

Inheritance

Inheritance is the process by which properties are passed from parent to child elements even though those properties have not been explicitly defined by other means. Certain properties are inherited automatically, and as the name implies, a child element will take on the characteristics of its parent with regards to these properties.

Important!

Inheritance not for the positions, margins, backgrounds and borders

Style
Wars

A long time ago in a galaxy far, far away...
they had to find out who will win in the selectors' fight...

Who wins?..

Simple rules to make your style the same as you want
  • The last
    <link rel="stylesheet" type="text/css" href="d.css" media="screen"/>
    tag
  • The last style in the css (declaration or declaration block)
  • internal styles
  • inline styles
  • and...

Specificity

stylewars

Styling with css

Back to declaration block


p {
    color: #ff0;
    font: italic bold 18px/14px Arial, sans-serif;    
}

result:

Well done, keep it up!

  • property
  • value

The list of properties:

Font

  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • @font-face
  • font-size-adjust FF support
  • font-stretch no one support

Formatting text

Serif family:

  • Times;
  • Times New Roman;
  • Georgia;
  • etc.


Sans-serif family:

  • Arial;
  • Helvetica;
  • Verdana;
  • Tahoma;
  • etc.


Shorthand:

p {
    font: italic bold 16px/16px Arial, sans-serif;
}

Custom fonts

@font-face


@font-face {
    font-family: 'oswaldbook';
    src: url('fonts/oswald-regular-webfont.eot');
    src: url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oswald-regular-webfont.svg#oswaldbook') format('svg'),
         url('fonts/oswald-regular-webfont.woff') format('woff'),
         url('fonts/oswald-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

p {
    font: 16px oswaldbook, sans-serif;
}

http://www.fontsquirrel.com/

Google fonts


    

@import url(http://fonts.googleapis.com/css?family=Kite+One);

p {
    font-family: 'Kite One', sans-serif;
}

http://www.google.com/fonts

Text

  • color
  • line-height
  • text-align
  • text-indent
  • text-transform
  • vertical-align
  • white-space
  • text-overflow
  • text-shadow
  • word-break
  • word-wrap
  • letter-spacing
  • text-decoration
  • word-spacing
  • text-justify

Background

  • background
  • background-attachment
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size


Shorthand:

p {
    background: fixed #fff url(bg.png) no-repeat right bottom;
    background-size: 100% auto;    
}

Gradient

  • Linear
  • Radial


http://gradients.glrzad.com/

http://angrytools.com/gradient/

Border


    border: top right bottom left;
  • border-width
  • border-style
  • border-color

    border: width style color;

border-radius


    border-radius: top-left top-right bottom-right bottom-left;


Shorthand:

p {
    border: 1px solid #ff0;
    border-width: 2px 10px;
    border-radius: 4px;
}

box-shadow


    box-shadow: inset h-shadow v-shadow blur spread color;

outline


outline: width style color;
outline-offset: x;

opacity


    opacity: x; /* from 0.0 to 1. 1 is default */
Positioning

display

  • block
  • inline-block
  • table
  • inline
Positioning

float

  • left
  • right
  • none (default value)

Clear

  • left
  • right
  • both
  • none (default value)
Positioning

position

  • static (default value)
  • absolute
  • relative
  • fixed
  • sticky

  • z-index
Positioning

visibility

  • visible (default value)
  • hidden
  • collapse

Margin & Padding


margin: top right bottom left;    
padding: top right bottom left;

Margin property

Padding property


div p:first-child {
    margin: 20px;
    background: yellow;
}

div p:nth-child(2) {
    padding: 20px;
    background: green;
}

Margin property

Padding property

Calculating a Box's Actual width and Height


div {
    margin: 10px auto;
    padding: 20px 30px;
    width: 100px;
    height: 100px;
    border: 5px solid red;
}

div span {
    display: block;
    height: inherit;
    background: blue;
}
text

The same, but with box-sizing property


div {
    margin: 10px auto;
    padding: 20px 30px;
    width: 100px;
    height: 100px;
    border: 5px solid red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

div span {
    display: block;
    height: auto;
    background: blue;
}
text

Overflow

  • overflow
  • overflow-x
  • overflow-y
  • visible (default value)
  • hidden
  • scroll
  • auto
  • inherit

    overflow: hidden;

Dimension

  • height
  • width
  • min-height, max-height
  • min-width, max-width

width: 100%;
height: 20px;

:before and :after content property


p:before {
    content: "Text goes here";
}
h2:before {
    content: counter(var);
}
a:after {
    content:attr(attribute);
}
p:before {
    content:open-quote;
}
p:after {
    content:close-quote;
}
p:before {
    content:url(any_image_url);
}

List Properties

  • list-style
  • list-style-type
  • list-style-position
  • list-style-image

Multi-column Properties

  • column-count
  • column-gap
  • column-rule (width, style, color)
  • column-span (1, all)
  • column-width
  • column-fill
  • break-* (before, after, inside,) - auto | always | avoid | left | right | page | column | avoid-page | avoid-column;
auto
Specifies to neither force nor forbid a page/column break before the element.
always
Specifies to always force a page break before the element.
avoid
Specifies to avoid a page break before the element.
left
Specifies to force one or two page breaks before the element so that the next page is formatted as a left page.
right
Specifies to force one or two page breaks before the element so that the next page is formatted as a right page.
page
Specifies to always force a page break before the element.
column
Specifies to always force a column break before the element.
avoid-page
Specifies to avoid a page break before the element.
avoid-column
Specifies to avoid a column break before the element.

Table Properties

  • border-collapse
  • border-spacing
  • empty-cells

Stay tuned! :)