CSS INDEX &              Guide

This is so cool!
Let have some  FUN!
 I got 84%!

        oh CWAPP.

Even after studying this, I only got 84% on the exam...

Introduction

What is CSS?
The Big Problem
Syntax
Declarations
Comments

Selectors

Definition
Element Selector
ID Selector
Class Selector
Specific Selections
Grouping Selectors
Minimize Code
Test #1

How To

Inserting CSS
External Style Sheet
Internal Style Sheet
Inline Styles
Multiple Style Sheets
Cascading Order
Test #2

Backgrounds

Background Properties
Background-Color
Background-Image
Horizontal & Vertical Repeat
Position & No-Repeat
Margin-Right vs Padding
Shorthand Property
Background Attachment
"Advanced" Stuff?
Review
Test #3

Text

CSS Text
Color
Alignment
Decoration
Transformation
Indentation
Character Spacing
Line Spacing
Direction
Word Spacing
Disable Wrapping
Vertical Alignment of Image
Shadowing
Review: Text Properties
Test #4

Fonts

Serif vs Sans-Serif
Font Families
Font-family
Font-style
Font-size
Font-size: pixels
Font-size: em
Font-size: em & %
Font-weight
Font-variant
Font shorthand
Review: Font Properties
Test #5

Links

Styling Links
Link States
Text Decoration
Background Color
Different Hyperlinks
Create Link Boxes
Test #6

Lists

CSS Lists
Unordered Markers
Ordered Markers
Image Markers
Crossbrowser Solution
Shorthand Property
List Properties
Test #7

Tables

Borders
Collapse
Width & Height
Horizontal Text Alignment
Vertical Text Alignment
Padding
Color
Fancy Tables
Caption Positioning
Test #8

Box Model

Definition
Design A Box Model
Width & Height of Elments
The Math to Element Sizes
Test #9

Border

Property
Style
Width
Color
Style, Color & Width Properties
Style Individual Sides
Detailed vs Shorthand
Shorthand: Border-Width
Shorthand: Border-Style
Shorthand: Border-Color
Shorthand Property
Border-Top
Border-Right
Border-Bottom
Border-Left
Review: Border Properties
Test #10

Outline

Definition
Line
Style
Color
Width
Shorthand
Review
Test #11

Margin

Definition
Individual Sides
White Space Above Element
White Space Below Element
Shorthand
Review
Test #12

Padding

Definition
Individual Sides
Padding-Top
Padding-Right
Padding-Bottom
Padding-Left
Shorthand
Review
Test #12

Dimension

Properties
Set Max-Width
Different Elements
Height With Percentage
Image Widths
Min-Width & Max-Width
Min-Height & Max-Height
Review
Test #13

Display

Block-Level & Inline
Display: Inline
Display: Block
Hide an Element
Display:None vs Visibility:Hidden
Width, Max-Width & Margin:Auto
Test #14

Position

Definition
Position: Static
Position: Relative
Position: Absolute
Position: Fixed
Overlapping Elements
Shaping Elements
Overflow With Scroll
Handling Overflow
Customize Cursor
Review
Test #15

Float

Definition
Clear Property
Clearfix Overflow: Auto;
Web Layout
Float Bordered Image
Float Captioned Image
Float First Letter of Text
Float a Horizontal Menu
Homepage Without Table
Review

Inline Block

An Old Way
A New Way

Alignment

Center With Margin
Left/Right With Position
Left/Right With Float
Test #16

Combinators

Definition
Descendant Selector
Child Selector
Adjacent Sibling Selector
General Sibling Selector
Test #17

Pseudo-Classes

Definition
Anchor
Pseudo-Class & CSS Classes
First-Child
First-Child in Elements
Elements in First-Child
Lang
Styling Hyperlinks
Focus
Checked
Disabled & Enabled
Empty
First-of-Type
In-Range
Invalid
Last-Child
Last-of-Type
Not
Nth-Child
Nth-Last-Child
Nth-of-Type
Only-of-Type
Only-Child
Optional
Out-of-Range
Read-Only
Read-Write
Required
Root
Target Anchor Highlight
Target Tabbed Menu
Target Modal Dialog
Valid
Review
Test #18

Pseudo-Elements

