Hello everyone !
Today we're gonna discuss about the relation of HTML(Hyper Text Markup Language) and CSS(Cascading Style Sheet). CSS is as important to HTML as soil to a plant.
I have a big collection of memes based on coding and developing :P . Here is one which fits perfectly according to the blog and shows the importance of CSS used with HTML
Contents of today :-
- Writing basic HTML.
- Using CSS to style HTML.
- Becoming familiar with some CSS keywords.
1 - Writing basic Html :-
Getting started with the body is already written in my previous blogs :) . If you don't have any knowledge about HTML programming, Make sure to follow all my HTML blogs from the very start.
Let's start by adding basic HTML tags.
<html>
<head>
<title> My Website </title>
</head>
<body>
<p> This text will be styled </p>
</body>
</html>
If you don't know what all this means, Stop right here, Read my last three Blogs about html and then come back.
<p> </p> Tags will be styled. Let's do it !Note :- To use CSS, there are two methods,
In this blog, We'll use the first method. So to do this, Add style tag before the body tag of a HTML document as shown below.
<html>
<head>
<title> My Website </title>
</head>
<style>
</style>
<body>
<p> This text will be styled </p>
</body>
</html>
Style tag specifies CSS in an HTML doc. Type in the element you want to style in the Style tag. In this case, We want to style <p> tag, So in the style tags, We'll type in p without any brackets but after typing p, We'll add starting and closing curly braces { } and in these curly braces, We'll add all the styling for a selected element as shown below.
<html>
<head>
<title> My Website </title>
</head>
<style>
p {
All the styling goes in here.
}
</style>
<body>
<p> This text will be styled </p>
</body>
</html>
Lets say that we want white colored text with green background. We'll do this in style tags
<html>
<head>
<title> My Website </title>
</head>
<style>
</style>
<body>
<p> This text will be styled </p>
</body>
</html>
Style tag specifies CSS in an HTML doc. Type in the element you want to style in the Style tag. In this case, We want to style <p> tag, So in the style tags, We'll type in p without any brackets but after typing p, We'll add starting and closing curly braces { } and in these curly braces, We'll add all the styling for a selected element as shown below.
<html>
<head>
<title> My Website </title>
</head>
<style>
p {
background-color: green;
color: white;
}
</style>
<body>
<p> This text will be styled </p>
</body>
</html>
The keyword background color will change the background to whatever color or code of color is written after it while the tag color changes the color of the text.
Final Code :-
Code Output :-
Upvote, Comment, Follow and Resteem if you want to support me and upcoming advanced tutorials.
This surely means a lot to me :)
______________________________________________________