Basics of CSS (Cascading Style Sheets)

CSS is a stylesheet language used to describe the presentation of a document written in HTML. It enhances the visual appearance and layout of web pages. Here are the basics:

1. CSS Syntax:

  • CSS rules consist of a selector and a declaration block.
   selector {
       property: value;
   }
  • Selector: Targets HTML elements to apply styles.
  • Property: Specifies the style attribute.
  • Value: Defines the value for the property.

2. Selectors:

  • Element Selector: p { color: blue; }
  • Class Selector: .highlight { background-color: yellow; }
  • ID Selector: #header { font-size: 24px; }
  • Universal Selector:
    “`css
    • {
      margin: 0;
      padding: 0;
      }
      “`

3. Properties and Values:

  • Color: body { color: #333; background-color: #f8f8f8; }
  • Font: h1 { font-family: 'Arial', sans-serif; font-size: 28px; font-weight: bold; }
  • Margin and Padding: div { margin: 10px; padding: 20px; }
  • Border: img { border: 1px solid #ccc; }
  • Text: p { text-align: center; line-height: 1.5; }
  • Background:
    css section { background-color: #e0e0e0; }

4. Box Model:

  • The CSS box model consists of content, padding, border, and margin.
  • Box Model

5. Positioning:

  • Relative Positioning: div { position: relative; top: 10px; left: 20px; }
  • Absolute Positioning:
    css .absolute { position: absolute; top: 50px; right: 30px; }

6. Flexbox:

  • Simplifies the layout design, especially for responsive design.
   .container {
       display: flex;
       justify-content: space-between;
   }

7. Responsive Design:

  • Use media queries to adapt styles based on screen size.
   @media screen and (max-width: 600px) {
       body {
           font-size: 16px;
       }
   }

8. Transitions and Animations:

  • Transitions: button { transition: background-color 0.3s ease; } button:hover { background-color: #3498db; }
  • Animations: @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slide-in { animation: slide 1s ease-out; }

Conclusion:

CSS is a powerful styling language that allows developers to control the presentation of HTML elements. These basics provide a foundation for creating visually appealing and responsive web pages. As you delve deeper into CSS, you’ll explore advanced features, layout techniques, and best practices for efficient styling.

Back to