Sololearn blogHow To Add CSS To HTML
time to read 6 min read

How To Add CSS To HTML

Are you an aspiring frontend developer? Then you need HTML and CSS. They are the languages that make websites work.

HTML defines the structure of a website and CSS adds the fun element. With the help of HTML and CSS, you can make a static page colorful and more engaging. 

That’s why, here, we will be discussing how to link CSS to HTML.

First things first, you’ve to learn HTML to learn frontend development. HTML lets you define the way you want to structure your website. It defines the initial document to show content on. But, with HTML only, you’ll likely end up with a colorless black and white site. What you’ll be seeing is some content along with links and headings. Now, what do you need to make content more readable and interesting?

Well, to make the site interesting to the end user and nicely show content, you need CSS. You can link CSS to HTML to use both on your website. By using CSS, you can actually do a lot more than adding simple HTML inline styles. With CSS, you can add transitions and animations, and enhance user experience. All that leads to more users on your website contributing to achieving the website’s goal.

Let’s discuss what CSS is and how to link CSS to your HTML.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language for HTML pages. CSS is an invaluable tool for adding style to a web page designed with HTML. You can format information in a way that’s clearer for users to grasp.

CSS allows you to apply HTML inline styles to specific elements. You can control how and where to display HTML elements. With CSS, you can control the text size, color, font, and spacing between elements. You can also set the layout, hierarchy, or position of elements. Also, you can have some fun with background images or background colors too.

Not only that, with CSS media queries, you can set different styles for different screen sizes. You can change the text size as per screen size, edit font, and do much more! Basically, with CSS you can apply styles to different devices and screens. It allows you to transform a staticWhat Is Responsive Web Design? HTML page into an interactive site that wows users.

How to Add CSS to HTML?

Now that you’ve learned what CSS is, the next step is to learn to add CSS to HTML. One good thing about the computer world is that there are many ways to achieve the same thing. The same goes in this case, you can link CSS to HTML in three ways. These three ways are:

  • Inline CSS  
  • Embedded/Internal 
  • CSS  External CSS 

Let’s go through each way and understand how to make it practically work.

Inline CSS

The simplest way of adding CSS is using inline CSS. As the name suggests, you add CSS to the HTML element. By using inline CSS, you can add styling to specific elements, and have more control over them.

For CSS inline styling, add the style attribute to the relevant element.

Example

Here is an example of creating a paragraph with a black background and white text. It also has a heading in which we have changed the font size, family, and color.

<h2 style= "color:blue; font-size:30px; font-family: 'Segoe UI'; text-align: center;" > Inline Styling - Heading </h2>
        <p style="color:white; background-color:black; font-family: 'Segoe UI'; text-align: center;">
            This is an example paragraph with CSS inline styling.
         </p>

Result:

Do you see how we are repeating some CSS, like font-family?

CSS inline styling is not the best way to add styles to elements. For example, in a website page that needs the same style for all headings or content, you’ll have to add it to each element. In such situations, using Internal or external CSS is a better approach.

Internal CSS

Internal CSS refers to adding CSS inside the head section of the HTML page. It is a better approach to adding styles to an HTML page. You can open the <style> tag, refer to the elements, and close the tag </style> in the head of HTML.

In the case of Internal and External CSS, you can have more control over elements. You can use CSS classes and ids to define styles and apply them to elements. A CSS class starts with “.” in CSS styles and can be applied to many elements. It is a unified way of creating a certain style. Later, we can add that in the “class” attribute of the HTML element. But, the id starts with “#” and should refer to a single element only.

Example:

<html>
  <head>
    <title>Sololearn - Internal CSS</title>
    <style>
      body {
        font-family: 'Segoe UI';
        text-align: center;
      }

      p {
        color: white;
        background-color: gray;
      }

      .info {
        color: black;
        background-color: yellow;
        padding: 15px;
        border-radius: 3px;
        font-weight: bold;
      }

      #main {
        Font-size: 30px;
        Color: darkblue;
      }
    </style>
  </head>
  <body>
    <h1 id="main"> Heading One - Main ID applied</h1>
    <p>This is an example of internal CSS.</p>
    <p class="info">This is the second paragraph with class info!</p>
  </body>
</html>

Result:

As you can see in this example, we do not have to repeat the same CSS many times. Also, we can do a lot of cool stuff and set a theme for the whole page! We can simply use the body tag (where all the content goes) and define the styles there.

External CSS

External CSS refers to defining CSS externally (outside the HTML page) and linking back to it. You can define all stylings rules in a text file, which is saved with the .css extension. This separate CSS file is then added to the HTML using the <link> tag. The <link> (link) tag goes inside the head section.

Internal CSS is a good way of defining styles if we want to add that to a single page only. But consider the scenario in which you’ve to make many pages with the same style? In fact, all modern websites use a single theme and approach across the whole website. That’s where external CSS can help. It is the preferred way of adding CSS as it makes code concise and gives more control.

Example:

HTML:

<html>
  <head>
    <title>Sololearn - External CSS</title>
    <link rel="stylesheet" href="SololearnCSS.css">
  </head>
  <body>
    <h1 id="main"> Heading One - Main ID applied</h1>
    <p>This is an example of internal CSS.</p>
    <p class="info">This is the second paragraph with class info!</p>
  </body>
</html>

CSS:

 
body{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
p {
color:rgb(41, 41, 41);
background-color:lightgray;
padding: 15px;
}
.info
{
color:rgb(187, 10, 10);
background-color: yellow;
padding:25px;
border-radius: 5px;
font-weight: bold;
font-size: 20px;
}
#main
{
Font-size:30px;
Color:darkblue;

Result:

In this example, we’ve kept the same content, but CSS is in a separate file. We’ve also done some styling changes to separate it from the previous examples.

While each way of using CSS has its own benefits, in the real world, a combination of all three is used. External CSS is the most preferred way of adding CSS to HTML pages. Next, you can use Internal CSS where only a single page needs some changes, not the whole theme.

You can use CSS inline styling when there is a minor change in a single element. Yet, it is better to avoid using inline CSS as it is hard to control styling through it. Each time there is a change, you need to find that element and change that style. On the other hand, with internal and external CSS, you can define the id of that element and simply change styles.

What’s Next?

Now that you know the key steps to follow, take your newfound skills to the coding playground at Sololearn. Try them out on real-world coding challenges and projects with Sololearn. You can start by copying the examples above and adding your own styles to them.

Or, if you want to know more, try our CSS or HTML Fundamentals courses to learn the fundamentals in detail. Also, you can complete quizzes and continue to build your programming skill set. Apply these skills later to a demo project, and you’ll be on your way to becoming an expert frontend developer!

Related blogposts