Ericson Dela crus Watch on YouTube

CSS TUTORIAL , COC 1 - COC4

3 min read 3 hours ago

Published on Nov 06, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial provides a comprehensive guide to CSS, covering the essential concepts and techniques from the video by Ericson Dela Cruz. Whether you're a beginner or looking to brush up on your skills, this step-by-step tutorial will help you understand how to utilize CSS for styling web pages effectively.

Step 1: Understanding CSS Basics

What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. It controls layout, colors, fonts, and overall style.
CSS Syntax
CSS is structured with selectors and declarations:
```
selector {
    property: value;
}
```
- Selector: Targets the HTML element you want to style.
- Property: The aspect of the style you want to change (e.g., color, font-size).
- Value: The setting you want to apply (e.g., red, 16px).

Step 2: Adding CSS to HTML

Inline CSS
Apply styles directly within an HTML element using the style attribute:
```
<h1 style="color: blue;">Hello World</h1>
```

Internal CSS
Use the <style> tag within the <head> section of your HTML document:

<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

External CSS
Link to an external stylesheet using the <link> tag:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Step 3: CSS Selectors and Specificity

Types of Selectors
- Element Selector: Targets elements by their tag name (e.g., p for paragraphs).
- Class Selector: Prefix with a dot (e.g., .classname).
- ID Selector: Prefix with a hash (e.g., #idname).
Specificity Hierarchy
Understand how CSS applies styles based on specificity:
- Inline styles > IDs > Classes > Elements

Step 4: Box Model Concept

Understanding the Box Model
Every element on a web page is a rectangular box that consists of:
- Content: The actual content (text, images).
- Padding: Space between the content and the border.
- Border: Surrounds the padding and content.
- Margin: Space outside the border.

Example CSS Code
To illustrate the box model:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Step 5: Common CSS Properties

Text Properties
- Color: color: red;
- Font Size: font-size: 16px;
- Text Alignment: text-align: center;
Background Properties
- Background Color: background-color: blue;
- Background Image: background-image: url('image.jpg');
Layout Properties
- Display: display: block; or display: inline;
- Position: position: relative; or position: absolute;

Conclusion

In this tutorial, we covered the fundamentals of CSS, including its syntax, how to integrate it with HTML, the box model, and common properties. These concepts are essential for creating visually appealing web pages. As a next step, practice by creating your own styles and experimenting with various CSS properties to enhance your web development skills.

Table of Contents

Recent