1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
42. 

HTML CSS

Updated on 21/08/2024426 Views
Content

The first-ever webpages were far from appealing and very different from the ones we know now. Subsequently, we started using HTML and CSS to enhance the visual appeal of the web pages, and from that moment, there’s been no turning back. 

Among the first concepts we learn in web development is CSS or Cascading Style Sheets. It is a sought-after skill, essential to land a job. Speaking from my experience, mastering HTML CSS will definitely help you progress in this field, as it did many others like me.

Having used the technology for years, I can vouch for its efficiency in designing attractive web pages. HTML CSS is used to style the layout, appearance, and presentation of HTML elements in web pages and web apps. This HTML CSS tutorial aims to get you started with the basics. 

What is CSS in HTML?

Let’s begin with the HTML CSS basics. 

CSS in HTML is a style sheet language used to specify the visual appearance of HTML elements on a webpage and web apps. HTML CSS helps developers control various styling elements like colors, fonts, layout, spacing, borders, and backgrounds of HTML elements.

In this tutorial, we will learn basic HTML CSS website design with the help of HTML CSS code examples.

CSS for Colors, Fonts, and Sizes

Here, we will learn how to add CSS in HTML code to alter colors, font, and font sizes. Let me briefly explain this with an example of HTML CSS code.

CSS for fonts, colors, and sizes

Code:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

  color: green;

  font-family: verdana;

  font-size: 300%;

}

p {

  color: purple;

  font-family: courier;

  font-size: 160%;

}

</style>

</head>

<body>

<h1>This is the heading in green</h1>

<p>This is a paragragh in purple.</p>

</body>

</html>

Types of CSS in HTML

Ever wonder how to link CSS to HTML? There are typically three main ways to link CSS in HTML. Here, I will discuss each one in detail with the help of individual examples.

Inline CSS

Inline CSS in HTML is the process of adding styles directly to HTML elements using the style property found in the HTML tag. This approach lets you apply CSS styles in the same line, without needing another CSS file.

Inline CSS

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Example of Inline CSS</title>

</head>

<body>

    <!-- Applying inline CSS to a paragraph -->

    <p style="color: red; font-size: 18px; font-weight: bold;">This is an inline css paragraph example in red.</p>

    <!-- Applying inline CSS to a div -->

    <div style="background-color: lightblue; padding: 15px;">

        <p>This is an inline CSS div example with lightblue background color and padding.</p>

    </div>

    <!-- Applying inline CSS to a heading -->

    <h1 style="text-align: center; color: lightgreen;">Inline CSS Heading in Light Green</h1>

</body>

</html>

Now, let me explain each element in detail.

Internal CSS

Internal CSS defines CSS styles directly within the HTML document using the <style> tag in the <head> section. It enables us to apply CSS styles particular to that HTML file without the need for a separate CSS file. I have explained it below with the help of an example.

