Scribd
Upload
2 views

CSS_Basic_Guide

CSS (Cascading Style Sheets) is a language used to style HTML elements, controlling layout, colors, fonts, and responsiveness. It consists of a selector and a declaration block, with types including inline, internal, and external CSS. Common properties include text styling, background and borders, and the box model, with responsive design achievable through media queries.

Uploaded by

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

CSS_Basic_Guide

CSS (Cascading Style Sheets) is a language used to style HTML elements, controlling layout, colors, fonts, and responsiveness. It consists of a selector and a declaration block, with types including inline, internal, and external CSS. Common properties include text styling, background and borders, and the box model, with responsive design achievable through media queries.

Uploaded by

swasthishetty341
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Basic CSS Code in Detail

1. What is CSS?
CSS (Cascading Style Sheets) is used to style HTML elements. It controls layout, colors, fonts, and
responsiveness of a webpage.

2. CSS Syntax
A CSS rule consists of a selector and a declaration block:

selector {
property: value;
}

Example:
p{
color: blue;
font-size: 16px;
}

3. Types of CSS
1. Inline CSS: <p style='color: red;'>Red text</p>
2. Internal CSS: <style> p { color: green; } </style>
3. External CSS: <link rel='stylesheet' href='styles.css'>

4. CSS Selectors
Common selectors include:
- * (Universal Selector)
- element (Type Selector)
- .class (Class Selector)
- #id (ID Selector)
- h1, p (Group Selector)

5. Common CSS Properties


Text Styling:
p { color: navy; font-size: 18px; text-align: center; }

Background & Borders:


div { background-color: lightgray; border: 2px solid black; padding: 10px; }

Box Model:
.box { width: 200px; height: 100px; margin: 20px; padding: 15px; border: 2px dashed blue; }

6. Responsive Design
@media (max-width: 600px) {
body { background-color: lightblue; }
}

You might also like