CSS
Encluding Styles
Style Types
External stylesheet: <link rel="stylesheet" type="text/css" href="mystyle.css">
Internal stylesheet: <style>
Inline styles: style=""
Specificity Order
Universal selector (*)
Type selector
Class selector
Attribute selector
Pseudo-class
ID selector
Inline style
!important rule overrides everything
Box Model
Box components:
Margin - Clears area outside the border, transparent.
Border - Border surrounding padding and content.
Padding - Clears area around content, transparent.
Content - Displays text and images.
Outline - Located outside border, does not occupy width.
Border notes:
1. Colors can use transparent
2. border-radius creates rounded corners using length or percentage: 50% produces a circle, max effect at 100%; adjacent corners scale proportionally, so all four at 100% still form a circle.
3. Transparent borders can create triangles.
Margin behavior:
Setting top or left margin moves the element itself.
Setting bottom or right margin moves adjacent elements.
Margin collapsing:
Only vertical margins in normal document flow collapse.
Shorthand notation (using border as example)
Shorthand Syntax
border: 10px solid blue;
border-width: 10px 20px 30px 40px; /* top right bottom left */
border-width: 10px 20px 30px; /* top right-left bottom */
border-width: 10px 20px; /* top-bottom right-left */
border-width: 10px; /* all four sides */
Links
a:link {color:#000000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* link under cursor */
a:active {color:#0000FF;} /* link being clicked */
Text
color: name / rgb / #nnnnnn; /* font color */
direction: ltr / rtl / inherit; /* text direction */
text-decoration: none / underline / overline / line-through / inherit
vertical-align: baseline / middle; /* alignment */
text-align: center / left / right;
font: size style weight family; /* font shorthand */
Background
background-color
background-image: url("")
background-repeat: no-repeat / repeat-x / repeat-y
background-attachment: scroll (default) / fixed
background-position
Lists and Tables
<ul> <ol> <li>
<table> <th> <td>
BFC (Block Formatting Context)
Elements inside a BFC do not affect elements outside it, and vice versa.
Creating a BFC:
overflow: visible; /* nope */
float: not none;
position: not static or relative;
display: inline-blocks, table, table-cell, table-caption, flex, inline-flex;
Use cases:
Two-column layouts
Clear floats
Prevent vertical margin collapse
Inline vs Block Elements
Inline elements: a b span img input strong
Block elements: div ul ol li dl dt dd h1 h2 h3 h4... p
Selectors
Combinators:
, : group
space: descendant
> : child
+ : adjacent sibling
~ : general sibling
Attribute selectors:
tag[attrA]([attrB])
[attr=value] /* exact match */
[attr~=value] /* one of space-separated values matches */
[attr^="value"] /* starts with value */
[attr$="value"] /* ends with value */
[attr|="value"] /* exactly value or value- followed by dash */
[attr*="value"] /* value appears as substring */
Positioning
static /* default, follows normal flow */
relative /* positioned relative to normal position */
fixed /* positioned relative to viewport */
absolute /* positioned relative to nearest positioned ancestor */
sticky /* positioned based on scroll position */
Float
Horizontal floating only, elements move left or right until they hit the containing box edge or another floated element.
float: left / right / inherit
clear: left / right / both
Cleairng floats removes the effect of floated elements. Float causes height collapse, breaking sbusequent layout.
1. Set explicit height on parent
2. Parent establishes BFC
3. Clear with subsequent element or pseudo-element using clear: both
Alignment
Center horizontally:
margin: auto
Center text:
text-align: center
Left/right align:
absolute, float, or padding techniques
Center vertically:
line-height, position + transform, vertical-align on element, flexbox with margin
z-index
1. Ineffective on static elements.
2. When both parent and child are in stacking contexts, child inherits parent priority. If parent not in stacking context (z-index: auto or position: static), child does not inherit.
3. z-index: 0 still participates in stacking context, lower than positive values but higher than negatives.
4. Negative z-index appears behind both zero/positive elements and non-stacking elements.
Flexbox
flex-direction: row | row-reverse | column | column-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Grid
Grid layout system for two-dimensional layouts
Define rows, columns, and areas
Overflow
overflow-x, overflow-y
visible /* default, content renders outside box */
hidden /* content clipped, no scroll */
scroll /* content clipped, scrollbar always visible */
auto /* scrollbar appears only if needed */
inherit /* inherits from parent */
Pseudo-classes
Colon-prefixed keywords:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse hover */
a:active {color:#0000FF;} /* click moment */
:focus /* focus state */
Pseudo-elements
Double-colon syntax:
::after
::before
Gradients
/* default is vertical, use "to" to change direction */
background: linear-gradient(to right, transparent 10%, gray 90%);
2D Transforms
translate(x, y) /* move */
rotate(deg) /* rotate */
scale(x, y) /* scale */
skew() /* skew */
matrix() /* custom transform matrix */
3D Transforms
rotateX()
rotateY()
Transitions
transition: property duration timing-function delay;
Animations
@keyframes animationname {keyframes-selector {css-styles;}}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;