0.3 CSS basics

Rashmin's photo
Rashmin
·

3 min read

0.3 CSS basics

Hello again, coding enthusiasts! 🌟 In this blog, we're diving into the world of CSS – the magic wand that transforms the structure of your HTML into a visually stunning masterpiece. Ready to make your Zerodha-inspired interface look good?

Understanding CSS

CSS (Cascading Style Sheets): This styling language lets you control the presentation of your HTML elements. It's like giving your webpage a makeover, making it visually appealing.

Adding Style to HTML Elements

Example 1: Changing Text Color

p {
  color: blue;
}

In this example, the color of all <p> (paragraph) elements will turn blue.

Example 2: Setting Font Size

h1 {
  font-size: 24px;
}

Here, the font size of all <h1> (heading) elements will be set to 24 pixels.

Types of CSS

1. Inline CSS

Applied directly to a single element using the style attribute.

<p style="color: green;">This text is green.</p>

2. Internal CSS

Defined within the <style> tag in the head section of your HTML.

<head>
  <style>
    p {
      font-style: italic;
    }
  </style>
</head>

3. External CSS

Stored in a separate CSS file and linked to your HTML.

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

Chrome Inspect for Testing

Chrome Developer Tools: A powerful set of web developer tools built into the Chrome browser. To inspect and test your styles:

  1. Right-click on an element on your webpage.

  2. Select "Inspect" from the context menu.

  3. In the "Elements" panel, you can see and modify the styles applied to the selected element.

Understanding Flex

Flexbox: A layout model that allows you to design complex layouts more efficiently and with less code.

.container {
  display: flex;
  justify-content: space-between;
}

Here, the .container class becomes a flex container, and its children will be evenly spaced along the main axis.

Note

For CSS, we recommend checking the following documentations and A LOT OF GOOGLING!!! Learn and explore by yourself: MDN Web Docs - CSS and W3Schools - CSS Tutorial.

Your Updated Code

Check out the code. See how we've transformed the structure into a visually appealing Zerodha-inspired interface.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zerodha Landing</title>
</head>
<body>
    <div style="display: flex; justify-content: space-between; padding-left: 200px; padding-right: 200px; padding-top: 20px; padding-bottom: 20px; box-shadow: 2px 1px 2px #eee;">
        <img width=120 src="https://zerodha.com/static/images/logo.svg" alt="zerodha logo">
        <div style="color: #666;">
        <span style="padding: 20px;">Signup</span>
        <span style="padding: 20px;">About</span>
        <span style="padding: 20px;">Products</span>
        <span style="padding: 20px;">Pricing</span>
        <span style="padding: 20px;">Support</span>
        </div>
    </div>
    <br></br>
    <br></br>
    <center>
    <img style="width: 60%; height: auto;" src="landing.png" alt="Landing page image">
    </center>
    <br></br>
    <br></br>
    <center>
    <h1 style="color: #666; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Invest in everything</h1>
    <h3 style="color: #666; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Online platform to invest in stocks, derivatives, mutual funds, and more</h3>
    <br></br>
    <button style="display: inline-block; padding: 10px 30px; text-align: center; background-color: #387ed1;
    color: #fff;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 3px;">Sign up now</button>
    </center>
</body>
</html>

Results of the code:

Next Up: The Real Dev!

We are gonna see some basic JavaScript concepts in upcoming blogs! Happy Coding!

1.1 JavaScript Foundation - https://rashmin.hashnode.dev/dev-1-1

Home Article - https://rashmin.hashnode.dev/dev

HTMLCSS