Introduction to CSS - CSU677 - Shoolini U

Introduction to CSS

1. Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows you to control the layout, color, fonts, and overall visual appearance of a webpage. By separating content from design, CSS enhances the flexibility and maintainability of web pages.

2. Basic Structure of a CSS Rule

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations, each consisting of a property and a value.

2.1 Example of a CSS Rule


selector {
    property: value;
}

In the above structure:

3. CSS Selectors

CSS selectors are patterns used to select the elements you want to style. They range from simple element selectors to more complex attribute selectors.

3.1 Type Selector

Targets all instances of a particular HTML element.


p {
    color: blue;
}

3.2 Class Selector

Targets elements based on the value of their `class` attribute. It is defined with a dot (`.`) followed by the class name.


.intro {
    font-weight: bold;
}

3.3 ID Selector

Targets a single element based on its `id` attribute. It is defined with a hash (`#`) followed by the ID name.


#header {
    background-color: lightgray;
}

3.4 Attribute Selector

Targets elements based on the presence or value of an attribute.


input[type="text"] {
    border: 1px solid #ccc;
}

4. CSS Box Model

The CSS Box Model describes the rectangular boxes that are generated for elements in the document tree and how they are sized, positioned, and spaced relative to each other. It consists of four parts:

4.1 Content

The area where text and images appear. The size of the content box can be set with properties like `width` and `height`.

4.2 Padding

The space between the content and the border. It is transparent and can be controlled using the `padding` property.

4.3 Border

A border that wraps around the padding (if any) and content. It can be styled using properties like `border-width`, `border-style`, and `border-color`.

4.4 Margin

The space outside the border. It separates the element from its neighbors and can be controlled using the `margin` property.


div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 15px;
}

5. CSS Layout Techniques

CSS provides various layout techniques to control the structure and alignment of elements on a webpage:

5.1 Display Property

The `display` property determines how an element is displayed on the page. Common values include `block`, `inline`, `inline-block`, and `flex`.


.block-element {
    display: block;
}

.inline-element {
    display: inline;
}

5.2 Flexbox

Flexbox is a layout model that allows you to create responsive layouts by distributing space within a container and aligning items in an efficient way.


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

5.3 Grid

CSS Grid Layout provides a two-dimensional grid-based layout system, allowing you to position elements within rows and columns.


.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

6. CSS Best Practices

To write efficient and maintainable CSS, consider the following best practices: