Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of HTML and XML documents. It controls layout, colors, fonts, and other visual aspects of web pages, enhancing both aesthetics and maintainability.

Key Characteristics of CSS

• Cascading: Multiple style rules can apply to the same element, with precedence determined by specificity and source order.
• Inheritance: Some properties are inherited by child elements from their parents, reducing redundancy.
• Specificity: Rules are applied based on selector weight, importance (!important), and declaration order.
• Reusability: Styles can be reused across elements using classes and IDs.
• Separation of Concerns: Content and presentation are decoupled, improving modularity.

Methods of Applying CSS

• Inline Styles: Applied directly via the style attribute.
• Internal Stylesheet: Defined within a <style> tag in the document head.
• External Stylesheet: Linked via <link> to a separate .css file.

CSS Properties

Text Properties

• color: Text color
• font-family: Font stack
• font-size: Size of text
• font-weight: Boldness
• text-align: Alignment
• text-decoration: Underline/strikethrough
• text-transform: Case transformation

Background Properties

• background-color: Background fill
• background-image: Backgroudn image
• background-repeat: Tiling behavior
• background-position: Image position

Box Model Properties

• width/height: Content dimensions
• padding: Inner spacing
• margin: Outer spacing
• border: Border style, width, and color

Layout Properties

• display: Layout behavior (block, inline, etc.)
• position: Positioning scheme
• float: Element floating
• clear: Clearing floats

Animation and Transformation

• transition: Property transitions
• animation: Keyframe animations
• transform: 2D/3D transformations

CSS Selectors

Universal Selector

* {
  margin: 0;
  padding: 0;
}

Type Selector

p {
  line-height: 1.6;
}

ID Selector

#mainHeader {
  font-size: 2rem;
}

Clas Selector

.alertBox {
  border: 1px solid #ccc;
}

Attribute Selector

input[type="email"] {
  background: #f0f0f0;
}

Pseudo-classes

a:hover {
  text-decoration: underline;
}

li:nth-child(odd) {
  background: #eee;
}

Pseudo-elements

p::first-line {
  font-weight: bold;
}

blockquote::before {
  content: """;
}

Combinators

div > p { ... }      /* Child combinator */
section p { ... }    /* Descendant */
h2 + p { ... }       /* Adjacent sibling */
h2 ~ p { ... }       /* General sibling */

Layout Techniques

Box Model

The CSS box model comprises content, padding, border, and margin. The box-sizing property controls whether dimensions include padding and border.

Traditional Layouts

• Table-based layouts (largely deprecated)
• Float-based layouts with clearfix techniques
• Positioning (relative, absolute, fixed)

Flexbox

Flexbox provides efficient one-dimensional layouts. Key properties include flex-direction, justify-content, and align-items.

.container {
  display: flex;
  justify-content: space-between;
}

CSS Grid

Grid enables two-dimensional layouts with explicit row and column definitions.

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

CSS Animations

Animations are created using @keyframes and animation properties like animation-duration and animation-timing-function. Transitions provide simpler property animations.

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 0.5s ease-in;
}