Essential CSS

Getting started
- Getting started with CSS
- External Stylesheet
- Internal Styles
- CSS import rule one of CSS at-rule
- Inline Styles
- Changing CSS with JavaScript
- Styling Lists with CSS
Backgrounds
- Backgrounds
- Background Color
- Background Gradients
- Background Image
- Background Shorthand
- Background Size
- Background Position
- The background-origin property
- Background Attachment
- Background Clip
- Multiple Background Image
- Background Repeat
- Background Color with Opacity
- background-blend-mode Property
Centering
- Centering
- Using Flexbox
- Using CSS transform
- Using margin: 0 auto;
- Using text-align
- Using position absolute
- Using calc
- Using line-height
- Vertical align anything with 3 lines of code
- Ghost element technique Micha Czernows hack
- Centering in relation to another item
- Vertically align an image inside div
- Centering vertically and horizontally without worrying about height or width
- Centering with fixed size
- Vertically align dynamic height elements
- Horizontal and Vertical centering using table layout
Margins
- Margins
- Margin Collapsing
- Apply Margin on a Given Side
- Margin property simplification
- Horizontally center elements on a page using margin
- Negative margins
- Example 1
Media queries
- Media Queries
- Terminology and Structure
- mediatype
- Basic Example
- Width vs Viewport
- Media Queries for Retina and Non Retina Screens
- Using Media Queries to Target Different Screen Sizes
- Use on link tag
- Media queries and IE8
Floats
- Floats
- Float an Image Within Text
- clear property
- Clearfix
- Inline DIV using float
- Simple Two Fixed-Width Column Layout
- Simple Three Fixed-Width Column Layout
- Two-Column LazyGreedy Layout
- Use of overflow property to clear floats
Typography
- Typography
- The Font Shorthand
- Quotes
- Font Size
- Text Direction
- Text Overflow
- Text Transform
- Font Stacks
- Text Shadow
- Word Spacing
- Text Indent
- Letter Spacing
- Text Decoration
- Font Variant
Flexbox
- Flexible Box Layout Flexbox
- Dynamic Vertical and Horizontal Centering align-items justify-content
- Sticky Variable-Height Footer
- Optimally fit elements to their container
- Holy Grail Layout using Flexbox
- Perfectly aligned buttons inside cards with flexbox
- Same height on nested containers
Cascading and specificity
- Cascading and Specificity
- Calculating Selector Specificity
- The important declaration
- Cascading
- More complex specificity example
Animations
- Animations
- Animations with keyframes
- Animations with the transition property
- Syntax Examples
- Increasing Animation Performance Using the will-change Attribute
Selectors
- Selectors
- Basic selectors
- Attribute Selectors
- Combinators
- Pseudo-classes
- Child Pseudo Class
- Class Name Selectors
- Select element using its ID without the high specificity of the ID selector
- Global boolean with checkbox checked and general sibling combinator
- CSS3 :in-range selector example
- A. The :not pseudo-class example B. :focus-within CSS pseudo-class
- The :last-of-type selector
- ID selectors
- How to style a Range input
- The :only-child pseudo-class selector example
Colors
- Colors
- currentColor
- Color Keywords
- Hexadecimal Value
- rgb Notation
- rgba Notation
- hsl Notation
- hsla Notation
Box mode
- The Box Model
- What is the Box Model
- box-sizing
Transiti
- Transitions
- Transition shorthand
- cubic-bezier
- Transition longhand
Length units
- Length Units
- Creating scalable elements using rems and ems
- Font size with rem
- vmin and vmax
- vh and vw
- using percent
Pseudo-elements
- Pseudo-Elements
- Pseudo-Elements
- Pseudo-Elements in Lists
Positioning
- Positioning
- Overlapping Elements with z-index
- Absolute Position
- Fixed position
- Relative Position
- Static positioning
2D transforms
- 2D Transforms
- Rotate
- Scale
- Skew
- Multiple transforms
- Translate
- Transform Origin
Tables
- Tables
- table-layout
- empty-cells
- border-collapse
- border-spacing
- caption-side
Browser support prefixes
- Browser Support Prefixes
- Transitions
- Transform
Normalizing browser styles
- Normalizing Browser Styles
- normalize.css
- Approaches and Examples
Padding
- Padding
- Padding Shorthand
- Padding on a given side
Layout control
- Layout Control
- The display property
- To get old table structure using div
Filter property
- Filter Property
- Blur
- Drop Shadow use box-shadow instead if possible
- Hue Rotate
- Multiple Filter Values
- Invert Color
Comments
- Comments
- Single Line
- Multiple Line
Cursor styling
- Cursor Styling
- Changing cursor type
- pointer-events
- caret-color
Box shadow
- box-shadow
- bottom-only drop shadow using a pseudo-element
- drop shadow
- inner drop shadow
- multiple shadows
Custom properties, variables
- Custom Properties Variables
- Variable Color
- Variable Dimensions
- Variable Cascading
- ValidInvalids
- With media queries
Shapes for floats
- Shapes for Floats
- Shape Outside with Basic Shape - circle()
- Shape margin
Grid
- Grid
- Basic Example
Border
- Border
- border-radius
- border-style
- Multiple Borders
- border shorthands
- border-image
- border-collapse
- Creating a multi-colored border using border-image
- border-leftrighttopbottom
Functions
- Functions
- calc function
- attr function
- var function
- linear-gradient function
- radial-gradient function
3D Transforms
- Compass pointer or needle shape using 3D transforms
- 3D text effect with shadow
- 3D cube
- backface-visibility
Counters
- Counters
- Applying roman numerals styling to the counter output
- Number each item using CSS Counter
- Implementing multi-level numbering using CSS counters
Single element shapes
- Single Element Shapes
- Triangles
- Trapezoid
- Circles and Ellipses
- Bursts
- Square
- Cube
- Pyramid
Opacity
- Opacity
- Opacity Property
- IE Compatibility for opacity
Performance
- Performance
- Use transform and opacity to avoid trigger layout
Columns
- Columns
- Simple Example (column-count)
- Column Width
Inline-block layout
- Inline-Block Layout
- Justified navigation bar
Inheritance
- Inheritance
- Automatic inheritance
- Enforced inheritance
CSS Image Sprites
- CSS Image Sprites
- A Basic Implementation
Clipping and masking
- Clipping and Masking
- Clipping and Masking Overview and Difference
- Simple mask that fades an image from solid to transparent
- Clipping (Circle)
- Using masks to cut a hole in the middle of an image
- Using masks to create images with irregular shapes
- Clipping Polygon
List styles
- List Styles
- Bullet Position
- Type of Bullet or Numbering
- Removing Bullets Numbers
Outlines
- Outlines
- Overview
- outline-style
Structure and formatting of a css rule
- Structure and Formatting of a CSS Rule
- Property Lists
- Rules Selectors and Declaration Blocks
- Multiple Selectors
Fragmentation
- Fragmentation
- Media print page-break
Overflow
- overflow-wrap
- overflow: scroll
- overflow: visible
- Block Formatting Context Created with Overflow
- overflow-x and overflow-y
CSS Object Model (CSSOM)
- CSS Object Model CSSOM
- Adding a background-image rule via the CSSOM
- Introduction
Feature queries
- Feature Queries
- Basic supports usage
- Chaining feature detections
Stacking context
- Stacking Context
- Stacking Context
Internet Explorer hacks
- Internet Explorer Hacks
- Adding Inline Block support to IE6 and IE7
- High Contrast Mode in Internet Explorer 10 and greater
- Internet Explorer 6 Internet Explorer 7 only
- Internet Explorer 8 only
Block formatting context
- Block Formatting Contexts
- Using the overflow property with a value different to visible
Vertical centering
- Vertical Centering
- Centering with display table
- Centering with Transform
- Centering with Flexbox
- Centering Text with Line Height
- Centering with Position absolute
- Centering with pseudo element
Object Fit and Placement
- Object Fit and Placement
- object-fit
Multiple columns
- Multiple columns
- Basic example
- Create Multiple Columns
CSS design patterns
- CSS design patterns
- BEM
Contributors

Contents