CSS Core Concepts

TARGETING PAGE CONTENT

Structuring HTML correctly
Tag is appropriate for content
Be consistent how you structure content through out site
Simplify code, avoid non-semantic markup
Element Selectors
are global in nature they are going to occur in every single instance of that element on that page
Best for applying sort of initial baseline formatting that can then be overwritten as needed with more
specific selectors.
Class Selectors
target any element on the page that has the same class
use classes that describe the content not the css
How to best utilize them?
Id Selectors
target any element on the page with a specific id attribute per page
A class and ID selector conflict with each other, the ID selector's styling will be used in favor of the
class because it's more specific.
Using classes and IDs
use them to describe and identify specific content
it is best to have semantic meaning than presentation meaning
Some use ID to allow the use of JavaScript
Use ID if content is unique and does it need to be identified
ie. pageHeader, pageFooter
Use class if content is not unique but needs to be identified
i.e. names
Element-Specific selectors
target very specific elements
limit its use because it is the best selector for the job
Universal selector
Means every element on the page
Applies to every single element on the page, so all paragraphs, headings, unordered lists, sections,
aside, articles.
Grouping selectors
When several dierent elements on the page require the exact same styling
Descendants Selectors (h1 p)
We can more precisely target content based on the relationship between nested tags and their
parents.
Use the most eective and ecient descendant selector possible
Child Selectors (>)
Apply only the elements that are direct children of the parent
Adjacent Selectors (+)
style in an element based on which element comes before in the document, providing that both of
those elements are inside the same parent.
Attribute Selector
Target elements based on the elements' attributes and the values of those attributes.
Target presence of attribute: a[title]
Target specific value of attribute: a[title="visit lynda.com"]
Target attribute based on pattern: a[class~="red"]
looking for white space separated list to find the given value
Target attribute based on pattern if it begins with: a[href^="http://"]
Target attribute based on pattern if it ends with: a[href$="pdf"]
Target attribute based on pattern look for any literal string that has the value given inside of it :
a[title*="visit"]
Target specific pattern: a[href*="_docs"]
Pseudo-class selectors
target elements or instances that lie outside that lie outside of the DOM or are too specific for simple

 target elements or instances that lie outside that lie outside of the DOM or are too specific for simple
selectors to target
:hover (pseudo-class selector)
a:hover (targeted pseudo-class selector)
ul a:hover (descendant selector with a pseudo-class selector)
Dynamic Pseudo-class Selectors
Target elements based on something other than attributes, content, or element type. Usually refers
to something that can change over time, or that is based on user interaction.
UI Element State Pseudo-class Selectors
Target specific user interface elements in regards to whether or not they are currently enabled.
Structural Pseudo-class Selectors
Target elements based on specialized information within the DOM that simple selectors cannot
target. This can be pattern-matching child-to-parent relationships, or other structural information.
Other Pseudo-class Selectors
Other pseudo-class selectors exist that can't really be grouped into any one category. These
selectors give you even more specific targeting capabilities based on things like language or URL
targeting.
Dynamic Pseudo-Class Selectors
links, link states and target pseudo-class selectors
<a> should be in the order l v h a
a:link, a:visited, a:hover, a:active
a:(id) - matching id value to specific web page
Structural Pseudo-Class Selectors
span:first-child - find every span in the document and if it is the first child of its parent element, go
ahead and give it this styling
h2:first-of-type: find all h2s and see when they are inside of a parent element. When they are the first
h2 within the parent element, style them.
p:only-child: find a paragraph and that paragraph is the only child inside the parent, go ahead and
give it that styling
p:only-of-type: when the paragraph is the only paragraph inside of a parent element style it.
Nth-child selectors
Target elements based on patterns that describe which elements within a parent that you should
target.
Simple nth-child
li:nth-child(2): second element
li:nth-child(2n): every second element
li:nth-child(odd): every odd element
li:nth-child(even): every even element
li:nth-child(2n+1): every second element beginning with 1 (oset)
li:nth-child(-2n+8): start at 8 and select every second one going back
li:nth-child(5n-1): start at -1 and select every fifth element
Complex nth-child
li:nth-child(1n+6): start at 6 and select every one after that
li:nth-child(1n+6):nth-last-child(1n+6):
start at 6 element and select every one after that
start at 6 element from the end of the list and every element going up: these two are meeting
li:nth-child(-1n+5), li:nth-last-child(-1n+5)
start at 5 element and select every one going back
start at 5 element from the end of the list and every element going back
Pseudo-element selectors
p::first-line:
p::first-letter:
a::after { content: " (outside link)";}
a::after { content: "[" attar(href) "]"; }
RESOLVING CONFLICTS
What happens when styles conflict?
If the properties conflict, the properties of one rule will replace the other.

 If the properties conflict, the properties of one rule will replace the other.
