WEB DEVELOPMENT SERIES(PART- 5)

This blog is a part of the web development series. If you haven’t gone through the previous parts then please go through them.

3 min readApr 1, 2021

HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.

Using The class Attribute

<!DOCTYPE html>

<html>

<head>

<style>

.headings{

color: lightgreen;

font-family: cursive;

background-color: black; }

</style>

</head>

<body>

<h1 class=”headings”>This is first heading</h1>

<h2 class=”headings”>This is Second heading</h2>

<h3 class=”headings”>This is third heading</h3>

<h4 class=”headings”>This is fourth heading</h4>

</body>

</html>

Output:-

We have defined style for a class name “headings”, and we can use this class name with any of HTML element in which we want to provide such styling.

BASICS OF CSS:-

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

I will list down some of the key advantages of learning CSS:

Create Stunning Web site — CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.
Become a web designer — If you want to start a career as a professional web designer, HTML and CSS designing is a must skill.
Control web — CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Learn other languages — Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.

Using CSS

CSS can be added to HTML documents in 3 ways:

Inline — by using the style attribute inside HTML elements
Internal — by using a <style> element in the <head> section
External — by using a <link> element to link to an external CSS file

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;”>A Blue Heading</h1>

<p style=”color:red;”>A red paragraph.</p>

</body>
</html>

Output:-

So, now let’s end this blog here and in next blog we will learn some more concepts HTML Classes and CSS.

“Until then Goodbye, Stay Safe!”