Learn CSS Coding

1. Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements and control their layout.

2. CSS Syntax

selector {
  property: value;
}
    

3. CSS Selectors

p { color: blue; }      /* Selects all <p> elements */
#id { font-size: 20px; } /* Selects an element with a specific ID */
.class { padding: 10px; } /* Selects all elements with a class */
    

4. CSS Box Model

The box model consists of **margin, border, padding, and content**.

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
    

5. CSS Colors

color: red;        /* Named Color */
color: #ff0000;    /* Hex Code */
color: rgb(255,0,0); /* RGB Color */
    

6. CSS Backgrounds

background-color: lightblue;
background-image: url('image.jpg');
background-size: cover;
    

7. CSS Fonts & Text

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
    

8. CSS Flexbox

.container {
  display: flex;
  justify-content: space-between;
}
    

9. CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
    

10. Responsive Design

@media screen and (max-width: 600px) {
  body { font-size: 14px; }
}
    

11. CSS Animations

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

12. Conclusion

CSS is essential for styling web pages. Learning its properties, selectors, and layout techniques allows for better UI designs.