Skip to main content

Command Palette

Search for a command to run...

"Bringing Webpages to Life: A Beginner's Guide to CSS Styling"

#CSS..

Updated
2 min read
"Bringing Webpages to Life: A Beginner's Guide to CSS Styling"
A

BTech CSE student at IIIT Ranchi | Aspiring Software Engineer | Passionate about coding, building innovative projects, and solving real-world problems through technology. Currently diving into web development, Machine learning and deep learning. Always learning, creating, and pushing boundaries! #Tech #Coding

Today I am going to start with CSS i.e. cascading style sheet.. Before that we will know why we are studying this topic it has a lot of reasons and some of them I will discuss with you..

The very first reason is it provides life to the website created using html only , make colorful and attractive such that reader attract towards the webpages.. Now there are three method to use css which includes inline styling , internal styling and external styling.. Style attribute plays a very important in css and without this sometime css not responds.. let us talk about inline styling..

<body style="background-color: yellow;">
    <!-- inline styling  and style attribute is very important in CSS-->
    <p style="color:blueviolet">Hello Duniya</p>
</body>

Inline styling is a method in html that allows you to apply style directly to an html element using style attribute and other important thing is that this style can override any other style.. Now another method is internal styling..

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 2</title>
    <style>
        body{
            background-color: rosybrown;
        }
        p{
            color: aquamarine;
        }
    </style>
</head>

Now this style is used in different way that the style tag is used within the head tag of html code and hence you can make different changes using colors of body as well as any tag . the last method is external styling...

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS 2</title>
</head>

In this method also we use style system within the head tag of html code but using the link tag by giving rel attribute firstly making a css file and then paste the link within the link tag and this way it creates changes in the html code.. One last thing is the correct way to give the color will be discussed later the above way is not exactly correct..

In conclusion, CSS is an essential tool for web development that transforms plain HTML into visually appealing and engaging webpages. By understanding and utilizing the three main methods of CSS styling—inline, internal, and external—you can effectively control the appearance of your website. Each method has its unique advantages, allowing for flexibility and creativity in design. As you continue to explore CSS, you'll discover the power it holds in bringing your web projects to life, making them not only functional but also aesthetically pleasing. Keep experimenting with different styles and techniques to enhance your skills and create captivating web experiences. Thank you..

More from this blog

Untitled Publication

28 posts

Currently pursuing Bachelor of technology (Computer science and Engineering) from INDIAN INSTITUTE OF INFORMATION TECHNOLOGY RANCHI,JHARKHAND..