CSS Introduction.
CSS stands for Cascading Style Sheets. CSS is used to add styling to the HTML. With CSS, we can add specify things like what text colour we want to use, what fonts to use, how the page should be designed, etc.
If HTML is the skeleton of human body, then CSS is its flesh.
Let’s see how we can use CSS in our HTML pages to make them look more attractive.
First, we will create our basic HTML page.
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
This is the basic page. It is time to make it a bit attractive with the CSS. As you already know that each HTML element can have attributes. We add CSS to the HTML by adding style attribute to the HTML element we want to design.
Here, we want to change the colour of the H1 tag to blue. So, we add style attributes to the HTML element and specify color:blue;.
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<h1 style = “color: blue; ”> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
We can add multiple CSS properties to the elements. Suppose, we want to H1 tag to be at the center. For that, we will use text-align property and specify it to center;
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<h1 style = “color: blue; text-align: center;”> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
Now you know how to add a colour property to the HTML elements, you can set the colour to anyone you like by specifying it with color property. Try changing the colour to red instead for the p element. Can you do that?
Using Style Element
Imagine we have another H1 element in our code and we want to style it the same way as styled the previous H1 element. We can add same CSS properties to our new H1 element and we would get the results we want.
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<h1 style = “color: blue; text-align: center;”> This is the heading 1</h1>
<h1 style = “color: blue; text-align: center;”> This is the heading 2 </h1>
<p> This is the paragraph </p>
</body>
</html>
But you might notice one kind of problem with this approach. First, there is duplication. We have to write same CSS properties again for another element. If we have many H1 elements then we have to copy CSS code the same number of times.
It turns out that for such cases, there is a better alternative to this. We use <style> element in the <head> of the page and specify CSS properties there.
<html>
<head>
<style>
h1 {
color:blue;
text-align: center;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<h1> This is the heading 1</h1>
<h1> This is the heading 2 </h1>
<p> This is the paragraph </p>
</body>
</html>
Notice how we are specifying same properties in <style> element and not in individual H1 elements. Can you set properties for paragraph the same way? Try it.
Using External CSS
In websites, we have multiple pages. The CSS properties you specify in <head> of a page will apply only to the elements of that specific page. But what if you want to use same properties for elements in a different page? We create external style sheets to specify CSS properties and link the style sheet in which ever page we want to use properties for.
We will create style sheet named style.css and add same properties in it as:
<style>
h1 {
color:blue;
text-align: center;
}
</style>
Now we can link this sheet in our HTML file as:
<html>
<head>
<link rel = “stylesheet” href = “style.css”>
<title> CSS Intro! </title>
</head>
<body>
<h1> This is the heading 1</h1>
<h1> This is the heading 2 </h1>
<p> This is the paragraph </p>
</body>
</html>
Notice that we use <link> element to link our external style.css file in the <head> section. This will copy over all the styling information from style.css file and apply it to this page.
rel specifies the relationship of the link and here it is “stylesheet” and href points to the address of the external stylesheet which in this case is style.css.
This approach makes our code more robust and avoids duplicacy.
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply