Labels

HTML and CSS - 03




If you didn't follow up on my previous posts on HTML and CSS lessons, please refer to the below links.

html and ccs - 01

html and css - 02

Ok, in previous lessons we have gone through Head tag, body tag, paragraph tag. 

Today let's do small decorations to our content using CSS. 

Check the below HTML. 

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>My page title</title>

		<style type="text/css">

		p{
		color:green;
		}

		h2{
		color:blue;
		}

		h1{
		color:red;
		}

		</style>

	</head>

	

	<body>

		<h1>This is header</h1>

		<h2>This is header</h2>

		<h3>This is header</h3>

		<h4>This is header</h4>

		<p>This is Paragraph<p>

	</body>

</html>






See the result of it. 


So if you analyze the HTML code written here, I've used the <style> tag inside the <head> to decorate the content. 
Here an internal CSS code is added. There are 3 ways you can add CSS style to your content.
  • Internal CSS
  • External CSS
  • Inline CSS
Here I've used the Internal way. - Writing the CSS script in the style tag itself.

External CSS - writing the CSS script in a separate CSS file and load that CSS to HTML file in the head section.

In-line CSS - including the CSS in the style attribute of the tag. 

We will be learning those later in a descriptive manner. For now, just pay attention to the above example. 

There I've added a style by its tag name.
So, what if I had several <p> tags and I want to add different styles for each of the <p> tags. 

With this method, I can't. 

Well. unfortunately, we are not going to discuss those stuff right now. 😀

Let's play more on HTML before we move on to CSS. 

So That's enough for today. try your own example until I'm back with my next post on this series. 

😃




















Labels:


















Comments











Post a Comment



















Popular Posts