INTRO TO CSS

Week 8

CSS. What is it?

CASCADING STYLE SHEETS

 

Add styles to HTML pages by targeting specific tags

CSS Rule Breakdown

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;}

 

p{ 

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

 

<p id="red">Blah Blah</p>

 

#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

 

<li class="textChange">bla bla</li>

 

.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)
Made with Slides.com