Css training

CSS Overview
You know what CSS is: CASCADING STYLE SHEETS.
Styling of HTML elements VIA standard rules.

Important Topics
1. CSS Syntax / Selectors
2. Including CSS Rules
3. CSS Box Model
4. Floating/Clearing
Effectively
5. Positioning
6. Use of “!important”
declaration
7. Responsive
Considerations

Elements, IDs, Classes
ID (#foo {prop: set;})
One instance per page (usually).
Class (.foo {prop: set;})
Multiple instances per page (often).
HTML Element (foo {prop: set;})
Vague! But powerful!

Specificity in Selectors
Show “lineage” of element
(#wrapper #content .cool)
Build with effective use of
IDs and classes site-wide.
Pseudo-selectors: don’t rely
on them too much.

Ways to Include Rules
External Stylesheet
(Preferred!)
<style> Tag
(Helpful! But not portable!)
Inline style=“” attribute
(Powerful! But messy!)

Inline style=“” Attributes
Browser gives style=“” attributes most priority.
Ve r y p o w e r f u l ! !
Must be manually replicated; not portable!
Makes HTML messy
Useful for JavaScript stuff

More on Specificity…
Depending on ordering in DOM
and degree of specificity of rule
declarations, the more specific
rule will override another.
In other words, if one set of rules
comes after another set, rules
with the same specificity will be
overridden.

What the heck is it
Established primarily by the
width/height, padding, margin
and border of an object.
Accounts for the on-page space
that a block object occupies over
the course of a page (total width
/ height).
Determines if a float can
happen.

Here’s some dumb math
LEFT MARGIN
+ LEFT BORDER WIDTH
+ LEFT PADDING
+ WIDTH
+ RIGHT PADDING
+ RIGHT BORDER WIDTH
+ RIGHT MARGIN
===============
"Calculated" Width

Width and Height
Raw width / height of an element. How much
space it occupies with no modification.
For instance, a 360px wide image, before any
borders are margins, occupies that much space.
Use “Inspect Element” in Chrome to determine
calculated dimensions with all modifiers.

Padding
Spacing “inside” of an element’s borders.
Padding cannot be negative.
Constrains content to calculated width;
when padding is in a nested element,
parent will not expand.

Borders
Reside outside of padding, inside of margin.
They’re just like a line you can place around an
element. You’ll probably see them a lot. Check
out the cool border on this.
Can be styled in stupid ways (dotted, colored).
Still count to total calculated size.

Marginzzzzzzzzzzzzzzzzzz
Extends from element’s border. Gives form to
spacing outside of an element.
Most useful for positioning elements normally.
Try to use this instead of “top” etc. when
possible; only use that for weirdo positioning.
Set left & right margins to “auto” on block
elements with set width to center the element.
Doesn’t work for top/bottom margins.

Misc. Box Model Stuff
Child elements must fit
within the “width”
property of parent
elements (not calculated)
There’s also the “outline”
property that’s similar to
a border, but does not
count to calculated width
SHORTCUTZZ:
margin/padding:
TOP, RIGHT, BOTTOM, LEFT
element {margin: 200px 0;}
element {
padding: 1px 2px 3px;}
border:
WIDTH, STYLE, COLOR
element {border: 1px solid
#fff;}

Floats
Neatly organize block/inline-block elements.
You can float right, none or left, it’s up to you! But try
to float left as much as possible.
(LTR reading, old Internet Explorer)
Takes into consideration box model for width.
Blocks can float around inline content (text).
Parent element must float to inherit heights!

CLEAR THE FLOATS
Used in unison with floats to “clear” a “line” from a
float.
Cleared elements allow more floats to happen on
next line.
Left, Right or Both
Depending on placement of element, use left or right.
Clearing “BOTH” makes an element appear on its own,
devoid of floats

“Styles” of position:
Static – Default. Try to use as much as possible. Based on
DOM flow.
Relative – Follows DOM. Relative to STATIC position.
Absolute – Relative to first non-static parent. Useful for
form label placement within input fields.
Fixed – ALWAYS stays in place. Useful for “sticky” nav
bars, etc. You don’t wanna use this much.
Gangnam Style - just kiddin

“Positions” for position:
Top, right, bottom, left are all
CSS properties. Set px or %.
Allow you to adjust placement of
an object while utilizing the value
set for the “position” property.
Positioned elements still can use
margins! Use with caution.

Allows for the overlap of elements when using positioning.
Z probably refers to like, X, Y, and Z coordinates; depth.
Just a numerical value with no unit.
Keep track of z-indexed elements.
Z-INDEX

You should be writing good, specific CSS.
However, sometimes you really need to override something.
Use the “!important;” declaration RARELY, since, like, if everything’s
important, nothing’s important. B-)
When to Use “!important”

What’s Responsive????
Similar user experience for multiple devices.
Usually constrained to WIDTH of view.
Use percentages instead of fixed units.
Look at 800theface.com! CSS rules for “break”
points within viewable zones.

When doing custom work for a client’s site (implementing forms, a
404 page or whatever) take into consideration if the site’s
responsive. Work with the AM & Graphics to mockup alternate
approaches to maintain responsive stuff.
Is the Site Responsive?

By!!!!!!!!!!!!!!!!!!!!!!!!!!
Later!!!!!!!

Css training

More Related Content

What's hot

Viewers also liked

Similar to Css training

Css training