HTML and CSS Styles

DataFlair Team

4 years ago

Free Web development courses with real-time projects Start Now!!

One of the major requirements or necessities of a developer working on a web-page is to make it attractive and aesthetic to the users. HTML5 efficiently facilitates the development of static web-pages, but to add more styles(to images, content, backgrounds, etc.), cascading style sheets CSS are used. In this HTML Tutorial by DataFlair, we will learn connection between HTML and CSS. So let’s start!!!!

Linking CSS to HTML

CSS is a language used for styling the HTML document and displaying its elements as per your preference.

Uses of HTML CSS

HTML elements can be made more attractive and appealing by using cascading style sheets.
HTML documents can be incompatible with different devices; they can be made compatible with the help of CSS.
Transition and animation effects can be added, without writing any complex JavaScript codes.
The same style rules can be easily applied to various HTML elements without any hassle.
An element can have dynamic states such as hover and focus that can also be styled using CSS, which would otherwise be a tedious task.
Multiple pages can be styled and manipulated using a single CSS file.
Elements such as skew, scale, rotate, etc, can be easily transformed in 2D or 3D state.

Advantages of HTML & CSS

CSS can be written once and re-used with any HTML document, thus saving time.
These files can be easily maintained, i.e., for a single change, just add it to the global CSS file, and all the HTML documents linked to it will be changed automatically.
Search engines can easily read the CSS files and do not have to struggle.
CSS outshines HTML because of its wider array of properties that can be used to style the HTML document more attractively.
It has a local cache that can be used to view websites offline.
CSS allows compatibility over multiple devices, thus enabling HTML documents to be rendered effectively in a desktop as well as a cell-phone.

The latest version of CSS is CSS3 currently prevailing.

Advantages of CSS3 over CSS

CSS3 allows users to create responsive pages and handles media queries efficiently. Personalized CSS properties can be applied to devices of different screen widths.
With new color formats such as rgb() and hsl(), it is possible to add new color effects and styles to the HTML document.
The ‘box-sizing’ property of CSS3 has made the alignment easier, and CSS grids have reduced the use of table rows and columns.
With CSS, in order to add animations, one had to write a code in the scripting language. With CSS3, it is finally possible to add animations using the inbuilt animation features such as text-shadow, thus reducing the workload of developers.
Every browser supports CSS3, unlike the older vanilla CSS.
CSS3 can be easily tested because of its modularity, thus making bug-detection easier.
With the ‘border-radius’ property, the images and divisions can have rounded-borders, and their borders can be further styled.

As we’ve discussed in the previous article of HTML Styles, CSS can be added to an HTML document using 3 methods – inline CSS, internal CSS, and external CSS. In this article, we’ll be using these methods. Here is an example of basic CSS,

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
h2{
   font-family: verdana;
   text-align: center;
   color: blue;
}
p{
   font-size: 20px;
   color: red;
   font-family: cursive;
}
</style>
</head>
<body>
<h2>DataFlair</h2>
<br>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.</p>
</body>
</html>

Output-

Major HTML and CSS Stylings

1. Font

Attribute	Description
font-family	This attribute is used to specify the font of an HTML document. It is possible to specify multiple fonts separated with a comma. This is used as a fallback system i.e., if the browser doesn’t display the first font, control is shifted to the next.
font-size	This attribute is used to define the font or text size that should be displayed in an HTML document This can be specified in terms of-large, medium, small, or, percentages, or, pixels.
font-stretch	This attribute specifies whether the text will be condensed or expanded.
font-variant	Used to specify whether or not to display a particular content in small caps or not.
font-weight	This attribute is used to specify the thickness of the text in an HTML document.Its default value is ‘normal’.
font-style	Used to specify the style i.e. italic,oblique,or normal of the font.
color	Used to specify the color of the text to be displayed.

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
h2,h3{
   text-align: center;
}
</style>
</head>
<body>
<h2 style="font-family: cursive;font-weight: bold;color: blue">DataFlair</h2>
<h3>E-learning!</h3>
<br>
<p style="font-family: cursive;font-size: 20px;font-style: italic;color: red;font-stretch: expanded;">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
<p style="font-family: monospace;font-size: 15px;font-style: oblique;color: purple;font-stretch: condensed;">DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.</p>
</body>
</html>

Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!

Output-

2. CSS border

