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)
INTRO TO CSS/Text/Color
By shadow4611
