Advanced CSS Examples

Establishing Defaults

Normalize (recommended)
CSS Reset

Border Radius

READ: Do we need prefixes anymore?

Text Shadows

Simple Text Shadow

Multiple Text Shadows

Offset Text Shadow

Blurry Text Shadow

Chris Coiyer's Text Shadow Examples

Box Shadows

Chris Coiyer's Fancy Pseudo-Element Shadow Effects

Advanced Selectors

Universal Selector:

* { margin: 0; padding: 0; }

Add margin:0; and padding:0; to EVERYTHING

#contact * { display: block; }

Add display:block; to everything INSIDE the element with an ID of contact

Child Selector:

#exampleList > li { border: 1px solid red; }

Select only li that are a child of #exampleList

This list item has a border
This list item has a border
- This list item has no border
- This list item has no border
This list item has a border
This list item has a border

Sibling Selector:

h1 + p { font-weight: bold }

Select only adjacent sibling p tags of the h1

Example Sibling Selector

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nulla eius quia pariatur voluptates suscipit quisquam molestiae nisi aut vel laudantium accusantium ipsa quaerat natus, nesciunt consectetur repudiandae saepe facere!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis adipisci labore, itaque hic praesentium dolorem consequatur quos deserunt non, sit unde consectetur accusantium et consequuntur assumenda laborum eius dignissimos. Nam?

General Sibling Selector:

h1 ~ p { font-weight: bold }

Select only general sibling p tags of the h1

Example General Sibling Selector

CSS Tricks: Child and Sibling Selectors

Attribute Selector:

img[alt] { border: 3px solid red; }

Select every image with an alt attribute

input[type="text"] { border: 3px solid red; }

Select every input with a type attribute of "text"

[attribute^=something]

Will match an attribute that begins with "something".

[attribute$=something]

Will match an attribute that ends with "something".

[attribute*=something]

Will match an attribute that contains "something".

a[href^=http] {
	padding-right: 10px;
	background: url(arrow.png) right no-repeat;
}