CSS (Cascading Style Sheets) is a stylesheet language used to style and layout web documents.

Basic CSS Syntax

CSS rules consist of selectors and declarations:

selector {
    property: value;
}

Code Style Guidelines

• Use expanded format with each declaration on a new line
• Write all properties in lowercase
• Include spaces after colons and between selectors and braces

CSS Selectors

Type Selector

Applies styles to all elements of a specific type:

element-name {
    property: value;
}

Class Selector

Targets elements with specific class attributes:

.class-name {
    property: value;
}

Multiple classes can be applied to a single element:

<div class="primary secondary">Content</div>

ID Selector

Selects a single element with a unique identifier:

#unique-id {
    property: value;
}

Universal Selector

Applies styles to all elements:

* {
    property: value;
}

Font Properties

Font Family

Specifies the typeface for text:

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

Font Size

Controls text dimensions:

p {
    font-size: 16px;
}

Font Weight

Adjusts text thickness:

.bold-text {
    font-weight: 700;
}

Font Shorthand

Combines multiple font properties:

.content {
    font: italic 600 18px/1.5 "Segoe UI", sans-serif;
}

Text Properties

Text Color

Sets text color using various formats:

.heading {
    color: #333333;
    color: rgb(51, 51, 51);
    color: rgba(51, 51, 51, 0.8);
}

Text Alignment

Controls horizontal text positioning:

.center-align {
    text-align: center;
}

Text Decoration

Adds visual effects to text:

.link {
    text-decoration: none;
}
.underline {
    text-decoration: underline;
}

Text Indentation

Controls paragraph indentation:

.indented {
    text-indent: 2em;
}

Line Height

Adjusts vertical spacing between lines:

.spacious {
    line-height: 1.6;
}

CSS Implementation Methods

Internal Styles

Styles embedded within HTML documents:

<style>
.container {
    margin: 20px;
}
</style>

Inline Styles

Styles applied directly to elements:

<div style="color: blue; font-size: 14px;">Content</div>

External Styles

Styles in separate files linked to HTML:

<link rel="stylesheet" href="styles.css">

Advanced Selectors

Descendant Selector

Targets nested elements:

article p {
    margin-bottom: 1em;
}

Child Selector

Selects direct children:

ul > li {
    list-style-type: square;
}

Grouping Selector

Applies styles to multiple selectors:

h1, h2, h3 {
    font-family: Georgia, serif;
}

Pseudo-classes

Styles elements in specific states:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
input:focus { background-color: yellow; }

Element Display Modes

Block Elements

• Occupy full available width
• Stack vertically
• Allow dimension adjustments

Inline Elements

• Flow within text content
• Ignore width/height settings
• Accept horizontal margins/padding

Inline-block Elements

• Flow inline like text
• Accept dimension adjustments
• Maintain inline formatting context

Display Mode Conversion

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

Background Properties

Background Color

Sets element background color:

.header {
    background-color: #f8f8f8;
}

Background Image

Applies images as backgrounds:

.hero {
    background-image: url('background.jpg');
}

Background Repeat

Controls image tiling behavior:

.pattern {
    background-repeat: no-repeat;
}

Background Position

Positions background images:

.positioned {
    background-position: center top;
}

Background Attachment

Controls scrolling behavior:

.fixed-bg {
    background-attachment: fixed;
}

Background Shorthand

Combines multiple background properties:

.combined {
    background: #fff url('image.png') no-repeat fixed center;
}

CSS Specificity and Inheritance

Specificity Hierarchy

• Inline styles: 1000
• ID selectors: 100
• Class/pseudo-class selectors: 10
• Element selectors: 1

Inheritance

Text-related properties inherit automatically:

body {
    font-family: Arial;
    color: #333;
    line-height: 1.5;
}

Box Model Components

Border Properties

Defines element borders:

.bordered {
    border: 2px solid #ccc;
    border-radius: 5px;
}

Padding Properties

Controls internal spacing:

.padded {
    padding: 20px;
    padding: 10px 20px;
    padding: 5px 10px 15px 20px;
}

Margin Properties

Manages external spacing:

.spaced {
    margin: 0 auto;
    margin-top: 10px;
}

Box Sizing

Controls box dimension calculations:

.border-box {
    box-sizing: border-box;
}

Visual Effects

Box Shadow

Adds shadow effects:

.shadowed {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

Text Shadow

Applies shadows to text:

.text-effect {
    text-shadow: 1px 1px 2px black;
}

Layout Techniques

Float-based Layout

Creates multi-column layouts:

.column {
    float: left;
    width: 33.33%;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Positioning Methods

Relative Positioning

Moves elements relative to original position:

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

Absolute Positioning

Positions elements relative to nearest positioned ancestor:

.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

Fixed Positioning

Fixes elements relative to viewport:

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Sticky Positioning

Combines relative and fixed positioning:

.sticky {
    position: sticky;
    top: 0;
}

Z-index Control

Manages stacking order:

.layer1 { z-index: 1; }
.layer2 { z-index: 2; }

Element Visibility

Display Control

Shows/hides elements completely:

.hidden { display: none; }
.visible { display: block; }

Visibility Property

Hides elements while preserving space:

.invisible { visibility: hidden; }

Overflow Handling

Controls content overflow behavior:

.scrollable {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
}

Responsive Design Considerations

Media Queries

Adapts styles based on device characteristics:

@media (max-width: 768px) {
    .responsive {
        width: 100%;
        float: none;
    }
}

Flexible Units

Uses relative units for adaptability:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1rem;
}