INTRO TO CSS

Week 8

CSS. What is it?

CASCADING STYLE SHEETS

Add styles to HTML pages by targeting specific tags

CSS Rule Breakdown

You can also have several declarations in a single rule

how to add styles

External style sheet - Best way to go. Separate document with .css suffix. Document is then linked to you HTML page.
Embedded style sheet- Styles are placed in the <head> tag and only effect the tags in that HTML document
Inline styles - Styles are placed in an HTML tag using the "style" attribute. Only effects the tag that the style was placed in.

DEMO

How to set up an external CSS document and link to your HTML document

Using inline and embedded styles

The cascade

If there's conflicting styles, the browser uses the "cascade" to determine which style to show.

You can override all styles by assigning the !important indicator to a declaration.

The cascaDe

The more specific the tag is, the greater chance of the browser choosing to load that style

ex: em{color:green;}

p em {color: red;}

The cascaDe

The items at the top will override items below them

The cascaDe

If rules of identical weight conflict, which ever comes last, wins

p {color: green;}

p {color: yellow;}

color: green;

color: yellow;

}

grouping selectors

You can apply a style to more than one selector

p, em, li {color: red;}

box model

Every element on the page is it's own "box"

You can apply properties such as margins, padding, backgrounds and borders.

You can also reposition them

Formatting text

Properties

font-family: Arial, Helvetica, sans-serif;

font-size: size of font (ems, px or %)

font-weight: boldness (normal, bold, or value)

font-style: italics (normal, italic, oblique, inherit)

font-variant: small caps (normal, small-caps, inherit)

font: style weight variant size/line-height family

text-color: changes the font color (name or hexdex #)

USING EMs

EMs are a relative measurement and is based on the parents measurement. They're good for scaling fonts are are often seen used in responsive design.

The default body size is always set to 1em

USING EMs

1em is about 16px;

You can convert from ems using a simple math equation

current px measurment/16px = em

12px/16px=.75em;

Always include the decimal for an exact conversion

USING EMs

Remember: ems are based on the inherited size of the element.

If I set an body tag to 18px (1.125em) and I wanted an H1 tag inside the article tag to be 14px, my equation would change to:

14px/18px=.77777778em

target/content=result

USING GOOGLE FONTS & TYPEKIT

MORE CSS PROPERTIES

line-height: leading (number, percentage, normal, inherit)
text-indent: indents the first line of a paragraph (#)
text-align: aligns text (left, right, center, justify, inherit)
text-decoration: applies a line to the text (none, underline, overline, line-through, blink)
text-transform: caps or lowercase text (none, capitalize, lowercase, uppercase, inherit)

MORE CSS PROPERTIES

letter-spacing: kerning (#)
text-shadow: applies a shadow to text (5px, 5px, #777) (horizontal offset, vertical offset, shadow color)
vertical align: vertical alignment of inline elements (baseline, sub, super, top, middle, bottom, #)
visibility: hides elements (visible, hidden collapse, inherit)

selector types

element selectors: p {font-size:12px}

grouped selectors: p, em, li {font-size:12px}

selector types

Contextual Selectors

Selects an element based on its context

Descendant selectors: targets an element contained within another element

p em {color:green;} Will only target em within a p

selector types

Child Selector: targets only the direct children

p >em{color:green} will only target an em tag if it's within the p with no other tags in between.

Adjacent Sibling: targets an element that comes directly after another element with the same parent

p+em{color:green} will only target an em tag if it directly comes after a </p>

CONTEXTUAL SELECTORS

selector types

General Sibling: selects an element that shares a parent and occurs after in the source order. BUT it doesn't have to be directly after

p~em:{color:green;} will target an em tag if it comes after the p (there can be tags in between)

Does not work in IE8 or lower

CONTEXTUAL SELECTORS

selector types

Target elements by their id values.
Each element can only have 1 ID
Each page can only have 1 element with that ID

#red {color: red;}

ID SELECTORS (unique)

selector types

Works like an id selector except you can target a class.
You can use the same class on multiple items
You can use multiple classes on the same element

.textChange {font-size: 24px;}

CLASS SELECTORS (not unique)

specificity with selectors

The top will override what's below it

1. ID selectors

2. Class selectors

3. Contextual selectors

4. Individual element selectors

strong{color:red;}

h1 strong{color:green;}

styling bullets

list-style-type: changes the marker. By default it's a disc (disc, circle,square,decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek)
list-style-position: changes where the bullet is placed. Default is outside of the content area (inside, outside, inherit)
list-style-image: allows you to add an image for a bullet (url:path to image)

CSS colors

CSS color values

There are several ways you can specify a color value

Name - color:red
RGB Value - color: rgb (200, 178, 230)
Hexdex #- color: #888f90
HSL (new in CSS3) - color: hsl (265, 32%, 90%)

opacity values

You can specify an opacity value of a color two different ways:

color: rgba(12, 130, 20, 50%)
color:#ffffff; opacity: .5

color properties

color: #ffffff (color value, inherit)
background-color:#ffffff ( color value, transparent, inherit)

color properties

color: #ffffff (color value, inherit)
background-color:#ffffff ( color value, transparent, inherit)