0.  Today’s featured website:

http://winkervsbecks.github.io/a-triangle-everyday/

1.  Twitter has how many unique colors and fonts? 

Let’s use a cool tool to check out the CSS of Twitter and other sites.

2. CSS Challenge #1

Today you will work with a partner to tackle our first CSS challenge!

In this challenge, you will create a webpage where you will:

– Practice what you’ve learned so far about CSS styling (background colors, Google fonts, links.)

– Experiment with creating div sections of your webpage- how to position them with CSS and how to use them in HTML.

To begin:

– Open Notepad++ and create a new blank page (File, new)

– Copy and paste the following code onto your new blank page

– Save this as csschallenge1.html

Download the code file from here and then copy and paste it into Notepad++

To do:

You have a page that has a 3-column layout with a header.  Please make the following changes:

a.  Change the size of your #header, #leftbar, and #rightbar.  You can make them bigger or smaller.  When you do this, you must change the margin sizes in your #main section.

b.  Add a background image and/or change the background color of your different page sections.  You can just add background-color: #cccccc (for example) to your code.  For a refresher on how to do this, look at your CSS practice files from last week in Notepad++.  Here’s the color list again!

Hint- if your sections seem to be too close to each other, consider making the margins slightly bigger than the size of a section.  For example, if your header is 5em, you can make the top margin for the side sections 6em to give a little buffer.

c.  Add a border around at least one of your sections.  Border properties (copy and paste the following code into the section you want the border):

border-color: #7d6b72;
border-style: dotted;
border-width: 5px;

Change the border color, width, and style.  Other border styles are solid, dashed, double, groove, ridge, inset or outset.

d.  Add the following code to your style sheet for headlines:

h1
{
color: orange;
text-align: center;
font-family: Verdana;
font-size: 3em;
text-shadow: 1px 1px 1px #000;
}

Change the text color and change the font by adding a Google font (for a refresher, look at one of your old files or look at the steps under #2 here)

e.  Add the following code to your style sheet for paragraphs:

p
{
font-family: Verdana;
font-size: 1em;
color: #000000;
}

Change the text color and change the font by adding a Google font (for a refresher, look at one of your old files or look at the steps under #2 here).  It is OK for the font to be the same as your headline.

f.  Add the following code to your style sheet for links:

a:link
{
text-decoration: none;
color: purple;
}
a:visited
{
text-decoration: none;
color: blue;
}
a:hover
{
text-decoration: underline;
color: red;
}
a:active
{
text-decoration: underline;
color: green;
}

Change the colors and the text-decoration values

g.  Get rid of the Twitter bird image and add a different image

h.  We need our links to have the same font as either the headlines or paragraphs.  To do this, add the following code to your style sheet and change the font to what you have for either your headlines or your paragraphs:

body
{
font-family: Verdana;
font-size: 1em;
}

i.  How does your page look now?