How to add css to html code [SOLVED]

[Updated] Adding Simple CSS to your HTML Code


Cascading Style Sheets or CSS describes how your HTML elements should be "dressed up" to appear on your browser. It tells how HTML elements should be formatted, layout, sized, and arranged to appear on browsers, and behave on small and big screens.


For example, all text colors should be black, linked text colors should be red, and so on.


There are three ways on how we can add the CSS codes to an HTML:

1. Inline
Style attribute is added to HTML elements within the body section


<p style="color:gray;  background-color:powderblue;  padding:15px"> 

This is a sample paragraph. The code tells us that the text color should be gray and the background color should be powder blue. 

</p>



2. Internal
<style> is added within the head section of the HTML code.

<head>
   <style>

     p {
         color: gray; 

        background-color: powderblue;

        padding: 15px;
        }

     </style>
</head>

<body>

<p> This is a sample paragraph. The code tells us that the text color should be gray and the background color should be powder blue. </p>

</body>



3. External
CSS file saved as styles.css is "linked" or "referenced" in HTML file using the <link> tag code in the head section.


HTML
 <html>
<head> 

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

</head>

<body>

<p> This is a sample paragraph. The code tells us that the text color should be gray and the background color should be powder blue. </p>

</body>
</html>


CSS (saved as styles.css)
p {
         color: gray; 

        background-color: powderblue;

        padding: 15px;
   }




All of the above code would result to this:

Now, let us try some more CSS:

h1  {color: orange}

 p {
color:black;
background-color: #e8e8e8;
}

a
{
color:orange;
text-decoration:none;
}

In this example, the arrangement of the tag codes and symbol are varied. Notice also that the colors are specified through its name such as orange or black, and through its hexadecimal code #e8e8e8.

Here is our sample HTML with internal CSS:
<!DOCTYPE html>
<html>
<head>

<style>
h1  {color: orange}

p {color:black;
     background-color: #e8e8e8;
     padding: 10px}

a
{color:orange;
  text-decoration:none}

</style>
</head>

<body>
<h1>Lorem ipsum dolor sit amet</h1>

<p>This is a simple tutorial on adding CSS to an HTML file. This is based on <a href="https://www.w3schools.com/html/html_css.asp"> W3Schools </a>page, and you may try your CSS and HTML code in their
<a href="https://www.w3schools.com/html/tryit.asp?filename=html-default"> Tryit Editor </a>. </p>

<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


</body>
</html>

You may copy the above code, paste it in Notepad and save it as sample.html or you may also download it here. Open the file with Google Chrome, Mozilla Firefox, or any compatible browser.

This article is based on W3Schools website and is recommended for use of Grade 5 students. This also assumes basic knowledge of HTML5.