Core CSS3 Concepts and Styling Techniques

Basic Selectors

Universal Selector

* { margin: 0; padding: 0; }

Element Selector

div { } 
p { }

ID Selector

#uniqueId { }

Class Selector

.header { }

Multiple Classes

<element class="class1 class2 class3">

Compound Selector

.tooltip.active { }

Group Selector

#d1, .c1, div, p.c2 { color: red; background: yellow; }

Descendant Selector

selector1 selector2 selector3 { style-declaration; }

Child Selector

#d1 > p { color: red; }

Pseudo-class Selectors

Link-specific pseudo-classes:

• :link - Unvisited link
• :visited - Visited link

Universal pseudo-classes:

• :hover - Mouse hover state
• :active - Active state
• :focus - Focused state

Selector Specificity

• !important > 1000
• Inline styles: 1000
• ID selectors: 100
• Class selectors: 10
• Pseudo-class selectors: 10
• Element selectors: 1
• Universal selector: 0
• Inherited styles: No weight

Specificity Rules:

• Highest combined specificity wins
• Equal specificity: Last declaration wins
• !important overrides all
• Group seletcors calculated individually
• Specificity doesn't exceed selector's maximum weight category

Dimensions and Borders

Sizing Properties

width: ;
height: ;
min-width: ;
max-width: ;
min-height: ;
max-height: ;

Element Sizing Behavior

Block Elements	Inline Elements	Inline-block
Width/height effective	Width/height ineffective	Width/height effective
Default width: 100% parenetDefault height: content-based	Size based on content	Browser default sizes

Overflow Handling

overflow: visible;    /* Default, shows overflow */
overflow: hidden;     /* Hides overflow */
overflow: scroll;     /* Always shows scrollbars */
overflow: auto;       /* Auto scrollbars when needed */
overflow-x: scroll;   /* Horizontal scroll only */
overflow-y: scroll;   /* Vertical scroll only */

Border Properties

Basic border shorthand:

border: width style color;
/* Styles: solid, dotted, dashed, double */
border: none; /* Remove border */

Individual border sides:

border-top: 20px solid #f00;
border-right: 20px dotted #00f;
border-bottom: 20px dashed #0ff;
border-left: 20px double #f0f;

Border Radius

border-radius: 10px;
border-radius: 50%; /* Creates circle */
/* Individual corners */
border-top-right-radius: value;
border-bottom-right-radius: value;
border-top-left-radius: value;
border-bottom-left-radius: value;

Box Shadow

box-shadow: h-offset v-offset blur spread color inset;

Box Model

Margin Properties

margin: value; /* All sides */
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
/* Horizontal centering */
margin: 0 auto;

Margin Collapse Vertical margins collapse - largest value wins.

Element Margin Behavior

Block	Inline	Inline-block
All margins effective	Vertical margins ineffective	All margins effective

Margin Issues

• Margin collapse between adjacent elements
• Margin overflow from child to parent

Padding Properties

padding: value;
padding: vertical horizontal;
padding: top horizontal bottom;
padding: top right bottom left;

Box Sizing

box-sizing: content-box; /* Default */
box-sizing: border-box;  /* Includes padding/border in width */

Background Properties

Basic Background

background-color: color-value;
background-image: url(path/to/image.jpg);
background-repeat: repeat | no-repeat | repeat-x | repeat-y;

Background Positioning

background-position: x-position y-position;
/* Values: left/center/right top/center/bottom */

Background Sizing

background-size: width height;
background-size: contain; /* Fit entire image */
background-size: cover;   /* Cover entire area */

Gradients

Linear Gradient

background-image: linear-gradient(direction, color-stop1, color-stop2);
/* Directions: to top, to right, to bottom, to left, angle */

Radial Gradient

background-image: radial-gradient(radius at center-x center-y, color-stop1, color-stop2);

Repeating Gradients

