Style CSS

Introduction

When we are trying to build a web page without HTML, it is not possible. With the help of HTML, we can create page content, including headings, paragraphs, images, tables, forms, and lists inside our web page. But only with HTML can we not create a beautiful and responsive webpage. To achieve this, we have to take the help of CSS.

What is CSS?

CSS stands for Cascading Style Sheet. With the help of Cascading Style Sheet(CSS), we can provide all the style properties to the web page. With the help of CSS, we can set the background color, font-size, font-family, color, … etc., properties of elements on a web page. The CSS also determines how all the content should be displayed on the web page.

How to Add CSS to HTML

We can add CSS inside the HTML in three ways. These are as follows.

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS

In inline CSS, we have to provide the required CSS properties inside the opening tag in the body tag. This is known as inline CSS. We can perform this with the help of style attributes.

How to Add Inline CSS to HTML

Inline CSS is also known as an embedded stylesheet. We must follow the syntax below to add the CSS in HTML.

The inline CSS can override any other applied CSS because it is close to the HTML tag.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 style="color: blue; font-size: 24px; text-align: center;">Welcome to JavaTpoint</h1>

  <p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333;">This is an example of inline CSS. Inline styles are defined directly within the HTML elements using the 'style' attribute.</p>

  <div style="background-color: #f2f2f2; padding: 10px;">
    <p style="font-style: italic; font-weight: bold; color: green;">This is another paragraph with different inline styles applied.</p>
  </div>
</body>
</html>

Output

Explanation:

We have taken inline CSS to apply different styles to the h1, p, and div elements in the above code.

Internal or Embedded CSS

When there is a single HTML file, and we have to provide the property to it, we have to go for Internal or Embedded CSS. We can write the CSS property inside the head tag in this CSS. We can write the CSS property with the help of <style> tag.

How to Add Internal CSS to HTML

We can write the internal CSS inside the head tag with the <style> tag. We can write the internal CSS with the help of the below syntax.

<head>
   
<style>
       
selector { CSS property: value; }
   
</style>
</head>

Using the internal css is the better practice in comparison to inline CSS. With the help of internal CSS, we can provide the style property to the group of elements at once. We can separate the CSS and HTML, but we have to write these in one document. All of our code is present in one file.

However, taking internal CSS is not a good practice when we have more than one HTML page. In that situation, we have to go for external CSS.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
   }
 
   h1 {
    color: #007bff;
    text-align: center;
   }
 
   p {
    margin-bottom: 20px;
   }
 
   .highlight {
    background-color: #ffc107;
    padding: 5px;
    border-radius: 5px;
   }
  </style>
</head>
<body>
  <h1>Welcome to javaTpoint</h1>
 <p>This is an example of an internal CSS. It allows you to apply styles directly to HTML elements within the <style> element.</p>
 <p>You can also use classes to style specific elements, like this <span class="highlight">highlighted text</span>.</p>
</body>
</html>

Output

External CSS:

In external CSS, we have to create an external CSS file and link it with the HTML element. We have to save that CSS file with the extension of the CSS file. We have to link the CSS file with the help of the CSS file. With the help of tags, it will be applied to the whole HTML file.

How to Add an External CSS File to HTML

We have to link the CSS file with the help of the below syntax. We have to write the syntax inside the <head> tag.

Syntax:

<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">

Before writing the example, let's know about some best practices for the reason during the writing of the code. These are as follows.

Whenever we need to provide the CSS property to the HTML file, we need to change this in the external file. It is the most time-effective method.
It is the most SEO-friendly software. It is very easy to read by the search engine.
It also enables the browser for the visitor to load the CSS file.

Example:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="container">
  <h1>Welcome to javaTpoint</h1>
  <p>This is a paragraph with some text. <a href="https://www.javatpoint.com/">Click here for javaTpoint</a>.</p>
  <a href="https://www.javatpoint.com/" class="button">Click for javaTpoint</a>
 </div>
</body>
</html>

CSS CODE:

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
 }
 
 h1 {
  color: #333;
 }
 
 p {
  color: #666;
  line-height: 1.6;
 }
 
 a {
  color: #007bff;
  text-decoration: none;
 }
 
 a:hover {
  text-decoration: underline;
 }
 
 .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
 }
 
 .button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
 }
 
 .button:hover {
  background-color: #0056b3;
 }

Output