CSS

Cascading Style Sheet

Syntax

selector { 
    property: value; 
    another-property: value;
}

Who?

What?

How?

Syntax

<h1>Almakinah</h1>

h1{
  color:grey;
  background-color:yellow;
  font-size: 50px;
}

Playground

Attaching CSS to a document

Using inline style on HTML node.
Using the <style> tag in the HTML document
Using the <link> tag to reference external files

Using inline style on HTML node

<h1 style="color:green">Almakinah</h1>

Using the <style> tag in the HTML document

<style>
h1{
  color: green;
}
</style>
<h1>Almakinah</h1>

Using the <link> tag to reference external files

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

open your editor
create a new folder
(gearup-css)
create an HTML file
(gearup-css/index.html)
create a folder inside your folder
(gearup-css/css)
create a CSS file inside your css folder (gearup-css/css/styles.css)

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body></body>
</html>

index.html

Selectors

Type(element) Selector

span{
    text-transform: uppercase;
}

ID Selector

#special-title{
border: 5px solid pink;
}

<h1 id="special-title">Almakinah</h1>

Class Selector

.readmore {
    background-color: blue;
    color: white;
}

<a class="readmore" href="#">read more</a>
<a class="readmore" href="#">read more</a>
<a href="#">See All </a>

Group Selectors

/* Two tags at the same time */
h1,h2  {

}

/* Element selector and class*/
td.highlighted{

}
/* Descendant Selector: td that is a child of tfoot*/
tfoot td {

}

/* Direct Child Selector: th that is a direct child of tfoot */
tfoot > th {

}

/* always select the second p */
p + p {

}

Grades Table Exercise

Color Palette Exercise

table

{

border
half width
centered text

height:40px;

}

http://scratchpad.io/auspicious-sweater-8954

Color Palette Exercise

merged table

{

border
full width
centered text

width:50%;
height:80px;