How to change the font size of a particular paragraph using CSS class and id in HTML?

Here, we will learn how we can change the font size of the text written in a particular paragraph using CSS class and id in HTML?
Submitted by Prerna Saxena, on October 04, 2017

CSS stands for cascading style sheets. It defines the style of HTML elements. Using CSS we can change the look and feel of whole website according to different screen sizes, using animations in html elements and defining different sections in a website beautifully designed. You can define CSS in html using three ways- external style sheets, internal style sheets, or inline.

You can define CSS style like this:

h1 {property: value;}

Now, we will see how we can we change font size of particular paragraph using CSS?

1) Using ID

We can change style of particular paragraph using ID. We can define ID name starting with "#" in style tag under head tag.

#heading1{ color:red;}

Here, #heading1 is the name of CSS ID, color is the property name and red is the value of property.

Applying CSS using ID (Here, I am applying it on H1 tag).

<h1 id="heading1">

2) Using class

We want to change font size of similar paragraphs with same font size we will use class property of css. We can define class using "." With class name.

.para{ color:blue;}

Here, .para is the name of CSS ID, color is the property name and blue is the value of property.

Applying CSS using ID (Here, I am applying it on H1 tag).

<p class="para">

To change the font size of particular paragraph, we can use ID and CLASS both methods of CSS defining.

The property to define the font size if "font-size" and we can define the value either in pixels or in percentage.

Consider the HTML Code (Example) - here we are changing the font size in percentages and also defining the text colors.

<html>
	<head>
		<title>SAMPLE</title>
		<style>
			.headings
			{
				font-size: 150%;
				color: red; /*or use, #ff0000*/
			}

			.para
			{
				font-size: 120%;
				color: blue; /*or use, #0000ff*/
			}		
		</style>
	</head>
	<body>
		<h1 class="headings">This is sample page</h1>
		<p class="para">
			Lorem Ipsum is simply dummy text of the printing 
			and typesetting industry. Lorem Ipsum has been the 
			industry's standard dummy text ever since the 1500s, 
			when an unknown printer took a galley of type and 
			scrambled it to make a type specimen book.		
		</p>
	</body>
</html>

Result

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples