Welcome to class #2: CSS

What is CSS?

Cascading style sheets.
Idea has existed since beginning of markup languages, "SGML" or Standard Generalized Markup Language (XML & HTML).
As HTML grew in popularity, web developers were frustrated at the lack of control over appearance sites had in different browsers and machines.
In 1994, nine different style sheet languages were proposed to the World Wide Web Consortium.
In 1997, CSS had its own working group.
CSS3 started in 1998, still used today.
Full compatibility with browsers around 2005.
CSS3 split into "modules", ie "Color".

Today

We're covering a basic CSS syntax and setup.
We're going to briefly touch on a couple of design concepts that are important for CSS: color and typography.
Briefly, there are many elements of design. Form, shape, color, typography, grid systems and logo are a few of them. We will talk about each of those in later classes.

Three ways to implement CSS

inline

Adding styling inside of HTML tags.
Least effective use of CSS.
Not reusable or global.
Okay to fix something that only happens once.
Many tags not supported for inline.
Overrides internal and external sheets.

Example:

<p style="color:red;text-decoration:line-through;background-color:white;display:inline;font-size:50px;">Hello World!</p>

Hello World!

internal style sheet

Written into head of HTML.
Not ideal, better than inline.
Okay for static pages.
Overrides external sheets.

Example:

<head> <style type="text/css"> body { margin:10%; } p { font-size:14px; } </style> </head>

external style sheet

The best way to implement CSS.
CSS rules are written into separate page, like styles.css or css.css.
Can be applied to multiple pages, on top of other styles.
Add sheet to HTML with path link in head.

Example:

CSS Basic Syntax

Selectors, Properties, Values

Selectors are names of styles.
Basic selectors are named after HTML tags: body, html, p, h1, etc.
Properties describe design/style elements: font-size, color, line-height, etc.
Values are numbers or descriptions of properties: 14px, red, Times New Roman, etc.
Format is:
```
 selector { property: value } 
```
Very flexible for writing, will explore different ways to combine style selectors together. ie:
```
 h1, h2, h3 { font-family: sans-serif } 
```

Selectors

Type: p, h1, body, etc.
Type selectors are written like this:
```
 p { color: pink } 
```

Class: usually describes group of divs or html tags. Written inside the html brackets:
Class is written like this:
```
.content { color: red }
```

ID: usually used to describe a specific div or html element. Example:
ID is written like this:
```
#chapter1 { color: blue }
```

Compound selectors combine type, class and id to create styles that apply to specific elements or multiple elements. Some examples:

a.nav, a.content { color: blue; text-decoration: underline }

```
p#sidebar { font-size: 14px }
```
```
p.content #diary { font-style: italic }
```

Exercise 3

Add CSS to your pages using either internal, external or inlines styles.
Also going to check HTML from last week.

Selectors Cont.

Descendant

Describes elements that is a descendant of another element in document tree.
```
h1 strong { text-decoration:underline }
```
Used:

Child

Difference between child and descendent is sort of confusing. Child is your direct descendent. So if there are multiple tags contained within a particular div or p, the ones effected are directly enclosed in the original div.
```
body > p { color: purple }
```

Sibling

You probably won't use sibling much, but it has specific, pretty useful purpose. This is to effects elements that directly follow other elements. A lot of css types have predetermined rules, like p always has a top and bottom margin. If this doesn't suit your design, you could add a sibling description to your h1 or h2 to change that.
```
h1 + p { margin-top: 0 }
```
This will only effect a p directly following an h1.

Attribute

Nice, easy way to add styles to whatever type you want with a specific title, not worrying about class or id.

[title=cats] { border: 1px solid black }

Also written:
```
[title~=cats]
```
or just
```
[title]
```
We will probably not use attributes much in this class, but they are very valuable for websites with lots of content, so you can tag things more specifically.

Universal

Like the name implies, these rules apply to html tags regardless of where they are nested on the page.
```
*.content
```
```
*#user
```

Pseudo

Pseudo CSS selectors describe elements that cannot be described by the document tree, usually elements that are dynamic in some way.
Very useful for links, targets, etc.
```
:link
```
describes links that have not been visited.
Other link pseudo classes include
```
:visited, :hover, & :active
```
Written like this:
```
a:hover { color: red }
```

Color

Color is obviously very important to the design of a site and any colors that are not part of images or other media objects will be described as properties and values in CSS selectors.

Color on the web and computer screens is always different from color that you see in print. Print colors are usually less bright and less saturated. If you are used to designing on paper this is important to note. Most of us are familiar with the way colors looks on a screen.

Color is very difficult to master as a graphic designer. It is very subjective and dynamic. Simple color schemes usually work best for websites. I actually prefer monochromatic schemes.

Web color is based on RGB, and the additive color wheel. Additive means that if you add all colors together you get white. The absence of color is black. Pigment in the real world works the opposite way.

Color is defined by hue, saturation and brightness. This is referred to as HSB. RGB does not do a good job of describing these elements. It is very difficult to design with RGB. HSB is much easier, but not used on the web. That's why its always good to work with color in Photoshop or a scheme editor, so you can really see what you are doing. Using RGB should be the last step.

Some design resources:

Kuler color designer (by Adobe)
DigitalColor Meter (on ur Mac)
Color Scheme Design (I use this one)
RGB color slider
Color sliders!

Writing color in CSS

Selectors accept some color names as values:

 red, black, white, blue, purple, gray, gold, etc... Here's a list: Color names

HEX values:
```
body { color: #ff69B4 }
```
(this is hot pink)
RGB values. Red:
```
rgb(255,0,0)
```
, Green:
```
rgb(0,255,0)
```
, Blue:
```
rgb(0,0,255)
```
.

Web safe.

Not all colors are web safe. Most monitors these days can display millions of colors easily. It's not that important anymore, mostly for old machines/displays. Here's a list of ones that are: Web safe.

Font

Typography is just as complex and important as color. It's simpler on the web than in print, but still pretty complex. Simple font schemes are the best. It rarely works to have more than one font on a single page. The trick is choosing the right font.

I tend to default to sans-serif font faces. This means fonts with out the little feet. Helvetica is perhaps the most popular example. The font of this page is Helvetica.

Serif fonts are also great. Times New Roman is very familiar (though not the font used by the New York Times (which is Georgia)).

When designing with CSS, we have tons of attributes and values to style our fonts. We can choose the size, decoration, line height, font family, color and much more. If you're really into fonts, there's a crazy amount of info here: Fonts. If you're like me, you stick with a couple of decent fonts, and adjust their properties accordingly.

I will probably say this a lot, but line-height is probably the most underrated property. It's very important for readability.

The default font families supported on the web are: serif, sans-serif, Arial, Comic Sans, Courier New, Georgia, Impact, Lucida Console, Palatino, Tahoma, Times New Roman, Trebuchet, Verdana.

You can embed other fonts on your webpage. This can create longer loading time, but its probably worth it in most cases. Google hosts a lot of fonts, which makes this very easy: Google Fonts. I used the Google Font "Creepster" for the links on this page.

Exercise 4

Add full CSS to your web pages with an external style sheet.
Use color and font and describe your scheme.
Use at least 5 selectors.
Play with different types, classes, ids, and attributes.

Welcome to class #2: CSS

What is CSS?

Today

Three ways to implement CSS

inline

internal style sheet

external style sheet

CSS Basic Syntax

Selectors, Properties, Values

Selectors

Exercise 3

Selectors Cont.

Color

Font

Exercise 4

LINKS