Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Adding CSS Code to HTML

See in this article how to declare your css code in different ways, we will also see how to work with id and class.

Introduction to CSS

Hello guys, in this article we will talk a little about CSS (Style Sheet Cascating). We will see how we can apply these codes on their websites.

There are several ways to add css code on your site, they are:

  • inline
  • Declaring the same page
  • Using an external file

Now let's see how to use each one. Let's start by creating an HTML document that will be our default document for the tutorial, it contains just one h1 tag and paragraphs.

Listing 1: Document standard html

<html>
<head>
    <title> CSS Code - Understanding the stylesheet </title>
</head>
<body>
<h1>Sou a tag h1</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>

Well, now that we have created a standard html, we will begin to implement the CSS on it showing the different ways of doing this, let's start with inline css.

Inline CSS Code

The inline css is not widely used on websites to let the code "polluted" with lots of information, but is widely used in the creation of mailings and email marketing.

Its use is very simple to use it, just insert the style inside the html tag that will receive the effect.

As it is applied directly on that specific tag, it is impossible to reuse it in another tag, always having to copy and paste or create a new one for each tag you want to style.

Listing 2: Applying inline css

<html>
<head>
    <title>CSS Code - Understanding the stylesheet</title>
</head>
<body>
<h1 style="font-style: italic;">Sou a tag h1</h1>
 
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>
As we can see in the above code for each tag that estilizamos had to create a new effect. In the case of p tag we use the same style, but we had to re-write it so that it applied to all tag's. Example of CSS Inline

Figure 1: Example of CSS Inline

CSS code on the same page

This type of statement is a bit different from inline declaration, it is applied on the same page where the tag's are to be stylized, but are declared globally, thus avoiding the style we need to insert in each specific tag.

Listing 3: Example of declaration on the same page

<html>
<head>
    <title> CSS Code - Understanding the stylesheet </title>
<style type="text/css">
h1{
    font-style: italic;
}
p{
    color: red;
}
</style>
</head>
<body>
<h1>Sou a tag h1</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>

If you notice, the effect achieved will be the same, but that the statement is viewed differently? In this example we declare a global way, ie:

  • Every h1 tag will have the effect stated
  • Every tag p will have the effect stated

But what if we want to apply different effects to each p tag, for example, how would we do?

This is where it begins to enter the id and class attributes, so we can put into effect only on elements that have that class or that id.

Note: I usually say that the id is unique for each element and the class can be used in other elements. This is my personal opinion and that is how I work with them.

Let's create an example where we now see in practice what I just said above.

Listing 4: Using id and class

<html>
<head>
    <title> CSS Code - Understanding the stylesheet </title>
<style type="text/css">
h1{
    font-style: italic;
}
#fundo{
    background-color: #a3a9fa;
}
.paragrafo{
    color: red;
}
.paragrafo2{
    color: #0018ff;
}
</style>
</head>
<body>
<div id="fundo">
    <h1>Sou a tag h1</h1>
 
    <p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
    <p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>
 
</body>
</html>
 

As seen above, the ID is represented by "#" and the class ".", The result of the above code can be seen in Figure 2.

Using ID and Class

Figure 2: Using ID and Class

Css code

Now we will see more use css declaration, the external. Basically it consists of you put all the css code in an external file. Css and html you just link / file to call this code to be stylized.

To make this link we have to use the code below:

Listing 5: Linking external css

<link rel="stylesheet" type="text/css" href=" here comes the link of your external file ">
Create a new document and save it with the name estilo.css, place the code below Listing 6: estilo.css
h1{
    font-style: italic;
}
#fundo{
    background-color: #a3a9fa;
}
.paragrafo{
    color: red;
}
.paragrafo2{
    color: #0018ff;
}

In the Html code place the linking code, looks like this:

Listing 7: Code html

<html>
<head>
    <title> CSS Code - Understanding the stylesheet </title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="fundo">
    <h1>Sou a tag h1</h1>
 
    <p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
    <p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>
 
</body>
</html>
 

These are the 3 ways to declare a css code if anyone has any questions, feel free to post in the comments that I have a pleasure to respond and help. I do not answer questions by e-mail, please use the specific comments of each article.

I hope you enjoyed, until next.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login