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

![htmlcss.png](https://steemitimages.com/DQmeikv2YU6RNJ3CVABaiu8MoLQ9rChkdZzLKeJDxRc7Lmy/htmlcss.png) 😂😂😂😂

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

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

![Code output.JPG](https://steemitimages.com/DQmbvoryqK7NpUCRtQCarVDphC6gQc7vxLVHQGznQWXnqeo/Code%20output.JPG) *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

______________________________________________________

Introduction to styling HTML pages using CSS !!

Contents of today :-

1 - Writing basic Html :-

Final Code :-

Code Output :-

Replies (0)

No replies yet