background-image: repeating-radial-gradient(100px at center, #000 0%, #0ff 2%);

Text Formatting

Font Properties

font-size: value;
font-family: font-stack;
font-weight: lighter | normal | bold | bolder | 100-900;
font-style: normal | italic;
font-variant: normal | small-caps;
/* Shorthand */
font: style variant weight size family;

Text Properties

color: color-value;
text-align: left | right | center | justify;
text-decoration: underline | overline | line-through | none;
text-indent: value; /* Use em for relative sizing */
text-shadow: h-offset v-offset blur color;

Line Height

line-height: value; /* Often equals container height for vertical centering */

Table Styling

Table Properties

/* Border handling */
border-collapse: separate | collapse;
border-spacing: value;

/* Caption placement */
caption-side: top | bottom;

/* Layout algorithm */
table-layout: auto | fixed;

Cell Alignment

vertical-align: top | middle | bottom;

Floating and Positioning

Float Properties

float: none | left | right;

Clear Property

clear: left | right | both;

Height Collapse Solution

.container::after {
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
}

Display and Visibility

Display Modes

display: block | inline | inline-block | table | none;

Visibility

visibility: visible | hidden; /* Hidden maintains space */

Opacity vs RGBA

opacity: 0.5; /* Affects element and descendants */
background-color: rgba(255, 0, 0, 0.5); /* Affects only background */

Vertical Alignment

vertical-align: top | middle | bottom | baseline;
/* Applies to: table cells, inline-block elements, images */

Cursor Styles

cursor: default | pointer | text | wait | help | crosshair;

List Styling

list-style-type: disc | square | circle | none;
list-style-image: url(path/to/image.jpg);
list-style-position: outside | inside;

Pseudo-elements

::before { content: ''; }
::after { content: ''; }

Positioning

Position Types

position: static | relative | absolute | fixed;
/* Offset properties (when positioned) */
top: ; right: ; bottom: ; left: ;

Positioning Behavior

• Relative: Offset from original position, maintains space
• Absolute: Relative to nearest positioned ancesotr
• Fixed: Relative to viewport

Z-index Stacking

z-index: integer-value;
/* Higher values appear above lower values */

2D Transforms

Translation

transform: translate(x, y);
transform: translateX(value);
transform: translateY(value);

Rotation

transform: rotate(angle);

Scaling

transform: scale(x, y);
transform: scaleX(value);
transform: scaleY(value);

Skewing

transform: skew(x-angle, y-angle);
transform: skewX(angle);
transform: skewY(angle);

Transform Origin

transform-origin: x-position y-position;

3D Transforms

3D Translation

transform: translate3d(x, y, z);

Perspective

perspective: 800px; /* Recommended: 800-1200px */

Animation

Keyframe Definition

@keyframes animation-name {
    from { /* Start state */ }
    to { /* End state */ }
}

@keyframes animation-name {
    0% { /* State at 0% */ }
    50% { /* State at 50% */ }
    100% { /* State at 100% */ }
}

Animation Properties

animation: name duration timing-function delay iteration-count direction fill-mode;

Responsive Layout Techniques

Percentage Layout Width adapts, height remains fixed.

Flexbox Layout

display: flex; /* On container */
/* Automatic flex behavior on children */

Viewport Units

/* 1vw = 1% of viewport width */
/* 1vh = 1% of viewport height */

Media Queries

@media screen and (max-width: 768px) {
    /* Styles for screens up to 768px */
}

CSS Preprocessing with Less

Variables

@primary-color: #ff0000;
.element { color: @primary-color; }

Operations

@base-size: 10px;
.element { padding: (@base-size * 2); }

Nesting

.container {
    width: 100%;
    .item {
        color: red;
        &:hover { color: blue; }
    }
}

Importing

@import 'base.less';

Bootstrap Framework

Grid System 12-column responsive grid system.

Container Structure

<div class="container">
    <div class="row">
        <div class="col-md-6">Content</div>
    </div>
</div>

Component Usage Requires Bootstrap CSS and JavaScript files.

Icon Fonts

Iconfont Implementation Web-based icon font service with extensive icon library.