Creating Your First Style Using CSS

As we know that, HTML alone can not create the required styles and the effects in your current html project at all.  We also know that the styling in the site can be provided via the CSS code. So, from theme, we can say that, in order to create different layout in your html projects, there is the requirement of the different styling to be used in it. Hence, here, we will be providing you with the HTML code along with CSS code about creating your first style using the CSS codes deployed in your project. The code is provided below:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Creating Your First Style Using CSS</title>
<!-- This is how we define the stylesheet in same document -->
body {
<!-- End of stylesheet -->

<h2>Hello World!</h2>
<p>This is an example for the stylesheet.</p>

The above image shows the result of using the CSS styling in the current HTML document, which is not possible without the use of the stylesheet or CSS style. Here, in the above code, what we have done is, we have just added some text in <h2> tag and <p> tag. And we have also added the CSS code as below in it:

body {

Here, since we have added the CSS code to body element, all of the content inside it will get affected. For eg: we have added text-align:center; in it, so, all the text written in it will be center aligned and this CSS code background-color:#000; will make the body background as black.

But, what about if you want to control only the part of your text element, ie, like the heading tag. For eg: if you have copied the above code, then, after the body CSS class, you can add the below code:

h2 {
font-size: 100px;
color: #00f;

What the above code addition does is, it will display the Hello World! text with font-size of 100px with the color of it as blue.

If you have learnt from the above steps, then, we can assume that you can now write your first CSS style for your HTML project without any confusion on how to use it.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.