is a style sheet language used for describing the presentation of a document written in a markup language.

Cascading Style Sheet

1996 - CSS 1

1998 - CSS 2

2011 - CSS 2.1

2011/2013 - CSS 3

Story

https://jigsaw.w3.org/css-validator/

W3C

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

References

link rel

@import

in page

in line

How to use

#idname

.classname

ID and class

Pseudo class

li:first-child, li:last-child

a:link,a:visited

a:hover, a:active, a:focus

li:nt-child(2)

:after

:before

p:first-letter

p:first-line

Pseudo element

div p = son

div > p = direct son

div + p = after brother

p[title=Example] = attribute

CSS selectors table

Selectors

color name = red

RGB value = rgb(255, 0, 0)

HEX value = #ff0000

Color

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

background:white url('image') no-repeat 0% 0%;

Background

http://css.spritegen.com/

https://www.base64-image.de/

Sprite and Base64

color, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, word-spacing, vertical-align

Text

font-family, font-style, font-weight,

text-transform, text-align, text-decoration, text-indent, text-orientation, letter-spacing, word-spacing, word-break

Font

opacity: 1;
filter: alpha(opacity=100);

Opacity

display: block, inline, inline-block, none

visibility: visible, hidden

Display and Visibility

min-height, max-height

min-width, max-width

Min/Max Height/Width

hidden, auto, scroll

Overflow

content, margin, padding, border

outline

Box Model

box-sizing: border-box

Box Model

static

relative

absolute

fixed

Position

float: left

float: right

float: none

clear: left

clear: right

clear: both

Float e Clear

2004 - Born Web Hypertext Application Technology Working Group

2008 - HTML 5 first public draft

2014 - Recommendation

2016 - HTML 5.1 Candidate Recommendation

Story

all new tags as block element

custom tag is permitted but not validate

HTML5 form and old browser:

https://code.google.com/archive/p/webforms2/

Browser engines HTML5 support

Browser support

Modernizr

IE < 9 need HTML5Shiv
CDN: https://github.com/aFarkas/html5shiv

https://modernizr.com/

W3C: https://www.w3.org/TR/html5/

Dev: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

References

section, article, aside, main, details, dialog, footer, header, nav, progress, time, figcaption, figure

New elements

color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week

New input type

audio, embed, source, track, video

HTML 5 media

canvas

svg

HTML 5 graphic

June 2011: CSS Color Module
September 2011: CSS Namespaces Module
September 2011: Selectors
June 2012: Media Queries
November 2013: CSS Style Attributes

Story

https://autoprefixer.github.io/

Vendor prefix

border-radius, multiple background,

text & box shadow

Style effects

http://www.colorzilla.com/gradient-editor/

Gradients

white-space, text-overflow,

word-wrap, word-break, 

Text properties

calc(x - y)

ex:

width: calc(100% - 50px);

Calculation

translate
rotate
scale
skewX
skewY

2D Transform

rotateX

rotateY

rotateZ

3D Transform

transition, transition-delay,

transition-duration, transition-property,

transition-timing-function

Transition

An animation lets an element gradually change from one style to another.

@keyframes

Animation

animation-name

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timing-function

Animation

https://daneden.github.io/animate.css/

Animate.css

width and height of the viewport
orientation (landscape or portrait mode)
resolution

Mediaquery

Create application using atoms, molecules, organisms, templates and pages

http://bradfrost.com/

Atomic Design

Create application separating container and content using CSS objects

http://oocss.org/

OOCSS

Block Element Modifiers

http://getbem.com/introduction/

BEM

CSS style guide for a reliable, mainteinable and scalable application

https://smacss.com/

SMACSS

The better way to keep CSS maintainable, reliable and modular

http://sass-lang.com/

SASS Doc References

CSS Pre-processor

sass needs ruby

http://sass-lang.com/install

SASS Install

compile:

sass input.scss output.css

watch:

sass --watch app/sass:public/stylesheets

SASS Commands

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

...

font-family: $font-stack;

color: $primary-color;

SASS Variables

@import _theme.scss

@import _base.scss

@import _mod_table.scss

SASS Partial and Import