Cascading Style Sheets

@itspoma / CURSOR Education

v1.1

Agenda

  • Intro
  • Selectors
  • Base & Advanced properties
  • Box Model
  • Validators

CSS vs HTML


<body bgcolor="#FF0000">

CSS vs HTML


body {background-color: #FF0000;}

Syntax


selector {
  property: value;
  property2: value;
  /* other rules */
}

Syntax (example)


p {
  /* ... */
}

h1 {
  property: url("http://google.com");
  property: 0.7;
  property: 90%;
  property: #ff0000;
  property: rgb(255, 0, 0);
  property: uppercase;
}

Structure


<p id="main" class="text paragraph" 
    data-color="green">Dummy text</p>

#main {...}
.text {...}
p {...}

p.text {...}
.text.paragraph {...}

p[data-color="green"] { 
    color: green; 
}

Inline


<body style="background-color: #FF0000;">
  <p>This is a red page</p>
</body>

<p style="color: #D00; font-size: 22px;">Dummy text</p>

Style tag (in the HEAD)


<style type="text/css">
  body {background-color: #FF0000;}
</style>

External file


<link rel="stylesheet" type="text/css" href="style/style.css" />

https://www.w3.org/TR/CSS21/media.html#media-types

Imports


@import "style-1.css";
@import url("style-2.css");

id & class

id for identification,
class for grouping 


#welcome-page { .. }
.section { .. }
.section#welcome { ... }
.section.otherClass.oneMoreOtherClass { ... }

Tag


a { .. }
ul { .. }

Attributes


content

[attribute] { ... }
selector[attribute] { .. }
[attribute="value"] { ... }
selector[attribute1="value1"][attribute2="value2"].. { .. }

Next


#container + p {
  color: red;
}

https://jsfiddle.net/gubtxyof/2/

Siblings after


#container ~ li {
  background: blue;
}

https://jsfiddle.net/gubtxyof/1/

First level inner


#container > p {
  font-size: 30px;
}

https://jsfiddle.net/gubtxyof/4/

Pseudoclasses

  • :hover
  • :active
  • :link
  • :visited

MDN

Pseudoelements

  • ::after
  • ::before
  • ::first-line
  • ::first-letter
  • ::selection
  • ::hover 


selector::after {
  content: 'text';
}

MDN

text

  • color
  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

Color

  • By hexadecimal values: #6609CF, #fc0
  • By name: white, silver, gray, black, red, orange, ...
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(0,255,0,0.3)
  • HSL: hsl(120,100%, 25%)
  • HSLA: hsla(120,100%, 50%, 0.3)

font

  • font-family: family-name | generic-family
  • font-style: normal | italic
  • font-variant
  • font-weight
  • font-size: length | percentage
  • font: [font-style | font-varian | font-height] font-size [line-height] font-family
  • font: bold 24px Tahoma;

Margin

  • margin: top right bottom left
  • margin-top: length | percentage | auto
  • margin-right: length | percentage | auto
  • margin-bottom: length | percentage | auto
  • margin-left: length | percentage | auto

Display

  • block
  • inline
  • inline-block
  • none
  • table, inline-table

span & div

background


  background: color image position/size repeat
          origin clip attachment initial|inherit;

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


http://www.w3schools.com/cssref/css3_pr_background.asp

All


* {
  color: red;
}

All in container


#container * {
  color: red;
}

.class vs .class





div { height: 200px; width: 200px; }
.blue { background-color: blue; }
.box {  background-color: red; }

swap them.

#id vs .class





div { height: 200px; width: 200px; }
#box {  background-color: red; }
.blue { background-color: blue; }

swap them.

Specificity

https://jsfiddle.net/Lwr9o23a/
https://jsfiddle.net/Lwr9o23a/1/

!important


!important
              


table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Samples calculations

Samples calculations

Samples calculations

Samples calculations

Specificity Special Rules

  • The universal selector (*) is worth 0
  • When two selectors have the same specificity, the last one wins
  • Elements can never beat a class selector, even if you pile them on
  • !important is Superman, it can beat up almost anything

Specificity Priority

  • Browser's styles
  • Site's styles
  • User's styles
  • Site's styles with !important
  • Users's styles with !important

Dimensions

Relative units: em, rem, ex, px, %
Absolute units: in, cm, mm, pt, pc

https://jsfiddle.net/gubtxyof/6/

Box model

Box model (IE)


* {
  box-sizing: border-box;
}

border

  • border-width
  • border-color
  • border-style
  • border

Positioning


.element {
  position: static; /* default */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

https://jsfiddle.net/nteadfh6/

Floating



.element {
    float: left;
}

Floating



.element {
    float: right;
}

How Browser Works?

http://arvindr21.github.io/howBrowserWorks
http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/

Reflow



.element {
    float: left;
}

Reflow



.element {
    float: left;
}

Clears

Clears



.footer {
    clear: both;
    float: none;
}

Clearfix



.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }

z-index

Vendor prefixes

  • -webkit- (Chrome, newer versions of Opera.)
  • -moz- (Firefox)
  • -o- (Old versions of Opera)
  • -ms- (Internet Explorer)

standarts & validators

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

THE END

Additional materials