Scribd
Upload
20 views5 pages

Css Topic Notes

The document provides an introduction to CSS, detailing its types (inline, internal, external) and key concepts such as selectors, the box model, positioning, and display properties. It also covers advanced topics like Flexbox, CSS Grid, media queries, and CSS variables, along with practical examples and projects for application. Overall, it serves as a comprehensive guide for understanding and utilizing CSS in web development.

Uploaded by

Kanhaiya Lal
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
20 views5 pages

Css Topic Notes

The document provides an introduction to CSS, detailing its types (inline, internal, external) and key concepts such as selectors, the box model, positioning, and display properties. It also covers advanced topics like Flexbox, CSS Grid, media queries, and CSS variables, along with practical examples and projects for application. Overall, it serves as a comprehensive guide for understanding and utilizing CSS in web development.

Uploaded by

Kanhaiya Lal
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/ 5

1.

Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements. It separates content (HTML) from
presentation (CSS).

Types of CSS:

• Inline CSS: Written directly in the HTML tag using the style attribute.

<p style="color: red;">Hello</p>

• Internal CSS: Written inside a <style> tag in the HTML <head> .

<style>
p { color: red; }
</style>

• External CSS: Linked using <link> to an external .css file.

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

2. CSS Selectors

Selectors target HTML elements for styling.

Examples:

• * {} – Universal selector
• p {} – Element selector
• .class {} – Class selector
• #id {} – ID selector
• a:hover {} – Pseudo-class
• div::before {} – Pseudo-element

ul > li:first-child { color: red; }

3. CSS Box Model

Every HTML element is a box: Content > Padding > Border > Margin.

div {
width: 100px;
padding: 10px;

1
border: 5px solid black;
margin: 20px;
box-sizing: border-box;
}

4. CSS Positioning

Defines how elements are placed on a page.

• static (default)
• relative
• absolute
• fixed
• sticky

.relative-box {
position: relative;
top: 20px;
left: 20px;
}

5. Display & Visibility

• display : block , inline , flex , grid , none


• visibility : visible , hidden
• opacity : 0 to 1

div { display: none; }

6. Flexbox

One-dimensional layout for aligning items in rows/columns.

.container {
display: flex;
justify-content: center;
align-items: center;
}

2
7. CSS Grid

Two-dimensional layout for rows and columns.

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

8. Units in CSS

• Absolute: px, pt
• Relative: %, em, rem, vh, vw

.container { width: 80%; padding: 2em; }

9. Colors and Backgrounds

div {
color: #333;
background-color: lightblue;
background-image: url("bg.png");
background-size: cover;
}

10. Transitions & Animations

div {
transition: background-color 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

11. Media Queries

Make layout responsive.

3
@media (max-width: 768px) {
body { font-size: 14px; }
}

12. Typography

body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: justify;
}

13. Pseudo-classes & Pseudo-elements

a:hover { color: red; }


p::first-letter { font-size: 200%; }

14. Specificity & Inheritance

• Inline > ID > Class > Tag


• Use !important only if necessary.

#id { color: blue; } /* overrides .class */

15. CSS Variables

:root {
--main-color: #3498db;
}
div {
color: var(--main-color);
}

4
16. CSS Functions

div {
width: calc(100% - 50px);
font-size: clamp(14px, 2vw, 20px);
}

17. Advanced Topics

• BEM: Block__Element--Modifier
• Preprocessors: SCSS, SASS
• Resets: normalize.css
• Logical properties: margin-inline , padding-block

18. Practice & Projects

• Responsive navbar using Flexbox


• Card layout using Grid
• Animated button with :hover and transitions
• Landing page with background images and media queries

You might also like