Learn CSS - Basic to Advanced

CSS (Cascading Style Sheets) is used to design the look and layout of web pages. It works alongside HTML to enhance the presentation of a webpage.

1. Introduction to CSS

CSS controls the styling and layout of a website. There are three ways to add CSS to an HTML document:

• Inline CSS: Applied directly to an HTML element.
• Internal CSS: Defined inside the <style> tag within the HTML file.
• External CSS: A separate CSS file linked using the <link> tag.

2. CSS Syntax

CSS rules consist of a selector, followed by properties and values inside curly braces.

h1 {
    color: blue;
    font-size: 24px;
    font-weight: bold;
}
    

3. CSS Selectors

Selectors are used to target specific HTML elements.

p { color: red; }   /* Element Selector */
#id { color: green; } /* ID Selector */
.class { color: blue; } /* Class Selector */
* { margin: 0; } /* Universal Selector */
    

4. Box Model

The CSS Box Model defines the spacing of an element, including content, padding, border, and margin.

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 10px;
    background-color: lightgray;
}
    

5. Flexbox

Flexbox is a layout system that makes it easy to align and distribute space among elements.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}
    

6. CSS Grid

CSS Grid is a powerful system for designing complex layouts with rows and columns.

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

7. CSS Animations

Animations in CSS can be created using the @keyframes rule.

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

.box {
    animation: example 2s infinite;
}
    

8. Responsive Design (Media Queries)

Media Queries are used to make websites responsive to different screen sizes.

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

9. Advanced CSS Concepts

CSS includes advanced features like pseudo-classes, pseudo-elements, and variables.

9.1 Pseudo-Classes

Pseudo-classes define a special state of an element.

button:hover {
    background-color: blue;
}
    

9.2 Pseudo-Elements

Pseudo-elements are used to style specific parts of an element.

p::first-letter {
    font-size: 30px;
    font-weight: bold;
}
    

9.3 CSS Variables

CSS variables help in reusing values across stylesheets.

:root {
    --primary-color: blue;
}

h1 {
    color: var(--primary-color);
}
    

10. CSS Positioning

CSS provides multiple ways to position elements.

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}
.relative {
    position: relative;
    left: 20px;
}
.absolute {
    position: absolute;
    top: 50px;
}
.sticky {
    position: sticky;
    top: 10px;
}
    

11. CSS Transitions

CSS transitions allow smooth changes between property values.

.button {
    background-color: green;
    transition: background-color 0.5s;
}

.button:hover {
    background-color: orange;
}
    

12. CSS Filters

CSS filters are used to apply graphical effects like blur and brightness.

img {
    filter: grayscale(100%);
}
    

Conclusion

CSS is essential for web design. By practicing CSS concepts, you can master front-end development. Keep experimenting and happy coding!