Learn CSS Basic to Advance in 7 Days - Day One

Learn CSS Basic to Advance in 7 Days

• Introduction
• What is CSS?
• Basic Syntax
• CSS Selectors
• Working with Colors
• FAQ
• Conclusion

Introduction

Welcome to the first day of your CSS learning journey. CSS, or Cascading Style Sheets, is a language used to style the HTML of a web page. With CSS, you can change the colors, fonts, and layout of your web pages. This article will cover the basics you need to start using CSS.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the appearance of web pages. With CSS, you can style elements, such as headings, paragraphs, and divs, in a web page. CSS allows you to separate the content of your web page from its design.

Basic Syntax

CSS is written in rules. Each rule has a selector and a declaration block. The selector is the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property and a value, separated by a colon.

Here is an example of a CSS rule:

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

In this example, the selector is "p" which stands for paragraph. The declarations change the color of the text to blue and set the font size to 14 pixels.

CSS Selectors

Selectors are used to target HTML elements. There are several types of selectors in CSS:

• Type Selector: Selects elements by their type, such as p for paragraphs or h1 for headings.
• Class Selector: Selects elements by their class attribute. Use a dot (.) before the class name. For example, .myClass.
• ID Selector: Selects elements by their id attribute. Use a hash (#) before the id name. For example, #myId.
• Universal Selector: Selects all elements in a document. Use an asterisk (*).
• Attribute Selector: Selects elements with a specific attribute. For example, input[type="text"] selects all text input fields.

Working with Colors

CSS allows you to use different types of values for colors:

• Color Names: Basic colors like red, blue, green.
• Hex Codes: A six-digit code representing the amount of red, green, and blue. For example, #ff0000 for red.
• RGB: Specifies the amount of red, green, and blue. For example, rgb(255, 0, 0) for red.
• RGBA: Same as RGB, but includes an alpha value for transparency. For example, rgba(255, 0, 0, 0.5) for semi-transparent red.
• HSL: Stands for hue, saturation, and lightness. For example, hsl(0, 100%, 50%) for red.
• HSLA: Same as HSL, but includes an alpha value. For example, hsla(0, 100%, 50%, 0.5) for semi-transparent red.

FAQ

What is CSS?

CSS stands for Cascading Style Sheets. It is a language used to style the HTML of a web page.

Why is CSS important?

CSS is important because it allows you to control the appearance of your web pages. It helps to separate content from design, making your HTML cleaner and easier to manage.

What is a CSS selector?

A CSS selector is used to target HTML elements. There are different types of selectors, such as type, class, and ID selectors.

What is a CSS declaration?

A CSS declaration is a part of a CSS rule. It consists of a property and a value, separated by a colon. For example, color: blue;.

What are hex codes?

Hex codes are six-digit codes representing the amount of red, green, and blue in a color. For example, #ff0000 is red.

Conclusion

Today, you learned about the basics of CSS. We covered what CSS is, its basic syntax, and different types of selectors. You also learned about working with colors using different values like hex codes and RGB. These basics will help you start styling your web pages.

Tomorrow, we will dive deeper into more advanced topics. Stay tuned and keep practicing!