If they don't conflict with one another, the properties are added and the rules are cumulative, leaving
you with a mixture of the two rules.
Understanding the cascade
The last rule applied wins.
NOTE: inline have other things to take into account: specificity, inheritance. But inline styles almost
always win in the event of a conflict.
Using inheritance
If you apply the property to a parent element, all the elements inside of it will have that property
applied to it as well.
If a child element has a style that diers or conflicts with the parent styles, the child styles always
wins.
As sites become more complex, inheritance becomes more dicult to track.
Keep styles organized will help you avoid conflicts caused by inheritance.
Placing your most basic, default styles on top-level elements is an ecient way to style elements sitewide.
Remember that styles are cumulative; you must account for formatting inherited through parent
elements.
Selector specificity
how specific is it?
Element: specificity value of 1
ID: specificity value of 100
Classes: specificity value of 10
NOTE: Inheritance takes precedence over selector specificity
The !Important declaration
WMD of CSS
Important declaration wins
Only another more specific important declaration can win over an important declaration
Reducing conflicts through planning
General Guidelines
Avoid using local styles when possible.
They add a sometimes unwarranted extra layer of complexity to a site.
Updating or modifying styles can become a chore.
Local styles are easy to miss, especially in a team environment
Do not use inline styles except to very specific circumstances.
They are almost impossible to detect and maintain.
Develop a Strategy for Specificity
Don't mix class and ID selectors without having a plan that guides when they are to be used.
Sections of ID selectors can be hard to overwrite later if not accounted for.
If you find yourself writing descendent selectors with three or more selectors, consider revising the
strategy.
Use Inheritance to your Advantage
If you are familiar with your page structure, you should be able to identify global formatting across
your site.
Those formatting needs can then be written as global styles on parent elements, and inherited by the
rest of the site.
This results in fewer rules to write and easier styles to maintain.
Think About How Styles Relate to One Another
New designers often make the mistake of styling each element individually, as it's encountered.
This can lead to bloated style sheets and hard to maintain styles.
Thinking of styles as related formatting allows you to plan and write organized style sheets.
BASIC TEXT FORMATTING
Setting a font family (using a font-stack)
font-family: first_value, second_value, third_value;
Using @font-face (using web fonts)
/* @font-face rule declarations */
Normal, bold, italic, bold italic

 Normal, bold, italic, bold italic

Setting font size
Absolute: pixels
Reserved words: xx-small small medium large xx-large
Relative: ems
Writing font shorthand notation
font: font-weight font-style font-variant font-size/line-height font-stack;
font:font-size font-stack; (minimal: font-weight:font-style:font-variant pass implicit)
Adjusting paragraph line height
pass line height as inherited value use multiples not ems
Styling Container Elements
Understanding the box model:
width (content-width):
height(content-height):
When you don't have an explicit width set for the element, you're going to lose some of that width, or
if you reduce those amounts you're going to gain some width.
example
body width is 600px
div padding: 10px
div border: 1px solid color
div margin: 10px
20+20 + 2 + 558(content width)
example
set div width to 570px will reduce margins
example
set div width to 600px will extend the div will overflow their parent container and overflow can be
hidden using overflow:hidden
Controlling element spacing
margin: top right bottom left
Vertical don't behave the same as horizontal
Vertical margin collapse: when two margins touch each other, they collapse, if their values match,
you get what one of the values is, if their values are mismatched you get the larger to two values
Essentially when you have elements that touch each other or even nested elements, if there's nothing to keep the
vertical margins from touching each other, meaning there's no border there, there's no padding there, there is just
content, then all those vertical margins collapse; outer element's vertical margins collapse and the inner element's
vertical margins collapse.
margin: 0 auto;
Controlling interior spacing
padding: top right bottom left
Content width and content height, the width and height properties are added to padding.
padding: use percentage to give you fluid and flexible padding regions.
Adding borders
border: 1px solid black
Defining element size
Example1
body {width:600px;}
div1 { width:300px; padding:25px;}
div2{ width:300px; padding:25px;}
To keep content away from the edge of an element is to use padding
Won't work adds up to 700px;
Example 2: fix problem from Example 1
body {width:600px;}
div1 { width:250px; padding:25px;}

div2{ width:250px; padding:25px;}

div2{ width:250px; padding:25px;}

Creating rounded corners
border-radius: 25px; (25px: top, right, bottom, left)
border-radius: 25px 10px; (25px: top-left, bottom-right and 25px: top-right,bottom-left)
border-radius: 25px 10px 5px; (25px: top-left, 10px: bottom-left, top-right, 5px: bottom-right);
border-radius: 25px 10px 5px 0; (25px:top-left, top-right, bottom-left, bottom-right)
Using background images
background-image:url(_images/tweet_90.png);
relative to the css file not the page you are using it in
we have control on image tiling
background-repeat: no-repeat;
Controlling images positioning
background-position: left top; // line top left corner of image to container
background-position: horizontal-value vertical-value;
background-position: top; // center is assumed
background-attachment: fixed; // fix the background image relative to the viewport not the containing element
Using multiple backgrounds
background-image:url(_images/featured.png),url(_images/sm_nyc_banner.jpg);
last image will be at the bottom of the layer
top image will be at the top of the layer
background-repeat: no-repeat
background-position: 0 25px, led top;

Background shorthand notation

background: #666 url(_images/sm_nyc_banner.jpg) no-repeat left top;
background:url(_images/featured.png) no-repeat 0 25px,url(_images/sm_philly_banner.jpg) no-repeat left top, #666;
background: #600;
WORKING WITH COLOR
HSL:
Hue: red at 0 and 360, green at 120 and blue at 240
Saturation: amount of color, how much color a particular shade has
Lightness: how bright or dark the color is
Styling drop shadows
box-shadow: hr_length vt_length blur_radius spread color
text-shadow: x_offset y_offset blur_radius color
CSS Gradients
background: #f7f0b7; //default color for old non supported browser
background: -moz-background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);
background: -webkit-background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);
background: linear-gradient(top, #f7f0b7 0%, #b57c12 100%);