In this post, we'll learn about styling HTML elements using CSS code, CSS stands for Cascading Style Sheet. It is used for changing the look of HTML components on the page and is very important for designing a beautiful user interface. After this tutorial, you'll be able to learn the basics about CSS and can use it in any type of web application or technology to beautify components.
CSS can be used in HTML pages in 3 ways, Here we'll see how to style HTML elements.
Inline CSS
Inline CSS is used to decorate a single HTML element and makes use of style attributes. See this example of styling HTML paragraph tag using inline CSS
<!DOCTYPE html> <html> <body> <p style="color:red;font-size:20px;font-weight:bold;">This is a Red bold Paragraph</p> <p style="color:darkgreen;font-size:15px;font-style:italic;">This is a green italic Paragraph</p> </body> </html>
Internal CSS
Internal CSS is used to decorate elements in a single HTML page. It is defined between <style> - </style> tag in <head> section. See this example of using internal CSS in an HTML page
<!DOCTYPE html> <html> <body> <style> p{ color:red; font-size:20px; font-weight:bold; border: 1px solid blue; padding: 50px; background-color:yellow; } </style> <p>This is a Red bold Paragraph with a border and background color</p> </body> </html>
External CSS
External CSS is used to decorate many HTML pages, Like for designing a website's template we use external CSS, In this, we create a file with .css extension and this file contains CSS code for all page elements.
A CSS file looks like this - style.css
p{ color:red; font-size:20px; font-weight:bold; border: 1px solid blue; padding: 50px; background-color:yellow; } h1{ color:blue; }
And this is how it is attached to the HTML page
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>This is a Red bold Paragraph with a border and background color</p> <h1>This is the H1 heading</h1> </body> </html>
After this information, you'll be able to understand the basics of CSS and get an idea of using styles with any other framework.
Cheers :) Happy Learning
No comments :
Post a Comment