Do Now: Create a page on paper

Take out a blank piece of paper and try to make a basic page using as many of the following tags as you can:

  • html
  • body
  • head
  • p
  • ul
  • li

Review: A Basic Page

Review: A Basic Page

<html>
<head>
</head>
<body>
<h1>Scott McClure</h1>
<p>Hi! My name is Scott McClure. I am a product manager at Fidessa and a real coffee geek.</p>
</body>
</html>

Review: A Basic Page

<html>
<head>
</head>
<body>
<h1>Scott McClure</h1>
<p>Hi! My name is Scott McClure. I am a product manager at Fidessa and a real coffee geek.</p>
</body>
</html>

Review: A Basic Page

<html>
<head>
</head>
<body>
<h1>Scott McClure</h1>
<p>Hi! My name is Scott McClure. I am a product manager at Fidessa and a real coffee geek.</p>
</body>
</html>

Review: A Basic Page

<html>
<head>
</head>
<body>
<h1>Scott McClure</h1>
<p>Hi! My name is Scott McClure. I am a product manager at Fidessa and a real coffee geek.</p>
</body>
</html>

Review: Parts of a Tag



< ████    ██████ =" ████ " >

Review: Parts of a Tag



< ████    ██████ =" ████ " >
name attribute value

Review: Parts of a Tag



< img    src =" cutebunny.gif " >

Coloring

Coloring

Coloring

<Frog/>
<Frog/>
<Frog/>
<Frog/>
<Frog/>
<Frog/>
<Flower/>
<Flower/>
<Flower/>
<Lillipad/>

Coloring

<Frog id="Smiley"/>
<Frog id="Timmy"/>
<Frog id="BradPitt"/>
<Frog id="Keisha"/>
<Frog id="Baby"/>
<Frog id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>

Coloring

<Frog id="Smiley"/>
<Frog id="Timmy"/>
<Frog id="BradPitt"/>
<Frog id="Keisha"/>
<Frog id="Baby"/>
<Frog id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>

"id" attribute identifies a specific tag. Must be unique.

Coloring

  1. Color Smiley purple.
  2. Color Timmy green.
  3. Color Kei$ha blue.
  4. Color Sleepy tan.
  5. Color Baby pink.
  6. Color Brad Pitt lavender.

Coloring

<Frog id="Smiley"/>
<Frog id="Timmy"/>
<Frog id="BradPitt"/>
<Frog id="Keisha"/>
<Frog id="Baby"/>
<Frog id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>
								
#Smiley {
	color: purple;
}
#Timmy {
	color: green;
}
#BradPitt {
	color: lavender;
}
#Keisha {
	color: blue;
}
#Baby {
	color: pink;
}
#Sleepy {
	color: tan;
}

Coloring

Coloring

  1. Color frogs green.
  2. Color flowers red.
  3. Color lillipads light green.

Coloring

<Frog id="Smiley"/>
<Frog id="Timmy"/>
<Frog id="BradPitt"/>
<Frog id="Keisha"/>
<Frog id="Baby"/>
<Frog id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>
							
frog {
color: green;
}
flower {
color: red;
}
lillipad {
color: lightgreen;
}

Coloring

Coloring

<Frog class="top" id="Smiley"/>
<Frog class="middle" id="Timmy"/>
<Frog class="middle" id="BradPitt"/>
<Frog class="bottom" id="Keisha"/>
<Frog class="bottom" id="Baby"/>
<Frog class="bottom" id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>

Coloring

<Frog class="top" id="Smiley"/>
<Frog class="middle" id="Timmy"/>
<Frog class="middle" id="BradPitt"/>
<Frog class="bottom" id="Keisha"/>
<Frog class="bottom" id="Baby"/>
<Frog class="bottom" id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>

"class" attribute identifies similar tags. May be used on multiple tags.

Coloring

  1. Color bottom frogs green.
  2. Color middle frogs purple.
  3. Color top frogs blue.
  4. Color flowers red.
  5. Color lillipads light green.

Coloring

<Frog class="top" id="Smiley"/>
<Frog class="middle" id="Timmy"/>
<Frog class="middle" id="BradPitt"/>
<Frog class="bottom" id="Keisha"/>
<Frog class="bottom" id="Baby"/>
<Frog class="bottom" id="Sleepy"/>
<Flower id="left"/>
<Flower id="center"/>
<Flower id="right"/>
<Lillipad/>
							
frog .bottom {
  color: green;
}
frog .middle {
  color: purple;
}
frog .top {
  color: blue;
}
flower {
  color: red;
}
lillipad {
  color: lightgreen;
}

Parts of a CSS Rule


██████ {

    ██████=██████

}

Parts of a CSS Rule

selector
██████ {

    ██████=██████
    property    value
}

Selectors

  • Define what you want to style.
  • Select a single ID: 
    #myPicture {
  height: 200;
  width: 100;
}
  • Select a class: 
    .friendPictures {
height: 150;
width: 75;
}
  • Select all of a single type of tags: 
    p {
   color: red;
}

Properties

Define how you want to style.

Common properties:

  • color
  • background-color
  • height
  • width
  • font-size

Combining it all together!

<html>
   <head>
      <style>
      body {
         background-color: green;
      }
      h1 {
         color: red;
         font-size:20px;
      }
      p {
         color: blue;
         font-size:12px;
      }
      </style>
   </head>
   <body>
	 <h1>My awesome page!</h1>
	 <p>Some really colorful text.</p>
   </body>
</html>

Your turn!

Go to this URL: http://bit.ly/tywls-css-example

Try:

  • Changing colors
  • Adding properties
  • Adding rules
  • Adding id attributes

Want to learn advanced selectors?

Go to: http://bit.ly/selector-game