CSS3 (Cascading Style Sheets Level 3) dictates the presentation and styling of web documents. This guide covers its core concepts, selection mechanisms, layout techniques, and visual effects.

Getting Started with CSS

CSS code is placed within a <style> block in HTML, or in an external .css file. A CSS rule consists of a selector and one or more declarations enclosed in curly braces:

selector {
  property: value;
  property: value;
}

CSS comments use /* ... */. Key advantages of CSS include separation of content and presentation, reusable styles, rich visual capabilities, improved SEO, and easier maintenance.

Three Ways to Include CSS

1. Inline styles – Write a style attribute directly on an HTML element.

   <h1 style="color: red; font-size: 24px;">Heading</h1>
   

2. Internal styles – Place CSS inside a <style> tag in the document <head>.
3. External styles – Reference a separate CSS file using <link rel="stylesheet" href="styles.css"> in the <head>. The @import directive (@import url("styles.css");) in side a <style> tag is another method, but it can delay rendering.

Priority rule: The style that is closest to the element (most specific) wins (inline > internal > external).

CSS Selectors

Selectors target specific elements for styling.

Basic Selectors

• Tag selector: h1 { color: blue; }
• Class selector: .my-class { font-size: 16px; } (reusable, multiple classes separated by space)
• ID selector: #unique { background: yellow; } (must be unique per page)

Specificity order: ID > class > tag.

Advanced Selectors

• Descendant selector: div p { ... } – selects all <p> inside <div>.
• Child selector: div > p { ... } – selects direct children.
• Adjacent sibling selector: div + p { ... } – selects the <p> immediately after a <div> (same parent).
• General sibling selector: div ~ p { ... } – selects all <p> siblings after a <div>.

Pseudo-class Selectors

Pseudo-classes represent a state or condition.

• ul li:first-child – first child of the parent.
• ul li:last-child – last child.
• p:nth-child(2) – second child of its parent, counting all children.
• p:nth-of-type(2) – second <p> among its siblings, ignoring other types.

Attribute Selectors

Select elements based on attributes and they values.

Pattern	Description
a[target]	<a> with any target attribute
a[href="https://example.com"]	Exact match
a[href*="example"]	Contains "example"
a[href^="https"]	Starts with "https"
a[href$=".pdf"]	Ends with ".pdf"

Regular expressions are supported.

Styling Text and Fonts

Font Properties

• font-family: Arial, Helvetica, sans-serif;
• font-size: 20px;
• font-weight: bold or numeric (100–900)
• font-style: italic
• Shorthand: font: italic bold 16px/1.5 Arial, sans-serif;

Text Properties

• color: sets text color.
• text-align: left, right, center, justify.
• text-indent: 2em (first line indent).
• line-height: 200px (vertical centering when equal to container height).
• text-decoration: underline, line-through, overline, none.
• Link pseudo-classes: a:link, a:visited, a:hover, a:active.
• text-shadow: <color> <x-offset> <y-offset> <blur-radius>.

List Styling

li {
  list-style: none; /* removes bullets */
}

Backgrounds and Gradients

div {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  /* Shorthand */
  background: #fff url("bg.png") no-repeat center top;
}

Linear and radial gradients can be applied through the background-image property.

The Box Model

Every element is a box composed of:

• Content (the innermost area)
• Padding (space inside the border)
• Border (outline around padding)
• Margin (space outside the border)

On <body>, a default margin exists.

Border

div {
  border: 2px solid red; /* width, style, color */
}

Margin

margin: top right bottom left; or margin: 0 auto; to center a block element with fixed width.

Total element width = margin + border + padding + content width.

Rounded Corners

div {
  border-radius: 10px 5px 15px 20px; /* top-left, top-right, bottom-right, bottom-left */
}

Box Shadow

