CSS Practice

 

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall visual appearance of a webpage, allowing you to separate content from design.

Basic Concepts of CSS

1. Selectors: Define which HTML elements the styles will apply to. Examples include element selectors (p for paragraphs), class selectors (.classname), and ID selectors (#idname).

2. Properties and Values: Each CSS rule has a property (like color, font-size, margin) and a value that specifies how that property should be displayed.

   • Example:

     p {
         color: blue;
         font-size: 16px;
     }
     

3. CSS Box Model: Understanding the box model is essential as it describes how elements are sized and spaced on the page. The box model includes content, padding, border, and margin.

4. CSS Layouts: Techniques like Flexbox and Grid allow for the creation of responsive, flexible layouts that adapt to different screen sizes.

5. CSS Positioning: Controls how elements are placed on the page. Common values include static, relative, absolute, fixed, and sticky.

Code Examples for Practice

Example 1: Basic Text Styling

/* CSS */
p {
    color: darkblue;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    text-align: justify;
}

<!-- HTML -->
<p>This is a paragraph styled with basic CSS properties.</p>

Example 2: Styling with Classes and IDs

/* CSS */
.header {
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
}

#intro {
    font-size: 18px;
    color: #333;
}

<!-- HTML -->
<div class="header">
    <h1>Welcome to CSS Practice</h1>
</div>
<p id="intro">This paragraph is styled with an ID selector.</p>

Example 3: Box Model and Spacing

/* CSS */
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #000;
    margin: 10px auto;
    background-color: #e0e0e0;
}

<!-- HTML -->
<div class="box">
    <p>This box demonstrates the CSS box model.</p>
</div>

Example 4: Flexbox Layout

/* CSS */
.container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.box {
    background-color: #ffc107;
    padding: 20px;
    width: 100px;
    text-align: center;
}

<!-- HTML -->
<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

Example 5: Responsive Design with Media Queries

/* CSS */
.container {
    width: 80%;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

<!-- HTML -->
<div class="container">
    <p>This container is responsive and will adjust based on screen size.</p>
</div>

Chapter Challenges

1. Challenge 1: Create a personal webpage with a styled header, navigation menu, and footer using CSS. Use different font styles, colors, and background images.

2. Challenge 2: Design a responsive layout using Flexbox that includes a navigation bar, a main content area, and a sidebar.

3. Challenge 3: Build a pricing table using the CSS box model, applying padding, margins, and borders to create a clean and organized layout.

4. Challenge 4: Develop a photo gallery using CSS Grid, where images automatically rearrange based on screen size.

5. Challenge 5: Create a multi-column text layout for an article, using CSS to control the column gap, text alignment, and overall spacing.