Learn CSS - I

Learn CSS - I

Mastering CSS: A Comprehensive Guide to Building Stylish Web Designs

kunal bandale's photo
kunal bandale
·

5 min read

Table of contents

Hello everyone, back again with a new comprehensive guide on CSS. From today onwards, I am starting a new series on CSS where I will cover the whole CSS from beginning to end. So, without wasting much time, let's begin our journey of learning CSS! Before learning CSS, you must have knowledge of HTML and a few HTML tags. You can watch any video from YouTube, or you can refer to my notes to learn HTML. 👉 HTML NOTES

Introduction

What is CSS?

HTML stands for Hypertext Markup Language and is used to structure web pages. CSS, which stands for Cascading Style Sheets, is utilized for styling and designing websites. It helps in making websites responsive and giving them a premium look. Simply put, CSS is used for styling web content.

Basic Syntax of CSS

/* sample code of CSS*/
h1 {
    font-size:40px;
}

From the above code, there are three things to understand: selector, property, and value.

h1 - Selector: The HTML element that you want to style.

font-size - Property: The attribute you want to change (such as color, padding, margin).

40px - Value: The specific style you want to apply to the property (red, bold, 40px, etc.).

Commenting in CSS

Comments are used to increase code reusability and understanding. Below is the syntax for commenting in CSS.

/*
Author : Kunal Bandale
Code   : style code to give heading red color
*/
h1 {
    color:red;
}

The Color Property

The first property we will learn is the color property, which allows us to specify the color of text. The color property determines the foreground color. Let's explore an example to understand the color property better.

p {
color: yellow;
}

h1 {
color : blue;
}

In the above code, I've solely utilized named values to assign colors. However, CSS offers numerous methods for color assignment, such as RGB, RGBA, and hexadecimal codes. Your task is to explore other color values that can be used. Here's the documentation link for you to study.

👉 Color Values to Study

Including Styling

In CSS there are 3 ways to include style in the HTML code

  1. Inline CSS

  2. Internal CSS

  3. External CSS

Inline CSS

<p style="color:blue"> This is the way how inline css is defined </p>
<p style="color:yellow"> This is the way how inline css is defined </p>

Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
p {
color:green;
}
</style>
</head>
<body>
<p> This is the way how internal css is defined </p>
</body>
</html>

Both of the aforementioned methods aren't recommended for any project you undertake; they are suitable only for testing purposes. External CSS is the preferred and recommended approach for your projects—it's the most advisable way to proceed.

External CSS

<!DOCTYPE html>
<html>
<head>

<link rel = "stylesheets" href = "style.css">
</head>
<body>

<h1>External CSS</h1>
<p>This is most used way of css styling.</p>

</body>
</html>

h1 {
color:blue;
}

p {
font-size:40px;
}

The task is to test the three methods of styling to determine their priority in CSS.

Selectors in CSS

Now, you know what are selectors we used element selector in the above example now we will study different selectors in css .

  1. element selector

  2. universal selector

  3. id selector

  4. class selector

  5. group selector

  6. descendant selector

Let's study one by one with examples

Element Selector

h1 {
color:red;
}
p {
color:yellow;
}

Universal Selector

The universal selector, denoted by the asterisk (*) symbol, is employed in CSS to select all elements within an HTML document. It applies styles universally to every element on the webpage. This selector is especially useful when a certain style needs to be applied globally across the entire document. It's important to use the universal selector judiciously as it can impact all elements and might override specific styles applied to individual elements.

* {
padding:0;
margin:0;
}

Id Selector

An ID selector in CSS is used to select a specific element based on its unique identifier within an HTML document. It's denoted by the hash symbol (#) followed by the ID name.

<!DOCTYPE html>
<html>
<head>
<title>id selector</title>
</head>
    <body>
        <p id="first"> This is first paragraph </p>
        <p id="second"> This is second paragraph </p>
    </body>
</html>

#first {
color:red;
}

#second {
color:yellow;
}

Class Selector

In CSS, a class selector is used to select multiple elements that share the same class attribute. It's denoted by a period (.) followed by the class name.

<!DOCTYPE html>
<html>
<head>
<title>id selector</title>
</head>
    <body>
        <p class="color"> This is first paragraph </p>
        <p class="color"> This is second paragraph </p>
    </body>
</html>

.color {
color:red;
}

Group Selector

A group selector in CSS allows you to apply the same style rules to multiple selectors at once. It involves grouping selectors together, separated by commas.

h1 , h2 , h3 , p {
color:pink;
}

Descendant Selector

A descendant selector in CSS is used to select an element that is a descendant of another specified element. It involves specifying two or more selectors separated by whitespace.

<div class="container">
    <p>This is a paragraph inside the container.</p>
</div>

.container p {
    color: red;
    font-size: 14px;  
}

The last task for you in this article is to explore more on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

Conclusion

This concludes our discussion on CSS. Stay tuned for our next article delving deeper into CSS intricacies. Keep practicing and remember to share your newfound knowledge with friends. Happy coding!

CSSCSS3Web DevelopmentDesign#2Articles1Week Challenge