div {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

Layout with Float and Display

Normal Flow

Block elements stack vertically. Inline elements can only be inside block elements.

Display Property

• block – becomes a block element.
• inline – becomes an inline element.
• inline-block – block-like but inline.
• none – hidden.

Float

float: left; or float: right; moves an element to one side, allowing text to wrap around it. Floating elements are removed from normal flow.

img {
  float: right;
}

Clearing Floats

Floated elements may cause parent collapse. Clearfix methods:

1. Set a fixed height on the parent.
2. Add an empty <div style="clear: both;"></div> after floated elements.
3. Use overflow: hidden; on the parent.
4. Use the :after pseudo-element:

   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }
   

Positioning

Relative Positioning

div {
  position: relative;
  top: 20px;
  left: 30px;
}

The element is offset from its normal position, but its original space is preserved.

Absolute Positioning

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

Positioned relative to its nearest positioned ancestor (or the document body). It is removed from normal flow.

Fixed Positioning

div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

Stays fixed relative to the viewport.

Z-Index

z-index controls stacking order of positioned elements. Higher values appear on top. Negative values can place an element behind others.

div {
  z-index: 10;
  opacity: 0.5; /* transparency */
}

Animation

@keyframes

Define the animation steps using from/to or percentages.

@keyframes example {
  0%   { background: red; }
  50%  { background: blue; }
  100% { background: green; }
}

Applying Animation

Bind the animation to a selector with animation-name and animation-duration.

div {
  animation: example 5s; /* name duration */
}

Animation Properties

Property	Description
animation-name	Name of the @keyframes rule
animation-duration	Duration (e.g., 5s, 300ms)
animation-timing-function	ease, linear, ease-in, etc.
animation-delay	Delay before start
animation-iteration-count	Number of cycles (infinite)
animation-direction	normal, reverse, alternate
animation-fill-mode	none, forwards, backwards, both
animation-play-state	running, paused

Transitions

CSS transitions allow smooth changes from one style to another. You must specify:

• The CSS property to transition.
• The duration.

div {
  transition: width 2s, background-color 1s;
}

Transition Properties

Property	Description
transition-property	Porperties to animate
transition-duration	Duration of effect
transition-timing-function	Speed curve (ease, linear, ease-in, ease-out, cubic-bezier())
transition-delay	Delay before start

Shorthand: transition: property duration timing-function delay;

2D and 3D Transforms

2D Transforms

• translate(x, y) – moves an element.
• rotate(angle) – rotates (e.g., 45deg).
• scale(x, y) – scales (e.g., 2 for double size).
• skew(x-angle, y-angle) – skews along X and Y axes.

div {
  transform: translate(50px, 100px) rotate(30deg) scale(1.5, 1.5);
}

3D Transforms

• rotateX(angle) – rotates around the X axis.
• rotateY(angle) – rotates around the Y axis.
• rotateZ(angle) – rotates around the Z axis.
• perspective(value) – defines perspective for 3D effects.

div {
  transform: perspective(500px) rotateY(45deg);
}

Flexbox

Flexbox is a powerful one-dimensional layout model.

Terminology

• Container / Item: the parent flex container and its direct children (flex items).
• Main axis / Cross axis: determined by flex-direction.
• Flex-start / Flex-end: the start and end of the axis.

Container Properties

Property	Values / Description
display: flex;	Defines a block-level flex container
display: inline-flex;	Inline-level flex container
flex-direction	row (default), row-reverse, column, column-reverse
flex-wrap	nowrap (default), wrap, wrap-reverse
flex-flow	Shorthand for flex-direction and flex-wrap
justify-content	Alignment along main axis: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	Alignment along cross axis (single line): stretch, flex-start, flex-end, center, baseline
align-content	Alignment along cross axis (multi-line): stretch, flex-start, flex-end, center, space-between, space-around, space-evenly

Item Properties

Property	Description
flex-basis	Initial main size (overrides width/height). Default: auto
flex-grow	Growth factor (default 0). Distributes extra space proportionally
flex-shrink	Shrink factor (default 1). Compresses items when space is tight
flex	Shorthand: flex: grow shrink basis;
align-self	Overrides align-items for a single item
order	Positional order (default 0). Smaller values appear first

Flex Property Values

• flex: 1; → flex: 1 1 0%;
• flex: 0 0 200px; → fixed width of 200px, no grow, no shrink.

Order

.item {
  order: 2;
}