Styling HTML elements using CSS

Sharing is Caring

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 the beautiful user interface. After this tutorial, you’ll be able to learn basics about CSS and can use it in any type of web application or technology to beautify components.

Styling HTML elements using CSS

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 attribute. 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>

Try this in our HTML Editor

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>

Try this in our HTML Editor

External CSS

External CSS is used to decorate many HTML pages, Like for designing 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

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

Leave a Reply

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