Don't like this style? Click here to change it! blue.css

Class 2: Intro to CSS

First, documentation for anyone looking to self-pace:

http://www.w3.org/community/webed/wiki/Main_Page

All CSS specifications and drafts and candidate recs, etc.

Documentation Deep-end Task 1: Go to that second link. Find a candidate recommendation that sounds interesting. Open it, find an interesting feature. Use it. Three words you will see often: user (the client), author (the writer of the webpage), user agent (the browser).

I will stop and pontificate about the flow of the CSS working group and how to stay afloat in the see of standards.

At this point you have some basic HTML down and the very beginnings of some CSS selector skill. Let's give you some basic CSS properties and values to apply to your HTML. I'll break down our rules into 4 dimensions:

For a list of ALL properties check out http://www.w3.org/Style/CSS/all-properties.en.html

For a less scary list see: http://www.w3.org/community/webed/wiki/CSS/Properties

Or http://www.tutorialrepublic.com/css-reference/css3-properties.php

Color Properties and Values

So let's start by coloring some text. The property to learn is color which chooses the color of the text in the selected element.

Here is a list of predefined keywords that will spit out pretty colors: CSS3 Color Keywords

CSS predefined colors

CSS predefined colors

Note that there are many ways to specify colors in CSS:

Color Task 2: Fork and edit the following codepen and color every 3rd line item lightsalmon. (Pick the proper selector from the list of all CSS selectors )

See the Pen yegWXR by Andy Novocin (@AndyNovo) on CodePen.

RGB stands for Red Green Blue, and the values which start with # are hexadecimal RGB values.

RGB Guesser Task 3: Use the property background-color in the selector body to try to get this color right: mystery color. Put your best guess in the chat we can vote on the first five that come in.

HSL is very cool. Take a look at http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color. The basic idea is that you pick your spot on the color wheel in degrees (0 to 360) then adjust the saturation and lightness. It is a lot more intuitive to fiddle around with.

HSL Color Wheel

HSL Guesser Task 4: Try to nail that color in HSL.

Some things you can color.

Group Research Task 5: Let's make 5 groups. Each group will be in charge of one of those 5 properties (background, border, columns, outlines, box-shadows). As a group find the pertinent documentation on that feature. Look for some examples online that are interesting, see if you can alter them based on what you read. As a group build an example of the property being used. Share your work in the class chat. When all 5 are done one representative will present what you found.

We will be seeing lots more on this throughout the course so don't worry if you feel like the groups were not complete.

http://lea.verou.me/css3patterns

Text Rules

For playing with text let's repeat that process for these 5 (a little simpler):

Group Research Task 6: Each group pick one, master the inputs, demonstrate a few usages in a sample page, share the demo.

Font Selection

This is a fun part. The font family of properties can be used to adjust the following:

That's good and all but here is what I love most, searching through the google font API!

Google Font API Task 7: Visit https://www.google.com/fonts and find an interesting font which you think would world for a children's site. Follow the guides to create a dabblet using the font you've selected.

Now let's look through this set of examples: examples of CSS typography and how they did it.