HTML style using CSS

Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.

Example:

Test it Now

In the above example, we have used a style attribute to provide some styling format to our code.

Output:

Welcome to javaTpoint

This is a great website to learn technologies in very simple way.


Three ways to apply CSS

To use CSS with HTML document, there are three ways:

  • Inline CSS: Define CSS properties using style attribute in the HTML elements.
  • Internal or Embedded CSS: Define CSS using

    Learning HTML with internal CSS

    This is a blue color paragraph

    This is a red color paragraph

    This is a green color paragraph

Test it Now

Note: In the above example, we have used a class attribute which you will learn in the next chapter.


External CSS:

An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.

There are two files need to create to apply external CSS

Example:

Test it Now

CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

Commonly used CSS properties:

Properties-name Syntax Description
background-color background-color:red; It defines the background color of that element.
color color: lightgreen; It defines the color of text of an element
padding padding: 20px; It defines the space between content and the border.
margin margin: 30px; margin-left: It creates space around an element.
font-family font-family: cursive; Font-family defines a font for a particular element.
Font-size font-size: 50px; Font-size defines a font size for a particular element.
text-align text-align: left; It is used to align the text in a selected position.
Next TopicHTML Classes




Hot Tutorials

Contact US

Email:[email protected]

HTML with CSS
10/30