DEV Community

Raizo-03
Raizo-03

Posted on

DAY 1 OF CSS

Day 1: CSS Fundamentals

🎨 CSS Overview

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages.

What CSS Does:

  • Styling: Controls colors, fonts, spacing, and layout
  • Layout: Positions elements on the page
  • Responsive Design: Makes websites work on different screen sizes
  • Visual Effects: Adds animations, transitions, and interactive elements

Why Use CSS:

  • Separation of Concerns: Keeps content (HTML) separate from presentation (CSS)
  • Reusability: One CSS file can style multiple HTML pages
  • Maintainability: Easy to update the look of an entire website
  • Performance: Faster loading times through external stylesheets

🏷️ CSS Selectors

Selectors are patterns used to select and style HTML elements. They tell the browser which elements to apply the CSS rules to.

Basic Selectors

Selector Type Syntax Description Example
Element Selector element Selects all elements of a specific type p { color: blue; }
Class Selector .classname Selects elements with a specific class .highlight { background: yellow; }
ID Selector #idname Selects element with a specific ID #header { font-size: 24px; }
Universal Selector * Selects all elements * { margin: 0; }

Selector Examples: 

/* Element selector - targets all <h1> elements */
h1 {
    color: navy;
    font-size: 28px;
}

/* Class selector - targets elements with class="button" */
.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
}

/* ID selector - targets element with id="navigation" */
#navigation {
    background-color: #333;
    height: 60px;
}

/* Universal selector - targets all elements */
* {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

📝 The <style> Tag

The <style> tag is used to include CSS directly in an HTML document. It's placed within the <head> section.

Syntax: 

<head>
    <style>
        /* CSS rules go here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
Enter fullscreen mode Exit fullscreen mode

Three Ways to Add CSS:

  1. Inline CSS (directly in HTML elements) 
   <p style="color: red; font-size: 16px;">This is red text</p>
Enter fullscreen mode Exit fullscreen mode
  1. Internal CSS (using <style> tag) 
   <style>
       p { color: red; font-size: 16px; }
   </style>
Enter fullscreen mode Exit fullscreen mode
  1. External CSS (separate .css file) 
   <link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

🎯 CSS Properties and Values

CSS properties define what aspect of an element you want to style, and values specify how you want to style it.

Common Text Properties

Property Description Example Values
color Text color red, #ff0000, rgb(255,0,0)
font-size Size of text 16px, 1.2em, large
font-family Font type Arial, serif, sans-serif
font-weight Text thickness normal, bold, 400, 700
text-align Text alignment left, center, right, justify

Common Layout Properties

Property Description Example Values
margin Space outside element 10px, 0 auto, 5px 10px
padding Space inside element 20px, 10px 15px, 5px 10px 15px 20px
width Element width 100px, 50%, auto
height Element height 200px, 100vh, auto
background-color Background color white, #f0f0f0, rgba(0,0,0,0.5)

Common Border Properties

Property Description Example Values
border All border properties 1px solid black, 2px dashed red
border-width Border thickness 1px, thin, medium, thick
border-style Border style solid, dashed, dotted, none
border-color Border color black, #333, rgb(100,100,100)

Property Examples: 

/* Text styling */
h1 {
    color: #2c3e50;
    font-size: 32px;
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    text-align: center;
}

/* Box model styling */
.card {
    width: 300px;
    height: 200px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Multiple properties */
.button {
    color: white;
    background-color: #007bff;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

💡 Key Takeaways

  • CSS controls the visual presentation of HTML elements
  • Selectors determine which elements to style
  • Properties define what to style (color, size, spacing, etc.)
  • Values specify how to style the selected properties
  • The <style> tag allows you to include CSS directly in HTML
  • External stylesheets are the preferred method for larger projects

🔍 CSS Rule Structure

Every CSS rule follows this basic structure:

selector {
    property: value;
    property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example:

.my-class {
    color: blue;
    font-size: 18px;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

This foundational knowledge forms the basis for all CSS styling and is essential for creating visually appealing web pages!

Top comments (0)