CSS Selectors and Layout Techniques

Attribute Selectors

Attribute selectors target elements based on their HTML attributes. Every HTML element can carry standard attributes like id and class, in addition to custom attributes defined by developers.

<div id="header" data-user="john"></div>

In this example, data-user is a custom attribute that can be selected using attribute selectors.

Group and Nesting Selectors

Group selectors use commas to combine multiple selectors that share the same style rules:

h1, h2, h3 {
  font-weight: bold;
}

Nesting selectors use spaces to apply styles to elemants within other elements:

.container .item {
  padding: 10px;
}

Pseudo-Class Selectors

Pseudo-classes target elements in specific states:

/* Unvisited link */
a:link {
  color: #FF0000;
}

/* Mouse hover */
a:hover {
  color: #FF00FF;
}

/* Active/clicked link */
a:active {
  color: #0000FF;
}

/* Visited link */
a:visited {
  color: #00FF00;
}

/* Input focus state */
input:focus {
  outline: none;
  background-color: #eee;
}

Pseudo-Element Selectors

Pseudo-elements allow styling of specific parts of an element:

/* First letter of paragraph */
p::first-letter {
  font-size: 48px;
  color: red;
}

/* Before content */
p::before {
  content: "Note: ";
  color: blue;
  font-weight: bold;
}

/* After content */
p::after {
  content: " [End]";
  color: gray;
}

One common use of ::before and ::after is clearing floats to fix parent container collapse issues.

Selector Specificity

When multiple selectors target the same element, specificity determines which rule applies:

1. Inline styles - Highest priority (style attribute in HTML)
2. ID selectors - Second priority (#id)
3. Class selectors - Third priority (.class)
4. Element selectors - Lowest priority (tag name)

When selectors have equal specificity, the one declared last wins.

Dimension Properties

.box {
  width: 300px;
  height: 200px;
}

Note: Only block-level elements accept explicit width and height. Inline elements ignore these properties.

Font Properties

.text {
  font-weight: 700;
  color: #333;
  text-align: center;
  text-decoration: underline;
}

Font weight values:

• normal (400)
• bold (700)
• bolder / lighter
• 100-900 numeric values

Color specification:

• Hexadecimal: #FF0000
• RGB: rgb(255, 0, 0)
• RGBA with alpha: rgba(255, 0, 0, 0.5)
• Color names: red

Background Properties

.hero {
  background-color: #f0f0f0;
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-position: center top;
}

/* Shorthand */
.hero {
  background: #f0f0f0 url('bg.png') no-repeat center top;
}

Border Properties

.card {
  border: 2px solid #333;
  border-radius: 8px;
}

Setting border-radius to 50% creates a circular shape.

Display Property

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-text {
  display: inline;
}

.inline-block {
  display: inline-block;
}

• display: none - Hides element completely
• display: block - Takes full width, accepts dimensions
• display: inline - Flows with text, ignores dimensions
• display: inline-block - Combines inline and block features

CSS Box Model

The box model consists of four layers:

1. Content - The actual content (text, images)
2. Padding - Space between content and border
3. Border - The edge around padding
4. Margin - Space outside the border

.box {
  content: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 15px;
}

Total width = content + padding + border + margin

Float and Clear

.left-box {
  float: left;
}

.right-box {
  float: right;
}

Float takes elements out of normal document flow.

Clear Property

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both;
}

Clearing Floats

Floating elements cause parent containers to collapse. Solutions include:

1. Fixed height on parent
2. Overflow: hidden on parent
3. Pseudo-element clear method

/* Clearfix method */
.container::after {
  content: "";
  display: block;
  clear: both;
}

This is the most reliable method for maintaining proper layout when using floats.