Definition
First-Line
First-Letter
Pseudo-Elements & CSS Classes
Multiple Pseudo-Elements
Before
After
Selection
Review
Test #19

Navigation Bar

Create Navigation Bar
Inline List Items
Floating List Items
Horizontal Navigation Bar
Adjusting Block Widths
Vertical Navigation Bar

Images

Image Gallery
Image Opacity
Hover Effect on Transparency
Text in Transparent Box
Test #20

Image Sprites

Definition
Navigation List
Hover Effect

Attribute Selector

Definition
= "Value"
~ = "Value"
| = "Value"
^ = "Value"
$ = "Value"
* = "Value"
Styling Forms
Test #21

CSS3

Introduction

CSS3 Rounded Corners

Border-Radius Property
Specify Each Corner
Elliptical Corners
Browser Support
Review
Test #22

CSS3 Border-Images

Definition
Source
Shorthand
Slice
Slice Values
Width
Repeat
Review
Test #23

CSS3 Backgrounds

Multiple
Size
Contain & Cover
Sizes of Multiples
Full Sized
Actual Full Sized
Origin
Clip
Review
Test #24

CSS3 Colors

New in CSS3
RGBA Colors
HSL Colors: Hue
HSL Colors: Saturation
HSL Colors: Lightness
HSL Color Combinations
HSLA Colors
Opacity
Test #25

CSS3 Linear Gradients

Gradient Backgrounds
Top to Bottom
Left to Right
Diagonal
Using Angles
Using Multiple Color Stops
Transparency
Repeating

CSS3 Radial Gradients

Color Stops Spacing
Set Shape
Size Keywords
Repeating
Test #26

CSS3 Shadow Effects

Text Shadows
Multiple Text Shadows
Box-Shadow
Review
Test #27

CSS3 Text

Text Align Last
Text Emphasis
Text JustifyText Overflow
Overflow Hover
Word Wrapping
Word Breaking
Review
Test #28

CSS3 Fonts

Font Formats
Browser Support
@Font-Face Rule
Bold
Descriptors
Test #29

CSS3 2D Transforms

2D vs 3D
Translate
Rotate
Scale
SkewX
SkewY
Skew
Matrix
Review
Test #30

CSS3 3D Transforms

RotateX
RotateY
RotateZ
Review
Test #31

CSS3 Transitions

Creating Transitions
Width Property
Change Several Properties
Transition-Timing-Function
Transition-Delay
Transition + Transformation
Shorthand
Review
Test #32

CSS3 Animations

Animations
@Keyframes Rule
Using Percentages
Change Colors & Positions
Animation-Delay
Animation-Fill-Mode
Animation-Iteration-Count
Infinite Loops
Animation-Direction
Alternate Directions
Animation-Timing-Function
Animation-Play-State
Cubic-Bezier
Animation Shorthand
Review
Test #33

CSS3 Multi-Column Layout

Multi-Column Properties
Column-Count
Column-Gap
Column-Rule-Style
Column-Rule-Width
Column-Rule-Color
Column-Rule
Column-Span
Column-Width
Columns
Column-Fill
Review

CSS3 User Interface

Resize Width
Resize Height
Resize Height & Width
Outline Offset
Review

CSS3 Box Sizing

Without Box Sizing
With Box Sizing
Box Sizing Forms

CSS3 Flexbox

Concept
Flex Line Direction
Row-Reverse
Flex-Direction: Column
Column-Reverse
Justify-Content: Flex-End
Justify-Content: Center
Justify-Content: Space-Between
Justify-Content: Space-Around
Align-Items: Stretch
Align-Items: Flex-Start
Align-Items: Flex-End
Align-Items: Center
Align-Items: Baseline
Flex-Wrap: Nowrap
Flex-Wrap: Wrap
Flex-Wrap: Wrap-Reverse
Align-Content: Center
Order
Order in Colors
Margin
Perfect Centering
Align-Self
Flex
Flex-Flow
Responsive Website
Review

CSS3 Media Queries

Media Queries
Change Background Color
Change Menu Layout
Email Links
Email Icons
Preface Links With Text
Apply Email Addresses to Links
Apply Two Styles to Links
Sidebar Links

Table of Contents