HTML CSS

HTML CSS: CSS is defined as Cascading style sheets. CSS helps us to know how the elements are displayed on screen, paper or in other media. And it also saves a lot of work. It can also control multiple webpages all at once.

HTML CSS

CSS provides various style properties such as color, padding, margin, border-color and many more, to style a web page. While each property in CSS has a name-value pair, and each property is separated by a semicolon(;).

Example:

<body style="text-align: center;">  
  <h2 style="color: red;">Welcome to javaTpoint</h2>  
  <p style="color: green; font-size: 25px; font-style: italic ;">Freshersnow is a awesome website for learning programming languages </p>  
</body>

CSS can be defined in 3 different ways. They are as follows:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1. Inline CSS

In HTML, Inline CSS is used for applying a unique style to a single HTML element. And inline CSS uses the style attribute of an HTML element.

Example:

<h1 style="color:red;">This is a RedHeading</h1>

2. Internal CSS

An internal CSS is helpful for applying a style for a single HTML page. It is defined in the <head> section of HTML page, within a <style> element.

Example:

<!DOCTYPE html>  
<html>  
<head>  
                  <style>  
      /*Internal CSS using element name*/  
            body{background-color:lavender;  
             text-align: center;}  
             h2{font-style: italic;  
              font-size: 30px;  
              color: #f08080;}  
            p{font-size: 20px;}  
        /*Internal CSS using class name*/  
            .blue{color: blue;}  
            .red{color: red;}  
            .green{color: green;}  
      </style>  
    </head>  
  <body>  
   <h2>Learning HTML with internal CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

3. External CSS

In HTML, an external CSS contains an extra file that only contains style code using the class name, id name, tag name, etc., If we are having multiple web pages, and which use a similar webpage for an application. Then we can use external CSS.

Example:

<!DOCTYPE html>  
<html>  
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">  
    </head>  
  <body>  
   <h2>Learning HTML with External CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>

List of properties utilized in cascading style sheets

property name Syntax Description
background-color background-color:red; It defines the background color of that element.
color color: light green; It defines the color of the text of that element.
padding padding: 20px; It defines the space between content and border
margin  margin: 30px; margin-left: It creates a 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