Internal CSS example

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Example of Inline CSS</title>

    <style>

        /* Internal CSS styles */

        body {

            font-family: Arial, sans-serif;

            background-color: #a0f3f1;

        }

        h1 {

            color: blue;

            text-align: center;

        }

        .container {

            width: 85%;

            margin: 0 auto;

            padding: 22px;

            background-color: lightgreen;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .highlight1 {

            background-color: lightblue;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Welcome to Internal CSS Example</h1>

        <p>This paragraph has default styles it got from the body.</p>

        <p class="highlight1">This paragraph has a class with internal CSS styles called "highlight1" applied.</p>

    </div>

</body>

</html>

Now, let us understand this example in detail.

  • The <style> element in the section of the HTML text provides internal CSS styles.
  • CSS styles are applied to the HTML elements like <h1>, .container, and .highlight.
  • The <div> with class .container has CSS styles for width, margin, padding, background color, and box shadow applied using internal CSS.
  • The paragraph or <p> element borrows its styles from the class .highlight like background color and font weight.

External CSS

External CSS involves saving CSS styles in a separate CSS file and attaching them to an HTML document via the element in the section. This method enables you to apply styles uniformly across different HTML pages while maintaining a clear separation of content (HTML) and appearance (CSS). Let me explain with an example.

Code:

<!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>

    <!--This Links to the external CSS file -->

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

</head>

<body>

    <div class="container">

        <h1>External CSS tutorial</h1>

        <p>This paragraph has default styles inherited 

        

        from the external CSS file called external.css.</p>

        <p class="highlight">This paragraph has a class 

        with external CSS styles attribute applied.</p>

    </div>

</body>

</html>

Code:

/* externalstyles.css */

body {

    font-family: Arial, sans-serif;

    background-color: #a0f0f0;

}

h1 {

    color: lightblue;

    text-align: center;

}

.container {

    width: 80%;

    margin: 0 auto;

    padding: 20px;

    background-color: grey;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.highlight {

    background-color: lightyellow;

    font-weight: bold;

}

Now let us dissect the above example to understand better. Meanwhile, you can learn HTML SCC online and play with CSS styles to make interactive webpages. 

Priority Order

Ever wondered which CSS style is prioritized if there are multiple types of CSS styles at play for an HTML element? Let me discuss exactly that in this section.

The priority of the CSS styles is also known as Cascading Order or Specificity.

Inline CSS

In the case of CSS priority, inline CSS takes precedence. It has the highest CSS priority. To give an example of the syntax,

<p style=”color:blue;”> This paragraph uses blue colour.</p>

Internal CSS

Internal CSS has the highest priority after inline CSS. Let's examine the syntax of internal CSS in HTML.

<head>

 <style>

        p { color: blue;}

    </style>

</head>

<p> This paragraph is colored light blue and has inline CSS with a color attribute set to lightblue.</p>

External CSS

External CSS has the least priority among the three. Styles are defined in external .css files connected to HTML documents via the <link> tag. Let us look at the syntax for external HTML CSS.

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Example for External CSS </title>

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

</head>

This is the syntax for the main HTML file. Here, the <link> tag links the HTML file to an external CSS file, which is externalCSS.css in this case. You can write your CSS styles in that file.

Header in HTML CSS

One of the key components in a modern HTML CSS website design nowadays is the header. The header helps to easily navigate the multipage website. It usually goes to the top of the website and links the other pages with an anchor link. The header also serves as an introduction to the webpage and holds a splash of information that gives us an idea of the website.


Header example for HTML CSS

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Example for Header in HTML CSS</title>

    <style>

        

        body, h1, h2, h3, p, ul, li {

            margin: 0;

            padding: 0;

        }

        

        header {

            background-color: #333;

            color: white;

            padding: 10px 0;

        }

        .container {

            max-width: 1200px;

            margin: 0 auto;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        nav ul {

            list-style-type: none;

            display: flex;

        }

        nav ul li {

            margin-right: 20px;

        }

        nav ul li:last-child {

            margin-right: 0;

        }

        nav ul li a {

            color: white;

            text-decoration: none;

        }

        nav ul li a:hover {

            text-decoration: underline;

        }

    </style>

</head>

<body>

    <header>

        <div class="container">

            <img src="logo.png" alt="Logo for Website">

            <nav>

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Link1</a></li>

                    <li><a href="#">Link2</a></li>

                    <li><a href="#">Link3</a></li>

                </ul>

            </nav>

        </div>

    </header>

    <p>This is where your website starts after the header.</p>

</body>

</html>

Here, as you can see, I have added the hover effect over Link1, Link2, Link3, and Home. This effect underlines the names when you hover the cursor over it. You can change the names of the links to whatever you want like services, about, etc. You can simultaneously change the links the anchor tags are referring to from # to whatever is needed.

Summing Up

In short, HTML organizes web content, but CSS styles and improves its presentation. Together, they build visually beautiful and well-structured web pages. This results in a better user experience and a more efficient web development process.

This tutorial is a great stepping stone to learning HTML CSS. However, if you want to learn more advanced topics of HTML CSS, I recommend checking courses from upGrad. Their courses are in collaboration with some of the best universities around the world and are sure to provide something valuable to your web development journey.

Frequently Asked Questions

  1. Why is CSS good for HTML?

CSS is good for HTML because it allows for developing a more intuitive webpage. Without CSS, HTML webpages would be very boring and unappealing.

  1. How does HTML work with CSS?

HTML works with CSS to provide the structure and content of a web page, where CSS specifies the visual appearance and layout of HTML parts. CSS styles target specific HTML elements and apply stylistic rules, resulting in an engaging and visually pleasing display of the webpage.

  1. Do HTML and CSS go together?

HTML and CSS work together because they complement one another in web page creation. HTML provides the structure and content of a web page, whereas CSS provides the visual appearance and styling of HTML elements.

  1. Which CSS is best for HTML?

There is no single "best" CSS for HTML, as many factors such as project requirements, developer preferences, and current web standards, contribute to the choice of which CSS to use.

  1. Can I write HTML in CSS?

No, HTML cannot be written directly in CSS. HTML is a markup language for structuring material, whereas CSS is a style language for controlling how the HTML elements look. They provide a variety of functions and must be used together yet separately in web development.

  1. Can HTML run without CSS?

Yes, HTML can function without CSS. HTML defines the structure and content of a web page, allowing it to be displayed and function without CSS. However, CSS cannot work without HTML.

  1. How to view HTML without CSS?

To see an HTML webpage without CSS, simply disable it in your web browser. Most modern browsers have developer tools that allow you to turn CSS on and off.

  1. Is HTML CSS very easy?

CSS is considered a little harder to learn than pure HTML, but both are essential in web development. With practice and resources, they can be managed.

Ankit Mittal

Ankit Mittal

Working as an Senior Software Engineer at upGrad, with proven experience across various industries.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...