Scribd
Upload
2 views

CSS Notes

CSS (Cascading Style Sheets) is a stylesheet language that controls the presentation of HTML or XML documents, including layout, colors, and fonts. Key concepts include the CSS syntax, Box Model, various selectors, layout systems like Flexbox and CSS Grid, and responsive design using media queries. Understanding these fundamentals is essential for effective web design and development.

Uploaded by

Mohd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS Notes

CSS (Cascading Style Sheets) is a stylesheet language that controls the presentation of HTML or XML documents, including layout, colors, and fonts. Key concepts include the CSS syntax, Box Model, various selectors, layout systems like Flexbox and CSS Grid, and responsive design using media queries. Understanding these fundamentals is essential for effective web design and development.

Uploaded by

Mohd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS (Notes)

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.

• CSS allows you to control the layout, colors, fonts, and positioning of elements on the
page.

2. CSS Syntax:

• A CSS rule consists of a selector and a declaration block.

• The declaration block contains properties and values.

h1 {

color: red;

font-size: 24px;

3. Box Model:

• The Box Model is a fundamental concept that defines how elements are structured in
CSS.

o Content: Actual content like text or images.

o Padding: Space around the content.

o Border: The border that surrounds padding.

o Margin: Space outside the border, creating distance between elements.

4. CSS Selectors:

• Universal Selector: * (Targets all elements).

• Class Selector: .className (Targets elements with the specified class).

• ID Selector: #idName (Targets the element with the specified ID).

5. CSS Layout Systems:

• Flexbox: A one-dimensional layout system used to align items in a row or column.

o Align items along the main axis and cross axis.

• CSS Grid: A two-dimensional layout system with rows and columns for more complex
layouts.

6. Responsive Design:

• Media Queries: Allow different styles to be applied based on the device's screen size.

@media screen and (max-width: 600px) {


body {

background-color: lightblue;

You might also like