If you know CSS better than me?

We all know the CSS (Cascading Style Sheets) Right? But how many of we know the meaning of Cascading? Most of us know CSS for very long time but do they know the meaning of Cascading of till this time Do they try to find out? perhaps no.

Cascading comes from the word cascade, which means
“a process where something flows downward in stages — like a waterfall.”

Don’t get it right? I got you 😉

Let’s See this from Scratch. and How CSS works.

What is Cascading?

What happens When We write HTML code just an only just HTML did you inspect that code? let’s do now

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Submit</button>
</body>
</html>

I just add one button in this code. No CSS, without any styling let’s take a look at result

Look at this result even though I didn’t add any CSS still we can see border to the button and little change on the background color. Where this come from?

So, this is the default styling of browser. all browse has its own default styling they all may vary little. try to check in your different browse this same code results.

Now if you inspect it you can see the default styling of browser: -

Now let’s try to add some own styling to the button

<style>
button {
    height:2rem;
    background-color: blue;
    color: white;
}
</style>

After adding this style now check you inspect option. You notice that your styling is there, and the default styling of button is also still there but you noticed that which style attribute that you add you can see line-through it in the default styling section.

This is called Cascading. one type of override. it will override the style by order and priority. it won’t remove the style it just overrides it. if you remove your styling that default styling is going to be appear.

Now let’s understand more deeper about CSS Basics.

How to Apply CSS?

We have three ways to apply CSS: -

Inline CSS
Internal CSS
External CSS

CSS follows rules like:

Inline > Internal > External
Closest rule wins
Later rules can override earlier ones (if specific enough)

Inline CSS

Inline CSS has the most priority in all of three.

<button style="color: red;">Submit</button>

name tells all, this is how you write inline CSS. you can add whatever style you want in inline

<button style="color: red; border: 5px solid black; border-radius: 2px;">Submit</button>

Internal CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS</title>
</head>

<style>
    /* Internal CSS Exxample */

    button {
        height: 2rem;
        background-color: blue;
        color: white;
    }

</style>

<body>
    <button>Submit</button>
</body>

</html>

This is how you write internal CSS. in the <Style> </Style> tag.

A CSS selector is used to target HTML elements so you can apply styles to them.

Whether you're using internal CSS (inside <style> in the <head>) or external CSS, the selectors are the same — the only thing that changes is where you write the code.

So, let’s now go through all major CSS selector types, explained in simple words with examples.

1. Universal Selector (*)

*{ margin: 0; padding: 0;}

2. Type Selector (Element Selector)

p { font-size: 18px; }

3. Class Selector (.)

.card { border: 1px solid #ccc; }

4. ID Selector (#)

#header { background-color: black; }

5. Group Selector (,)

h1, h2, p { font-family: 'Arial'; }

There are more but now you know what and how much options do you have.

External CSS

External CSS is a way to separate your CSS code from your HTML by writing it in a separate .css file.

To use external CSS, you create a separate CSS file and link it to your HTML file. Here's a simple example:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button>Click Me</button>
</body>
</html>

CSS (styles.css):

/* External CSS Example */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: green;
}

button {
    height: 2rem;
    background-color: blue;
    color: white;
}

Explanation:

In the HTML file, the <link> tag in the <head> section is used to link the external CSS file. The href attribute specifies the path to the CSS file.
The CSS file (styles.css) contains the styles that will be applied to the HTML elements. This keeps your HTML and CSS separate, making your code easier to manage.

  <link rel="stylesheet" href="styles.css">

This line helps to link both html and CSS file.

This is all about basics of CSS part-1. We’ll discuss more on part-2.

#chaicode #CSS #WebDevlopment

Basics Of CSS