Scribd
Upload
1 views3 pages

Advanced CSS Notes

The document provides comprehensive notes on CSS, covering its purpose, types (inline, internal, external), syntax, selectors, colors, box model, text and fonts, layout techniques, responsive design, and advantages. It emphasizes the separation of content from design and includes examples for better understanding. Key concepts such as media queries and layout systems like Flexbox and Grid are also discussed.

Uploaded by

rosacaroh156
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views3 pages

Advanced CSS Notes

The document provides comprehensive notes on CSS, covering its purpose, types (inline, internal, external), syntax, selectors, colors, box model, text and fonts, layout techniques, responsive design, and advantages. It emphasizes the separation of content from design and includes examples for better understanding. Key concepts such as media queries and layout systems like Flexbox and Grid are also discussed.

Uploaded by

rosacaroh156
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Comprehensive CSS Notes

1. Introduction to CSS
CSS (Cascading Style Sheets) is used to style and layout web pages.

It controls colors, fonts, spacing, and positioning.

It separates content (HTML) from design.

2. Types of CSS
1. Inline CSS – inside HTML tags.

Example: <p style='color:red;'>Text</p>

2. Internal CSS – inside <style> tag in <head>.

3. External CSS – separate .css file.

Example: <link rel='stylesheet' href='[Link]'>

3. CSS Syntax
A CSS rule has a selector and declaration block.

Example:

p{

color: blue;

font-size: 16px;

4. Selectors
Element Selector: p {}

Class Selector: .className {}


ID Selector: #idName {}

Universal Selector: * {}

Grouping: h1, h2, p {}

5. Colors and Background


color: red;

background-color: lightblue;

background-image: url('[Link]');

6. Box Model
Content → Padding → Border → Margin

Controls spacing and layout.

7. Text and Fonts


font-size: 16px;

font-family: Arial;

text-align: center;

font-weight: bold;

8. Layout Techniques
display: block, inline, flex

position: relative, absolute

float and clear

Flexbox and Grid systems

9. Responsive Design
Media Queries example:

@media (max-width: 600px) {

body {background-color: lightgray;}


}

10. Advantages of CSS


Separates content and design

Improves speed

Reusable styles

Better user experience

11. Example Full CSS


body {

font-family: Arial;

margin: 0;

h1 {

color: blue;

.container {

display: flex;

You might also like