Don't like this style? Click here to change it! blue.css
First, documentation for anyone looking to self-pace:
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
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
Note that there are many ways to specify colors in CSS:
rgb(255, 0, 128)
rgba(255, 0, 128, .9)
hsl(120, 100%, 50%)
hsla(120, 100%, 50%, .2)
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: . 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 Guesser Task 4: Try to nail that color in HSL.
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.
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.
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.