Introduction to styling HTML pages using CSS !!

frstwalket (34)in #programming • 6 years ago (edited)

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.

Intro to css.jpg

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.
This is a basic frame of our code. The text between <p> </p> Tags will be styled. Let's do it !

Note :- To use CSS, there are two methods,

1) To Style within the HTML sheet.
2) To make a separate sheet of CSS to style HTML sheet.

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>

<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 :-

*This is the final code. It is also written above. You can copy this if you want :). *

Code Output :-

This is the output of the code if you do this correctly. This is a pretty basic tutorial about CSS and HTML on which coming advanced HTML and CSS tutorials will be based :)

Upvote, Comment, Follow and Resteem if you want to support me and upcoming advanced tutorials.
This surely means a lot to me :)

Upvote,Resteem & Comment.png