The border property is used to specify the styling of the border of a particular element.

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
h2,h3{
   text-align: center;
}
p{
   border: 20px solid red;
}
</style>
</head>
<body>
<h2 style="font-family: cursive;font-weight: bold;color: blue">DataFlair</h2>
<h3>E-learning!</h3>
<br>
<p style="font-family: cursive;font-size: 20px;font-style: italic;color: red;font-stretch: expanded;">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
<p style="font-family: monospace;font-size: 15px;font-style: oblique;color: purple;font-stretch: condensed;">DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.</p>
</body>
</html>

Output-

3. CSS padding

It is used to specify the distance between the text and the implicit or explicit border.

Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
<style>
p{
  border:20px solid blue;
  padding: 10px;
}
</style>
</head>  
<body style="background-color:hsl(0,100%,25%);">
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center" style="color:hsla(0,100%,90%);">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output-

4. CSS Margin

The margin property of CSS is used to set the margins in an HTML document. However, variations such as margin-top,margin-bottom,margin-left and margin-right are also available. If the margin property has values in the manner margin:10px,15px,7px; it means that top margin is 10px, left and right margins are 15px and bottom margin is 7px.

If margin:5px; this means that all the margins are set to 5px.

Code-

<!DOCTYPE html>  
<html>  
<head>  
<title>DataFlair</title>
<style>
p{
  border:20px solid blue;
  padding: 10px;
  margin: 40px;
}
</style>
</head>  
<body style="background-color:hsl(0,100%,25%);">
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> 
<h2 style="text-align: center;"><u>About Us</u></h2> 
<p align="center" style="color:hsla(0,100%,90%);">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>  
</html>

Output-

5. CSS Icons

To add icons to an HTML document, the fontawesome or any other icon library can be used. For example,

Code-

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

Output-

6. Links in CSS

CSS properties can be used to style the links as well. For example,

Code-

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>
<ul>
<li><a href="headings.html">LINK1</a></li>
<li><a href="frames.html">LINK2</a></li>
<li><a href="elements.html">LINK3</a></li>
</ul>
</body>
</html>

Output-

CSS Selectors

A CSS contains selectors and declarations. CSS selector is used to specify the HTML element that should be styled. Declaration contains the name-value property of CSS attributes. For example,

p{
color:blue;
font-family:monospace;
font-size:15px;
}

Here, p is the selector and color:blue; font-family:monospace; font-size:15px;, is the declaration.
The declaration block is contained within curly braces,{}.

1. Universal Selectors

Instead of selecting a particular element, the universal selector is used to select the name of any element it matched. For example,

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
* {  
   color: purple;  
} 
</style>
</head>
<body>
<h1>DataFlair</h1>
<p>Welcome to DataFlair!</p>
<h2>About Us</h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>

Output-

2. CSS Element Selector

The element is used to select a particular element whose name has been specified. For example,

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
p { 
    text-align: center; 
    color: red; 
} 
</style>
</head>
<body>
<h1>DataFlair</h1>
<p>Welcome to DataFlair!</p>
<h2>About Us</h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>

Output-

3. CSS Descendant Selector

Used to select a particular element only when it is a descendant of a particular element. For example,

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
body h2 { 
    text-align: center; 
    color: red; 
} 
</style>
</head>
<body>
<h1>DataFlair</h1>
<p>Welcome to DataFlair!</p>
<h2>About Us</h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>

Output-

4. CSS ID and Class Selectors

This CSS selector is used to select the element based on its ID(using #) or based on class(using .).For example,

Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
#identity { 
    text-align: center; 
    color: red; 
} 
.identity2{
    text-align: center; 
    color: green;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<p id="identity">Welcome to DataFlair!</p>
<h2>About Us</h2>
<p class="identity2">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>

Output-

5. CSS Grouping Selectors

Elements with the same styles can be grouped together with commas(,). For example,
Code-

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style>
h1, h2, p {
  text-align: center;
  color: purple;
  font-family: cursive;
}
</style>
</head>
<body>
<h1>DataFlair</h1>
<p>Welcome to DataFlair!</p>
<h2>About Us</h2>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>

Output-

Summary

In the following article, we’ve looked at the basics of HTML and CSS3 i.e., its advantages and its peculiar features with respect to CSS2 and its prior versions. We’ve also looked at some commonly used CSS properties – font styling, border, padding, margin. Other properties will be studied in depth in the following articles. CSS Selectors that play a major role in CSS styling have also been discussed.