CSS 101 – Why CSS – Display Properties

View Github Repository Open presentation in a new window

phoenix0665

See all presentation from phoenix0665

CSS 101 – Why CSS – Display Properties

1 0

css

CSS

On Github phoenix0665 / css

CSS 101

Why CSS

Lakmè Salon for HTML

Before
After

It's all About Levels

Level Up!

A Look Under the Hood

Image Source: Scoop

A Powerful Combo

HTML, CSS and JavaScript

Adding CSS to a Page

  • Style Attribute

    <div style="..."></div>

  • Style

    <style type="text/css"></style>

  • Link

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

Selectors

  • Universal

    * {
  color: #555;
}

  • Type

    p{
  color: #59dcc5;
}

  • Pseudo Elements

    p:first-line{
  text-decoration: underline;
}
p:first-letter{
  font-size: 24px;
  text-transform: uppercase;
}

:before{
  content: '"';
  color: #666;
}
:after{
  content: '"';
  color: #666;
}

Precedence So Far

Universal < Type = Pseudo Elements

  • Descendant

    div p{
  color: #34bee1;
}

  • Child

    div > p{
  color: #eac532;
}

Precedence So Far

Universal < Type = Pseudo Elements <

Descendant = Child

  • Adjacent

    h1 + div{
  color: #0b75f8;
}

  • Pseudo Classes

    /*** Postion Based ***/
ul > li:first-child{
  font-weight: bold;
}

/*** Link Based ***/
a:link{
  color: #00b168;
}
a:visited{
  color: #1d9a67;
}

/*** State Based ***/
button:hover{
  color:#d7830a;
}
button:focus{
  color:#d2a76a;	
}
button:active{
  color:#d5963c;
}

Precedence So Far

Universal < Type = Pseudo Elements <

Descendant = Child = Adjacent = Pseudo Classes

  • Attribute

    input[type]{
  border: 1px solid #333;
}
input[type="text"]{
  font-size: 14px;
}
input[class^="name"]{
	border: 1px solid #999;
}
input[class$="name"]{
	border: 1px solid #999;
}
input[class*="name"]{
	border: 1px solid #999;
}
input[class~="first"]{
	border: 1px solid #999;
}
input[class|="name"]{
	border: 1px solid #999;
}

Precedence So Far

Universal < Type = Pseudo Elements <

Descendant = Child = Adjacent = Pseudo Classes =

Attribute

  • Class

    div.example{
  color: #6762a9;
  font-size: 12px;
}

  • ID

    div#unique_div{
  color: #469dc6;
  font-size: 15px;
}

  • Inline Styles

    <div id="unique_div" style="font: 24px; color: #000;">
	....
</div>

Precedence So Far

Universal < Type = Pseudo Elements <

Descendant = Child = Adjacent = Pseudo Classes =

Attribute = Class < ID < Inline Styles

Specificity

Russian Nesting Doll Aka Matryoshka dollMore on CSS Specificity

  • Name

    color: 'black';

  • Hex

    color: #000;
color: #000000;

  • Function

    color: rbg(0, 0, 0);
color: rbga(0, 0, 0, 0);

A Measure of Style

  • %

    div{
  width: 50%;
  height: 50%;
}

  • PX

    div{
  width: 50px;
  height: 50px;
}

  • EM

    div{
  width: 2em;
  height: 2em;
}

Want a more indepth look at what was covered?

Display Properties

  • Display

    display: block|inline|inline-block|none(default)|list-item|table

  • Postion

    position: relative|absolute|fixed|static(default)
top: px|%
left: px|%
bottom: px|%
right: px|%

  • Float

    float: left|right|none(default)
clear: left|right|both|none(default)

Box Model

Box Model as shown on Firebug

Padding

/*** Individuals ***/

padding-top: 10px;
padding-bottom 10px;
padding-left: 10px;
padding-right: 10px;

/*** Shorthand ***/

padding: 10px 5px 5px 10px; /*** top, right, bottom, left ***/
padding: 10px 10px;         /*** top/bottom, left/right ***/
padding: 10px;              /*** top/left/right/bottom ***/

Border

/*** Individuals ***/

border-style: none|solid|dotted|dashed|double|groove|ridge|inset|outset|hidden
border-top-style: solid;
border-bottom-style: dotted;
border-left-style: dashed
border-right-style: double;

border-width: 2px;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 2px;

border-color: #666;

/*** Shorthand ***/

border-top: 2px solid red;
border-bottom: 2px dotted blue;
border-left: 2px none green;
border-right: 2px dashed black;

border: 2px solid black;

Margin

/*** Individuals ***/

margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

/*** Shorthand ***/

margin: 10px 5px 5px 10px;  /*** top, right, bottom, left ***/
margin: 10px 10px;          /*** top/bottom, left/right ***/
margin: 10px;               /*** top/left/right/bottom ***/

Background

/*** Individuals ***/

background-color: none|transparent(default)|#999;
background-image: none(default)|url(background.png);
background-repeat: repeat(default)| repeat-x|repeat-y|no-repeat;
background-attachment: scroll(default)|fixed;
background-position: top|left|right|bottom|center|top left(combos)|50%(width) 50%(height);

/*** Shorthand ***/

background: #999 url(background.png) no-repeat top left;

Layouts

CCTV(China Central Television) Headquaters, Beijing, Chain

CSS3

Selectors

h1 ~ div{
	color: #aeaeae;
}
li:nth-last-child(2){
	font-weight: bold;
}
p:first-of-type{
	color: blue;
}
p:last-of-type{
	color: blue;
}
p:nth-of-type(3){
	background-color: #999;
}
p::before,
p::after{
	content: '"';
	font-size: 24px;
}
Complete List of CSS3 Selectors

Transfoms

div{
	transform: scale(2, 2);
	transform: translate(100px, 100px);
	transform: rotate(45deg);
	transform: skew(2, 2);

	transform: scale(2, 2), skew(1, 2), translate(100px, 100px), rotate(45deg)

	transform-orign: 10px 10px;
}

Transistions

div{
	tranistion-property: background-color;
	tranistion-duration: 1s;
	tranistion-timing-function: ease|ease-in|ease-out|ease-in-out|linear;
	tranistion-delay: 1s;

	tranistion: background-color 1s ease 1s;

	background-color: #000;	
}

div:hover{
	background-color: #fff;
}

Animation

@keyframe animate{
	0%{
		background-color: #000;
	}
	100%{
		background-color: #fff;
	}
}

div{
	animation-name: animate;
	animation-duration: 3s;
	animation-timing-function: ease|ease-in|ease-out|ease-in-out|linear;
	animation-delay: 1s;
	animation-iternation-count: 2;
	animation-direction: alternate|reverse|alternate-reverse|normal(default);
	animation-fill-out: forwards|backwards|both|none(default);

	animation: animate 3s ease-in 1s 2 alternate;
}

T

U