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.
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.
😃
Comments
Post a Comment