CSS & Styling

Posted on 2/23/2025 4:24:20 AM by Admin

Introduction to CSS

CSS (Cascading Style Sheets)

CSS is used to style HTML pages and make them look attractive. You can think of HTML as constructing a house without any color and decorations and CSS as colors and decorations.

html vs css
HTML & CSS

Basic CSS Syntax


selector {
    property: value;
}

Example:


body {
    background-color: lightblue;
}

h1 {
    color: red;
    text-align: center;
}

p {
    font-size: 20px;
    color: green;
}

How to Apply CSS

html vs css
Ways of adding CSS

1. Inline CSS (Inside an HTML tag)


<p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>
html vs css
Before applying CSS
html vs css
After applying CSS

2. Internal CSS (Inside <style> tag in <head>)


<head>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>
html vs css
Before applying CSS
html vs css
After applying CSS

3. External CSS (Using a separate file)

Create a file styles.css:


h1 {
    color: purple;
}

Then link it in HTML:


<head>
    <link rel="stylesheet" href="styles.css">
</head>
html vs css
Before applying CSS
html vs css
After applying CSS

Now, let me be frank: I cannot teach you CSS. Actually, nobody can teach you CSS, because CSS is like an ocean – a never-ending story. For example, I am poor at drawing, so when I try to draw a flower on paper, it may not look good. However, my friend Jack is extremely good at drawing, and his drawings look amazing.

Why does Jack’s drawing look good? It’s because of his imagination. In his mind, he can envision the shades, the colors, the background, the position, etc. Applying CSS to HTML is very similar to adding colors to your drawing and making it come to life.

So, if you have a creative mind, you can be good at CSS. Now, where and how should you start? Start with simple things, like a basic sketch on MS Paint. Since MS Paint doesn't have many tools, you'll end up drawing a simple sketch.

Next, try to replicate the same sketch using HTML, and then start applying CSS. One great approach I took in the early days of my career was to visit a random website on the internet, take a screenshot of it, and draw the header, footer, sidebar, body content, and image areas on Paint first.

Then, I would replicate the same layout—not the original website, but my Paint version—into HTML, and then I’d apply CSS.

So, in the next chapter, I’ll start creating smaller sections of random websites at once. We’ll see how to add CSS to them. For example, we will first create the navigation bar (navbar) of 2-3 random websites, then move on to the footer, and so on.

Remember, slow and steady wins the race.


Like0
unlike0