CSS Oec
Uploaded by
Raj Bhandare BCSS Oec
Uploaded by
Raj Bhandare BWhat is CSS?
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of
Web pages, including colours, layout, and fonts, thus making our web pages presentable to
the users.
CSS is designed to make style sheets for the web. It is independent of HTML and can be used
with any XML-based markup language. Now let’s try to break the acronym:
Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags
Sheets: Writing our style in different documents
CSS History
1994: First Proposed by Hakon Wium Lie on 10th October
1996: CSS was published on 17th November with influencer Bert Bos
Later he became co-author of CSS
1996: CSS became official with CSS was published in December
1997: Created CSS level 2 on 4th November
1998: Published on 12th May
CSS Syntax
Selector {
Property 1 : value;
Property 2 : value;
Property 3 : value;
}
For example:
h1
{
Color: red;
Text-align: center;
}
#unique
{
color: green;
}
Selector: selects the element you want to target
Always remains the same whether we apply internal or external styling
There are few basic selectors like tags, id’s, and classes
All forms this key-value pair
Keys: properties(attributes) like color, font-size, background, width, height,etc
Value: values associated with these properties
CSS Comment
Comments don’t render on the browser
Helps to understand our code better and makes it readable.
Helps to debug our code
Two ways to comment:
Single line
/*<h6> This represents the most/ least important line of the doc. </h6>*/
Here is how to comment out multiple lines:
/*
h1
{
color: red;
text-align: center;
}
*/
CSS How-To-Write
There are 3 ways to write CSS in our HTML file.
Inline CSS
Internal CSS
External CSS
Priority order
Inline > Internal > External
Inline CSS
Before CSS this was the only way to apply styles
Not an efficient way to write as it has a lot of redundancy
Self-contained
Uniquely applied on each element
The idea of separation of concerns was lost
Example:
<h3 style=” color:red”> Have a great day </h3>
<p style =” color: green”> I did this , I did that </p>
Internal CSS
With the help of style tag, we can apply styles within the HTML file
Redundancy is removed
But the idea of separation of concerns still lost
Uniquely applied on a single document
Example:
< style>
h1{
color:red;
}
</style>
<h3> Have a great day </h3>
External CSS
With the help of <link> tag in the head tag, we can apply styles
Reference is added
File saved with .css extension
Redundancy is removed
The idea of separation of concerns is maintained
Uniquely applied to each document
Example:
<head>
<link rel="stylesheet" type="text/css" href="name of the Css file">
</head>
h1{
color:red; //.css file
}
Implementation of all the three types of CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
h1
{
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:Red">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>
This is Css file
#center {
text-align: center;
color:pink;
}
Output:
CSS Selectors
The selector is used to target elements and apply CSS
Three simple selectors
Element Selector
Id Selector
Class Selector
Priority of Selectors
Id > Class>Element
Element Selector
Used to select HTML elements by its name
How we do it
h1
{
Color: red;
}
We selected the heading tag and then changed the color property i.e text color to red. Now
whatever is written in this tag (content) will have the text color as red. Check out CSS
course for free
ID Selector
The id attribute is used to select HTML element
Used to target specific or unique element
How we do it
#unique
{
Color: red;
}
<h1 id=”unique”> Hi </p>
We selected the id and then changed the color property i.e text color to red. Now whatever is
written in this tag (content) will have the text color as red
Class Selector
The class attribute is used to select HTML element
Used to target a specific class of the element
How we do it
group
{
Color: red;
}
<h1 class=”group”> Hi </p>
We selected the class and then changed the color property i.e text color to red. Now whatever
is written in this tag (content) will have the text color as red
Implementation of all the three selectors in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center1 {
text-align: center;
color:pink;
}
.center2 {
text-align: center;
color:red;
}
h1
{
text-align:center;
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green and center-aligned </h1>
<p class = "center2">This paragraph will be red and center-aligned </p>
<p id ="center1">This paragraph will be pink and center-aligned</p>
</body>
</html>
Output:
Now that we have seen all the three selectors now let’s see how style falls or
cascades. We will implement one program where we add style on the same element
by using a tag, id’s, and classes as selectors. The objective of this is to show how
one style cuts the other style that might also be referred to as Priority. We will see
that id have the highest priority over tags and classes.
Now let’s see its implementation:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<style>
p{
color:red;
}
.class {
color:green;
#id{
color:orange;
</style>
</head>
<body>
<p id="id" class="class"> This is CSS </p>
</body>
</html>
If you have observed how one style is fighting against another in order to style the
element. Here the race was won by id, what if all the selectors are classes or tags
then the one which is closer or applied at the end will win the race and what if a class
and tag selectors are used on the same element, in that case, the race will be won
by the class selector.
CSS Colors
There are different colouring schemes in CSS
Three widely used techniques are as follows
RGB
This starts with RGB and takes 3 parameter
3 parameter basically corresponds to red, green and blue
The value of each parameter may vary from 0 to 255.
Eg: RGB(255,0,0); means color red
HEX
Hex code starts with # and comprises of 6 numbers which are further divided
into 3 sets
Sets basically correspond to Red, Green, and Blue
Single set value can vary from 00 to 09 and AA to FF
Eg: #ff0000 ; means color red
RGBA
This starts with RGB and takes 4 parameter
4 parameter basically corresponds to red, green, blue and alpha
Value of the first three parameters may vary from 0 to 255 and the last
parameter ranges from 0 to 1 that is from 0.1, 0.2,…..0.9
Eg: RGB(255,0,0,0); means color red
Implementation of different types of colours in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center{ color:#ff0099;}
h1{ color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:rgb(255,0,0)">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>
This is the output of the above program showing different shades of red.
CSS Background
There are different ways by which CSS can have an effect on HTML elements
Few of them are as follows:
Color – used to set the color of the background
Repeat – used to determine if the image has to repeat or not and if it is
repeating then how it should do that
Image – used to set an image as the background
Position – used to determine the position of the image
Attachment – It basically helps in controlling the mechanism of scrolling
Implementation of Background Property in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
html{
background: #ff9900;
p{
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRT8t-o6oUJ-
E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU");
background-position:center;
background-repeat:no-repeat;
width: 100%;
height: 600px;
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
provident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
CSS Border
Helps in setting up the border for HTML elements
There are 4 properties that can help in setting up of border:
Width – sets the width of the border
Style – sets the style of border; Eg: solid, dashed etc.
Color – sets the color of the border
Radius – determines the roundness of the border
You can set the border for specifically top, right, bottom and left
We can also club top and bottom together and same goes for left and right
Eg: border-width: 2px 5px; sets top and bottom 2px; left and right 5px
Border can also be set in a single line
Eg: border : 2px solid blue;
Implementation of Border Property in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
p{
border-style: solid;
border-color: blue;
border-width: 2px 5px;
border-radius: 10%;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
CSS BoxModel
Every element in CSS can be represented using the BOX model
It allows us to add a border and define space between the content
It helps the developer to develop and manipulate the elements
It consists of 4 edges
Content edge – It comprises of the actual content
Padding edge – It lies in between content and border edge
Border edge – Padding is followed by the border edge
Margin edge – It is an outside border and controls the margin of the element
When you go in chrome and right-click, go on inspect. It will give all the elements
that are used in the HTML file. In the right-hand side, there will be a box model like:
The most inner rectangle represents our content, the padding is nothing but the
space between the content and the border then the margin is the area outside the
border.
Implementation of BoxModel in CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
p{
border: 2px solid blue;
margin: 5px;
padding: 20px;
content: 50px;
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
This is the output of the above program:
Or
CSS Introduction
CSS (Cascading Style Sheets) is a styling language used to add style to a
webpage.
HTML provides structure and adds content to a webpage, while CSS
enhances the visual presentation of that content through various styles. For
example,
Programiz Landing Page With and Without CSS
CSS Syntax
Here's the syntax to style an element on a webpage:
selector {
property1: value;
property2: value;
}
The basic syntax of CSS includes 3 main parts:
selector - specifies the HTML element that we want to apply the styles
property1 / property2 - specifies the attribute of HTML elements that we want
to change (color, background, and so on)
value - specifies the new value you want to assign to the property (color of
the text to red, background to gray, and so on)
To learn more, visit the tutorial on CSS Syntax.
Example: Style a Document with CSS
Let us see an example of an HTML page without CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Browser Output
Now, let's add CSS to the above HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Browser Output
In the above example, notice the following code:
<style>
p {
color: blue;
}
</style>
<style> - an HTML tag used to define a section that contains CSS
p - is a selector that specifies the styles to be applied to all <p> elements on
the page
color: blue - changes the text color of <p> tag to blue
Adding CSS to HTML
In the last example, we used CSS code inside our HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Here, as the CSS code is inside the HTML file itself, it is called internal
CSS.
There are other ways to add CSS to HTML as well. To learn more visit
Adding CSS to HTML.
Comments in CSS
Comments are notes written along with the code that is ignored by the
browser. For example,
/* this is css comment */
The CSS comment starts with /* and ends with */ . Let's see how we can
use comments with CSS code.
/* Define text color for the div*/
div {
color: blue;
}
/* Define text color for headings */
h1{
color: green;
}
In the above example,
/* Define text color for the div*/
/* Define text color for headings */
is a single line comment. It can be seen while reading the code but gets
ignored by the browser during the rendering of the page.
We can also add a multiline comment on CSS. Simply by ending the
comment in a different line. for example,
/* This is
a multi-line
comment */
Why use comments in CSS ?
Comments in code help the person reading the code understand what you
were trying to do when you wrote it.
This makes it easier for other developers to understand the code and make
changes if necessary.
Comments are also useful for anyone who needs to maintain the code in
the future.
Why should you learn to use CSS?
We should learn CSS because of the following reasons:
1. Customizes and styles a website
CSS allows you to customize the appearance of your web page content in
many different ways. For example,
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Browser Output:
As you can see, we have used CSS to change the font and color of web
page elements. CSS gives us the freedom to present our content in a way
that best suits our design vision.
2. Responsive Design
Responsive web design is a web design approach to make web pages
render well on all devices with different screen sizes and viewports.
With the increase of devices of various sizes, it is important to create
webpages that can adapt to different device sizes.
CSS media queries and other techniques allow the creation of web pages
that can automatically adjust to various changes in the screen size. For
example,
Desktop View of Programiz Website
Programiz Website in Desktop View
Mobile View of Programiz Website:
Programiz Website in Mobile View
Here, you can see that the design fits both mobile and desktop design.
3. CSS Animations and Transitions
CSS provides tools to add animations and transitions to the webpage.
Animations and Transitions can enhance the user experience of the
webpage.
Include CSS in a webpage
CSS is used for styling the look and formatting of a document written in
HTML. There are three ways to add CSS in HTML
Inline CSS: Styles added directly to the HTML element.
Internal CSS: Styles defined at the head section of the document.
External CSS: Styles defined in a separate file.
Inline Style
Inline style is the approach of adding CSS rules directly to the HTML
element using the style attribute. For example,
<p
style
="color: red;">Hello, Good Morning</p>
Here,
style - defines the CSS for the element <p>
color: red - changes the text of the <p> element to the color red
The style attribute can be added to any element but the styles will only be
applied to that particular element. For example,
<html lang="en">
<head>
<title>Browser</title>
</head>
<body>
<h1>This is h1</h1>
<p>This paragraph doesn't have CSS.</p>
<p style="color:red">This paragraph is styled with inline CSS.</p>
</body>
</html>
Browser Output
Internal CSS
Internal CSS applies CSS styles to a specific HTML document. Internal
CSS is defined inside an HTML document using <style> attribute within
the head tag of an HTML. For example,
<head>
<style>
p {
color: red;
}
</style>
</head>
Here,
<style> - defines CSS
p - selects p tag and applies CSS to it
color: red; - changes the text color of the content of <p> elements to red
Now, let's look at a complete example of how we use internal CSS in an
HTML.
<html lang="en">
<head>
<style>
p {
color: red;
}
</style>
<title>Browser</title>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>
</html>
Browser Output
Note: The styles defined in an internal stylesheet will only affect the
elements on the current HTML page and will not be available on other
HTML pages.
external-css External CSS
External CSS is an approach to applying CSS styles to HTML pages by
defining the CSS in a separate file.
Let's see an example:
p {
color: blue;
}
Here, we have CSS in a separate file named style.css. The external CSS
file should have a .css extension.
The external CSS file can be linked to the HTML document by using
the link element in the HTML. For example,
<head>
<link href="style.css" rel="stylesheet">
</head>
We use the <link> tag to link the style.css file to an HTML document. In
the above code,
href="style.css" - URL or file path to the external CSS file.
rel="stylesheet" - indicates the linked document is a CSS file
Example: External CSS
Let's see a complete example of using external CSS in an HTML
document.
style.css
p {
color: blue;
}
Now, let's connect it with html file
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<title>Browser</title>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Browser Output:
Using Multiple Stylesheet
We can link multiple CSS file to an HTML file. Suppose we have the
following two CSS files.
style.css
p {
color: red;
}
div {
color: yellow;
}
main.css
body {
background: lightgreen;
}
Now, let's link these two CSS files to our HTML document.
<html lang="en">
<head>
<link href="main.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Browser</title>
</head>
<body>
<h1>Multiple Stylesheet Example</h1>
<p>This is Paragraph 1</P>
<p>This is paragraph 2</p>
<div>This is a content inside a div</div>
</body>
</html>
Browser Output
Here, we have linked main.css and style.css to our HTML file. Adding
multiple CSS files helps us organize our CSS files into manageable parts.
Inline Style Override Internal Style
If an internal CSS and inline CSS are both applied to a tag, the styling from
the inline tag is applied. Let's see an example.
<html lang="en">
<head>
<style>
h1 {
color: blue;
}
p {
background: red;
}
</style>
<title>Browser</title>
</head>
<body>
<h1 style="color: green">Priority Example</h1>
<p>This is Paragraph 1</P>
<p style="background: orange">This is paragraph 2</p>
</body>
</html>
Browser Output
As you can see the styling from inline CSS is applied to elements.
CSS Syntax
CSS syntax is used to add CSS to an HTML document. A CSS syntax
consists of a selector and a declaration block. For example,
selector {
property1: value;
property2: value;
}
The basic syntax of CSS includes 3 main parts:
selector - specifies the HTML element that we want to apply the styles
property1 / property2 - specifies the attribute of HTML elements that we want
to change ( color , background , and so on)
value - specifies the new value you want to assign to the property ( color of
the text to the red , background to gray , and so on)
Basic Syntax Description
Example CSS Syntax
Let us see an example of CSS
p {
color: red;
font-size: 20px;
background-color: yellow;
}
Here,
p - selector that selects all the <p> elements from the document
color: red; - changes the text color of <p> contents to red
font-size: 20px; - changes the font size of <p> contents to 20px
background-color: yellow; - sets the background of the <p> element to yellow
We add CSS to an HTML file using <style> tag. For example,
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p {
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Browser Output:
Example: Styling Multiple Elements
We can apply CSS to multiple HTML elements at once. For example,
h1, p
{
color: red;
font-size: 20px;
background-color: yellow;
}
Here, the CSS rules will be applied to both the <h1> and <p> elements. Now,
let's add the above CSS code to our HTML file.
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
h1,p {
color: red;
font-size: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>
Browser Output
CSS Syntax for Inline CSS
We can apply CSS to a single HTML element using the style attribute
within the HTML tag. This is called inline CSS. For example,
<p style="color: blue">This text will be blue.</p>
Browser Output
Here,
style="color: blue"
changes the text color of the paragraph to blue .
Multiple Properties in Inline CSS
We can also add multiple styling using inline CSS. For example,
<p style="color: blue; font-size: 50px">This text will be blue.</p>
Browser output
Here, we have used multiple properties by separating them with a ( ; )
semicolon.
CSS Font
CSS font properties are used to adjust the appearance of the text in an
HTML document. Using the CSS fonts properties, we can customize the
font family, size, weight, style, and color of text.
body {
font-family: Helvetica;
font-size: 16px;
}
Here,
font-family: Helvetica - sets the font family of text to Helvetica within the
body
font-size: 16px - sets the font size of the text to 16px within the body
Basic Font Properties
In CSS, we have the following seven important font properties that are
used to change different attributes of the text.
font-family : defines the font applied to the text
font-size : sets the size of the font
font-weight : sets the thickness i.e increase the boldness or lightness of the
font
font-style : sets the font to italic or oblique
font-variant : changes the font to small-caps
font-stretch : expands or narrows the text
line-height : sets the distance between lines of the text
We will learn about each of them in detail.
CSS Font Family
CSS font-family property is used to set the font face of the text on the
webpage. For example,
HTML
CSS
h1 {
font-family: Courier, monospace;
}
Browser Output
In the above example, we have set the font family of the h1 element to
the Courier, monospace . The browser tries to render the text
of h1 in Courier font, and if not available, monospace is rendered.
Note: It is recommended to list the family name in quotation marks when it
consists of multiple words. For example, "Times New Roman" .
CSS Font Size
CSS font-size property sets the size or height of the text. The values
of font-size can be expressed by keywords, length units ( px , em , rem , etc),
or percentages. For example,
HTML
CSS
h1 {
/*sets the font size of h1 element to 36px */
font-size: 42px;
}
p {
/* sets the font size to p element to 24px */
font-size: 24px;
}
Browser Output
CSS Font Style
CSS font-style property is used to style a font either with a normal , italic ,
or oblique face. For example,
HTML
CSS
h1.normal {
font-style: normal;
}
h1.italic {
font-style: italic;
}
h1.oblique {
font-style: oblique;
}
Browser Output
The possible values for CSS font-style are as follows:
normal : text is shown normally
italic : text is shown in italics
oblique : text is leaned which is very similar to italic
CSS Font Stretch
CSS font-stretch property is used to widen or narrow the text by allowing
us to select a normal , expanded or condensed face from the font's family. For
example,
HTML
CSS
body {
font-family: Arial;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
Browser Output
Note: This property has no effect if the selected font family does not offer
condensed or expanded faces.
CSS Font Variant
CSS font-variant is used to set the text to small-caps (uppercase letters but
in smaller font size). For example,
HTML
CSS
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
Browser Output
The possible values for CSS font-variant style are as follows:
normal : default value and makes no change to the font
small-caps : displays text in small uppercase letters
initial : sets the text to initial value which is normal by default
inherit : sets the text to value as of its parent element
CSS Font Weight
CSS font-weight determines the lightness or boldness of the text. It can be
specified by using numeric or pre-defined keywords such as bold , lighter ,
etc. For example,
HTML
CSS
p.bold {
font-weight: bold;
}
Browser Output
The weight available depends on the font-family that is currently set. If the
specified font-family does not offer the requested font weight, the browser
will simulate the lightness or boldness that approximates the requested
weight.
CSS Line Height
CSS line-height property is used to set the height of the line box. It allows
setting the height of the line independently from the font size. For example,
HTML
CSS
.normal-value {
/* specifies the normal line height */
line-height: normal;
}
.numeric-value {
line-height: 1.5; /* sets value 1.5 times the current font size : 16px x
1.5 = 24px */
}
Browser Output
The possible values for CSS line-height are as follows:
Line Height
Description
Values
normal default value, specifies the normal line height
specifies the number that is multiplied with the current font size to set the line
number
height
length sets the line height in px , pt , cm , etc
% sets the line height in percent of the current font size
initial sets the value to default value i.e normal
inherit inherits the property value from its parent element
CSS Font ShortHand Property
The CSS font shorthand property is used to set multiple font related
properties in a single declaration. This property helps to shorten the code
by specifying all the font properties in one place.
The font property has the following syntax:
font: font-style font-variant font-weight font-size/line-height font-family;
The font shorthand property needs at least font-size and font-
family values to work.
The order of the values provided in the above shorthand font property must
follow the specified ordering. Default values are used if other values are
omitted.
Let's see an example,
HTML
CSS
h1 {
font: italic small-caps bold 24px/1.2 "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
/* The above code is equivalent to
h1 {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.2;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*/
Browser Output
CSS Font Family
CSS font-family property is used to set the font face of the text on the
webpage. For example,
h1 {
font-family: Courier, monospace;
}
Browser Output
Here, font-family sets the font face of h1 element to Courier , monospace .
CSS Font Family Types
Font families are divided into two types:
Generic family: Refers to the category of the fonts that share similar
design characteristics. For example, Serif , sans-serif , Cursive , etc.
Font family: Refers to the specific font family name
like Helvetica , Arial , Georgia , etc.
CSS Font Family Syntax
The syntax of the font-family property is as follows:
font-family: family-name | generic-family | initial | inherit;
Here,
family-name : refers to the specific font family like Arial , Helvetica , etc
generic-family : refers to the broader category of font families with similar
design characteristics like serif , sans-serif , etc
initial : sets font-family to the default value
inherit : inherits font-family from the parent
Let's see an example,
h1 {
font-family: "Source Sans Pro", "Arial", sans-serif;
}
In the above example, the browser will first try to render Source Sans Pro . If it
is not available, the browser will try to render Arial . And if it is also not
available, the browser will finally use a font from the sans-serif family.
The multiple font family names should be separated by a comma and if the
font family name consists of multiple words then it should be enclosed in
double quotation marks.
CSS Generic Font Family Types
There are five generic families in CSS which refer to the broader category
of font families with similar design characteristics.
Serif
Serif fonts have a small line or stroke at the end of each character. They
are used in traditional printed materials like books, magazines, etc, and in
formal documents like resumes or business letters. For example,
HTML
CSS
h1 {
font-family: "Times New Roman", serif;
}
p.times-new-roman {
/* sets the text to "Times New Roman" */
font-family: "Times New Roman";
}
p.georgia {
/* sets the text to Georgia */
font-family: Georgia;
}
Browser Output
Some popular serif font families are Times New
Roman , Georgia , Garamond , Palatino , etc.
Sans-Serif
Sans-Serif fonts do not have the small line or stroke at the end of
characters. They are seen as clean and modern so often used in digital
interfaces and online content. For example,
HTML
CSS
h1 {
font-family: Helvetica, Arial, sans-serif;
}
p.arial {
/* sets the text to Helvetica font*/
font-family: Helvetica;
}
p.helvetica {
/* sets the text to Arial font */
font-family: Arial;
}
Browser Output
Some popular sans-serif font families are Open
Sans , Poppins , Helvetica , Arial , etc.
Monospace
Monospace fonts have uniform spacing between all the characters. They are
used in programming code and text editors as they are easy to read. For
example,
HTML
CSS
h1 {
font-family: Courier, monospace;
}
p.courier {
/* sets the text to Courier font*/
font-family: Courier;
}
p.consolas {
/* sets the text to Consolas font */
font-family: Consolas;
}
Browser Output
Some popular sans-serif font families are Fira Mono , Courier , Consolas , etc.
Cursive
Cursive fonts have the joining strokes of characters and imitate the
handwriting. They are often used for decorative purposes on web pages.
For example,
HTML
CSS
h1 {
font-family: "Lucida Handwriting", cursive;
}
p.lucida-handwriting {
/* sets the text to Lucida Handwriting font*/
font-family: "Lucida Handwriting";
}
p.segoe-script {
/* sets the text to Segoe Script font */
font-family: "Segoe Script";
}
Browser Output
Some popular cursive font families are Lucida Handwriting , Apple
Chancery , Brush Script , etc.
Fantasy
Fantasy fonts are primarily decorative fonts. They are used for creative and
playful design projects. For example,
HTML
CSS
h1 {
font-family: Papyrus, fantasy;
}
p.papyrus {
/* sets the text to Papyrus */
font-family: Papyrus;
}
p.harrington {
/* sets the text to Harrington */
font-family: Harrington;
}
Browser Output
Some popular fantasy font families
are Papyrus , Harrington , Wisp , Arkana , Rivendell , etc.
CSS Font Size
CSS font-size property adjusts the size of the text on the webpage. For
example,
p {
font-size: 36px;
}
Browser Output
Here, font-size: 36px sets the font size of p element to 36px .
CSS Font Size Syntax
The font-size property has the following syntax,
font-size: predefined keyword|length|initial|inherit;
Here,
predefined keyword: Refers to the keyword that has predetermined font-
size like small , medium , large , etc.
length: Refers to the font-size using a specific length unit like px , em or
points.like 24px , 2em , etc.
The possible values for font-size are as follows,
Values Description
xx-small displays the extremely small text size
x-small displays the extra small text size
small displays small text size
medium displays medium text size
large displays large text size
x-large displays extra large text size
xx-large displays extremely large text size
xx-small displays the extremely small text size
x-small displays the extra small text size
smaller displays relatively smaller text size
larger displays relatively larger text size
initial sets the font size to the default value
inherit inherits the font size from the parent element
Absolute and Relative Values
CSS font-size can be specified as,
1. Absolute value
2. Relative value
1. Font Size Using Absolute Value
Absolute value sets the size to the fixed specified value. They are specified
in specific length values, such as pixels( px ), points( pt ), etc. For example,
HTML
CSS
p.first_paragraph {
/* sets the font size to 24 points */
font-size: 24pt;
}
p.second_paragraph {
/* sets the font size to 16 pixels */
font-size: 16px;
}
p.third_paragraph {
/* sets the font size to 10 millimeters */
font-size: 10mm;
}
Browser Output
Note: Pixels ( px ) is commonly used as an absolute font size unit on the
web. Pixels provide a consistent and precise way to specify font sizes that
are not affected by the user's preferences or the device's resolution.
2. Font Size Using Relative Value
Relative value sets the size relative to its parent elements.
Relative values are specified using the keyword and percentage values.
For example,
HTML
CSS
div {
font-size: 20px;
}
div h1 {
font-size: 1.25em;
}
Browser Output
In the above example, we have two <h1> elements, one
outside <div> element and the other inside of <div> element. The
first <h1> element has the default size whereas the second <h1> element
has a font-size of 1.25em , which is relative to the font-size of its parent
element <div> .
The <div> has a font-size of 20px , so the font-size of <h1> inside <div> will
be 1.25 times 20px , which equals 25px .
Frequently Asked Questions
Font-size Using rem
Font-size using percentage
CSS Font Weight
CSS font-weight is used to adjust the lightness or boldness of the text in a
webpage. For example,
span {
font-weight: bold;
}
Browser Output
Here, font-weight: bold sets the text of the span element to bold .
CSS Font Weight Syntax
The font-weight property has the following syntax,
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
The possible values for font-weight are as follows,
Font Weight Values Description
normal sets the normal font weight and is default, equivalent to 400 numeric value
bold sets text as bold, equivalent to 700 numeric value
bolder sets text one level bolder than its parent
lighter sets text one level lighter than its parent
100 sets the text thin
200 sets the text as extra light
300 sets the text as light
400 sets the text as normal
500 sets the text as medium
600 sets the text as semi bold
700 sets the text as bold
800 sets the text as extra bold
900 sets the text as ultra bold
initial sets the text to the default value
inherit inherits the value from its parent element
Example of font-weight
HTML
CSS
@import url("https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700;900&display=swap");
body {
font-family: "Roboto", sans-serif;
}
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.weight-100 {
font-weight: 100;
}
p.weight-200 {
font-weight: 200;
}
p.weight-300 {
font-weight: 300;
}
p.weight-400 {
font-weight: 400;
}
p.weight-500 {
font-weight: 500;
}
p.weight-600 {
font-weight: 600;
}
p.weight-700 {
font-weight: 700;
}
p.weight-800 {
font-weight: 800;
}
p.weight-900 {
font-weight: 900;
}
Browser Output
The above example demonstrates how different values of font-weight work.
Relative Font Weight
Relative font weights are used to specify the weight of the font relative to
the weight of the parent.
There are two relative font weights in CSS: lighter and bolder .
HTML
CSS
@import url("https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700;900&display=swap");
body {
font-family: "Roboto", sans-serif;
}
p.bold {
/* sets font-weight to bold */
font-weight: bold;
}
p.normal {
/* sets font-weight to normal */
font-weight: normal;
}
p.bold span {
/* sets font-weight to lighter */
font-weight: lighter;
}
p.normal span {
/* sets font-weight to lighter */
font-weight: lighter;
}
Browser Output
In the above example, even though we used font-weight: lighter for
both span elements, the browser output is slightly different for each of them.
This is because in the first paragraph, lighter is relative to bold , whereas in
the second paragraph, lighter is relative to normal .
Note: The font-weight property doesn't work for every font-family .
However, in most cases, the browser will simulate the lightness or boldness
that approximates the given font-weight .
CSS Font Stretch
CSS font-stretch property is used to widen or narrow the text on a
webpage. For example,
body {
font-family: Arial, sans-serif;
}
p.normal {
font-stretch: normal;
}
p.condensed {
font-stretch: condensed;
}
Browser Output
Here, font-stretch: condensed narrows the width of characters.
css-font-stretch-syntax CSS Font Stretch Syntax
The font-stretch property has the following syntax,
font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-
condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
The possible value for CSS font-stretch are shown in the following table:
Font Style Values Description
normal default value for font-style, the font appears in normal width
semi-condensed font appears slightly narrower than normal
condensed font appears narrower than semi-condensed
extra-condensed font appears narrower than condensed
ultra-condensed font appears narrower than extra-condensed
semi-expanded font appears wider than normal
expanded font appears wider than semi-expanded
extra-expanded font appears wider than expanded
ultra-expanded font appears wider than extra-expanded
value between 50% and 200% (inclusive)
percentage
Negative values are not allowed.
Example of font-stretch
HTML
CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
/* sets font-stretch to Ultra-condensed*/
p.ultra-condensed {
font-stretch: ultra-condensed;
}
/* sets font-stretch to Extra-condensed*/
p.extra-condensed {
font-stretch: extra-condensed;
}
/* sets font-stretch to Condensed */
p.condensed {
font-stretch: condensed;
}
/* sets font-stretch to Semi-condensed */
p.semi-condensed {
font-stretch: semi-condensed;
}
/* sets font-stretch to Normal */
p.normal {
font-stretch: normal;
}
/* sets font-stretch to Semi-expanded */
p.semi-expanded {
font-stretch: semi-expanded;
}
/* sets font-stretch to Expanded */
p.expanded {
font-stretch: expanded;
}
/*sets font-stretch to Extra-expanded */
p.extra-expanded {
font-stretch: extra-expanded;
}
/* sets font-stretch to Ultra-expanded */
p.ultra-expanded {
font-stretch: ultra-expanded;
}
Browser Output
In the above example, the output shows the text with different widths based
on the different font-stretch values.
Note: The font-stretch property will have no effect if the current font
doesn't support the condensed and expanded faces.
CSS Text Color
CSS color property is used to set the color of text in a webpage. For
example,
h1 {
color: blue;
}
Browser Output
Here, color: blue sets the color of h1 element to blue .
CSS Color Types
In CSS, the value for color property can be specified by the following color
formats:
Named colors: red , blue , green , etc
Hex colors: #FF0033 , #F03 , etc
RGB and RGBa colors: rgb(0, 0, 255) , rgba(0, 0, 255, 0.5) , etc
HSL and HLSa colors: hsl(180, 100%, 75%) , hlsa(180, 100%, 75%, 0.5) , etc
Note: The color property is also known as foreground color.
CSS Named Colors
CSS named colors refers to the set of predefined colors names that can be
used in our CSS. Named colors are easy to remember and use. For
example,
HTML
CSS
h1 {
/* sets the color of h1 element to blue */
color: blue;
}
Browser Output
There are around 147 colors names recognized by browsers
like cyan , orange , red , pink , crimson and so on.
CSS RGB Colors
The RGB colors are based on the combination of three primary
colors: red , green and blue . For example,
HTML
CSS
h1.rgb_red_value {
/* sets the color of h1 element to red */
color: rgb(255, 0, 0);
}
h1.rgb_red_percentage {
/* sets the color of h1 element to red */
color: rgb(255, 0, 0);
}
h1.rgb_green_value {
/* sets the color of h1 element to green */
color: rgb(0, 255, 0);
}
h1.rgb_blue_value {
/* sets the color of h1 element to blue */
color: rgb(0, 0, 255);
}
h1.rgb_black_value {
/* sets the color of h1 element to black */
color: rgb(0, 0, 0);
}
Browser output
In the above code, rgb(255, 0, 0) the numeric values represent the intensity
of red , green , and blue color respectively.
The RGB colors are specified with a comma-separated list of three numeric
values either ranging from 0 to 255 or percentage values ranging
from 0% to 100%. For example, the rgb(255, 0, 0) is equivalent to rgb(100%,
0, 0) .
Note: The combination of rgb values can generate millions of different
colors.
CSS RGBa Colors
The RGBa colors work the same as RGB colors except we have a new
parameter a which stands for alpha. The value of alpha sets the opacity of
the color. For example,
HTML
CSS
h1 {
/* sets the color of h1 element to red with 50% opacity*/
color: rgba(255, 0, 0, 0.5);
}
Browser Output
In the above code, rgb(255, 0, 0, 0.5) the numeric values represent the
intensity of red , green , blue and opacity respectively.
The RGBa colors are specified with a comma-separated list of four numeric
values. The left three values range from 0 to 255 or percentage values
range from 0% to 100%. And the final value ranges from 0 (fully
transparent) to 1(fully opaque) representing the intensity of opacity.
CSS Hexadecimal Colors
Hexadecimal colors, which are also known as hex values, are represented
by six digits of hexadecimal code. For example,
HTML
CSS
h1.red_hex_value {
/* sets the color of h1 element to red*/
color: #ff0000;
}
h1.red_short_hex_value {
/* sets the color of h1 element to red*/
color: #f00;
}
h1.green_hex_value {
/* sets the color of h1 element to green*/
color: #00ff00; /*equivalent to #0f0 */
}
h1.blue_hex_value {
/* sets the color of h1 element to blue*/
color: #0000ff; /*equivalent to #00f*/
}
h1.black_hex_value {
/* sets the color of h1 element to black*/
color: #000000; /*equivalent to #000*/
}
Browser output
In the above code, #ff0000 the pair of numeric values from the left represent
the intensity of red , green , and blue colors respectively.
The six digits in hex colors can be any number from 0 to 9 or any letter
from A to F , and together they define a specific color.
Note:If two consecutive digits of all hex color codes are the same, we can
use only one digit for it. For example, #ff0000 can be shortened
to #f00 which still represents the red color.
CSS HSL Colors
HSL colors are the combination of three components
of hue, saturation, and lightness. For example,
HTML
CSS
h1 {
color: hsl(0, 100%, 50%);
}
Browser Output
In the above code, hsl(0, 100%, 50%) ,
The first value 0 represents hue and takes a numeric value ranging
from 0 to 360. The
value 0 represents red , 120 represents green and 240 represents blue .
The second value 100% represents saturation which refers to the intensity
of hue . The value ranges from 0% (fully gray ) to 100% (fully saturated).
The third value represents lightness which refers to the brightness of the
color. The value ranges from 0% (fully black ) to 100% (fully white ).
CSS HSLa Colors
The HLSa colors work the same as HSL colors except we have a new
parameter a which stands for alpha. The value of alpha sets the opacity of
the color. For example,
HTML
CSS
h1 {
color: hsla(0, 100%, 50%, 0.4);
}
Browser output
In the above code, hsla(0, 100%, 50%, 0.4) , the left first three values
represent hue , saturation and lightness the same as hsl colors. And the,
final value 0.4 represents the opacity whose value ranges from 0(fully
transparent) to 1(fully opaque).
Significance of Contrast
Sufficient contrast between the text color and background color helps
individuals with visual impairments or color blindness to read with ease. For
example,
HTML
CSS
p.good_contrast {
color: #333;
background-color: #f2f2f2;
}
p.poor_contrast {
color: #98a6a7;
background-color: #c7d3d4;
}
Browser Output
Use Custom Fonts in CSS
CSS @font-face property allows us to specify a custom font for our
webpage. For example,
@font-face {
font-family: "Roboto";
src: url("path/to/roboto-regular.woff2") format("woff2");
}
Here,
@font-face : refers to the CSS property that allows custom fonts
font-family : set the font-family to Roboto
src : specifies the path and format for our custom font
Now we can use custom fonts in our webpage.
CSS @font-face Rule
The CSS @font-face rule allows us to load custom fonts on a webpage. The
custom font can be loaded from a remote server or a locally-installed font
from the user's computer. For example,
@font-face {
font-family: "My Custom Font";
src: url("path/my-custom-font.woff") format("woff"),
url("path/my-custom-font.woff") format("woff");
}
Here,
font-family : refers to the font-family to be loaded
src : specifies the URL and format for custom font
url : specifies the remote or locally hosted font path
format : refers to the format of the font file
Now, we can use My Custom Font on our HTML page like the normal font.
h1{
font-family: "My Custom Font", sans-serif;
}
We use the custom font in the font-family property only when we have
defined the font using the @font-face rule.
In the above example, we have defined multiple url for our @font-
face property. If the first url fails to load then the second url will be
rendered.
@font-face Example
Now, let's see an example of how @font-face works,
HTML
CSS
/* allows to set Helvetica font*/
@font-face {
font-family: "Helvetica";
src: url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-
aVz7u3PJLcA.eot?#iefix")
format("embedded-opentype"),
url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-
aVz7u3PJLcA.woff2")
format("woff2"),
url("https://fonts.gstatic.com/s/helvetica/v1/7Auop_0qiz-
aVz7u3PJLcA.woff")
format("woff");
}
h1, p {
/* sets the text to Helvetica font */
font-family: Helvetica;
}
Browser Output
Alternative Techniques for Custom Font
We can also use the custom font in the following ways:
using CSS @import rule
using HTML <link> tag
Using @import rule
We can use the CSS @import rule to import the other remotely hosted fonts.
For example,
HTML
CSS
@import url("https://fonts.googleapis.com/css2?
family=Roboto+Mono:wght@400;700&display=swap");
h1, p {
font-family: "Roboto Mono", monospace;
}
Browser Output
In the above example, we are using @import to load the Roboto Mono font
from the Google Fonts.
Using <link> tag
We can use the <link> tag to load the font just the way we used
the @import rule. For example,
HTML
CSS
h1, p {
font-family: "Roboto Mono", monospace;
}
Browser Output
In the above example, we use <link> tag to load Roboto Mono font in the web
page and use it with h1 and p elements.
Different Font Format Types
We have different font format types having different features and
capabilities.
WOFF/ WOFF2 (Web Open Font Format)
WOFF is a compressed font format that is commonly used on the
webpage. It provides faster loading and is supported by most modern
browsers.
SVG/SVGZ (Scalable Vector Graphics)
SVG is commonly used for graphics and logos that can be easily resized
without losing quality. It can be used for fonts but it is not recommended as
it lacks advanced typographic features. SVG fonts are not currently
supported by major modern browsers.
EOT (Embedded Open Type)
EOT font format is used as a way to embed fonts on web pages. EOT was
primarily used on the older versions of Internet Explorer and is currently not
supported by modern browsers.
OTF/TTF (OpenType Font/ TrueType Font)
OTF and TTF fonts are the most commonly used fonts on web pages as
they are supported by most modern web browsers.
Note:
The custom fonts can impact the performance of web pages as the fonts
need to be downloaded before they can be rendered, which can increase
the page load time.
The larger font sizes can also impact web performance due to longer
download and render times.
What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally used with HTML to change the
style of web pages and user interfaces. It can also be used with any kind of XML
documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile applications.
What does CSS do
o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes
in CSS code.
Why use CSS
These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and
size had to be repeated on every web page. This was a very long process. For
example: If you are developing a large website where fonts and color information are
added on every single page, it will be become a long and expensive process. CSS was
created to solve this problem. It was a W3C recommendation.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the
entire website by changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of
the website.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag
like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Backward Skip 10sPlay VideoForward Skip 10s
Property: A Property is a type of attribute of HTML element. It could be color, border
etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.
1. Selector{Property1: value1; Property2: value2; ..........;}
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part
of CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>
Test it Now
Output:
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific
element. An id is always unique within the page so it is chosen to select a single,
unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>
Test it Now
Output:
This paragraph will not be affected.
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with
a period character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
Let's take an example with a class "center".
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Test it Now
Output:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then
you should use the element name with class selector.
Let's see an example.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>
Test it Now
Output:
This heading is not affected
This paragraph is blue and center-aligned.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on
the pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>
Test it Now
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style
definitions.
Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
Let's see the CSS code without group selector.
1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;
7. color: blue;
8. }
9. p {
10. text-align: center;
11. color: blue;
12. }
As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:
1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }
Let's see the full example of CSS group selector.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
Output:
Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)
This is a paragraph.
How to add CSS
CSS is added to HTML pages to format the document according to information in
the style sheet. There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
1. <p style="color:blue">Hello CSS</p>
For more visit here: Inline CSS
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page. It is written inside the style tag within head section of html.
For example:
1. <style>
2. p{color:blue}
3. </style>
For more visit here: Internal CSS
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all
the CSS code in a css file. Its extension must be .css for example style.css.
For example:
1. p{color:blue}
You need to link this style.css file to your html pages like this:
1. <link rel="stylesheet" type="text/css" href="style.css">
The link tag must be used inside head section of html.
For more visit here: External CSS
CSS background-image
The background-image property is used to set an image as a background of an
element. By default the image covers the entire element. You can set the background
image for a page like this.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>
Test it Now
Note: The background image should be chosen according to text color. The bad
combination of text and background image may be a cause of poor designed and
not readable webpage.
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font
property you can change the text size, color, style and more. You have already
studied how to make text bold or underlined. Here, you will also know how to resize
your font using percentage.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of
CSS fonts. It is used to change the color of the text.
There are three different formats to define a color:
o By a color name
o By hexadecimal value
o By RGB
In the above example, we have defined all these formats.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { color: red; }
9. h2 { color: #9000A1; }
10. p { color:rgb(0, 220, 98); }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This is heading 1</h1>
16. <h2>This is heading 2</h2>
17. <p>This is a paragraph.</p>
18. </body>
19. </html>
Test it Now
Output:
This is heading 1
This is heading 2
This is a paragraph.
2) CSS Font Family
CSS font family can be divided in two types:
o Generic family: It includes Serif, Sans-serif, and Monospace.
o Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times
new roman, Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters.
Example of Sans-serif: Arial, Verdana etc.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h1 { font-family: sans-serif; }
9. h2 { font-family: serif; }
10. p { font-family: monospace; }
11. }
12. </style>
13. </head>
14. <body>
15. <h1>This heading is shown in sans-serif.</h1>
16. <h2>This heading is shown in serif.</h2>
17. <p>This paragraph is written in monospace.</p>
18. </body>
19. </html>
Test it Now
Output:
This heading is shown in sans-serif.
This heading is shown in serif.
This paragraph is written in monospace.
3) CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Font Size Value Description
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.
1. <html>
2. <head>
3. <title>Practice CSS font-size property</title>
4. </head>
5. <body>
6. <p style="font-size:xx-small;"> This font size is extremely small.</p>
7. <p style="font-size:x-small;"> This font size is extra small</p>
8. <p style="font-size:small;"> This font size is small</p>
9. <p style="font-size:medium;"> This font size is medium. </p>
10. <p style="font-size:large;"> This font size is large. </p>
11. <p style="font-size:x-large;"> This font size is extra large. </p>
12. <p style="font-size:xx-large;"> This font size is extremely large. </p>
13. <p style="font-size:smaller;"> This font size is smaller. </p>
14. <p style="font-size:larger;"> This font size is larger. </p>
15. <p style="font-size:200%;"> This font size is set on 200%. </p>
16. <p style="font-size:20px;"> This font size is 20 pixels. </p>
17. </body>
18. </html>
Test it Now
Output:
This font size is extremely small.
This font size is extra small
This font size is small
This font size is medium.
This font size is large.
This font size is extra
large.
This font size is
extremely large.
This font size is smaller.
This font size is larger.
This font size is set on
200%.
This font size is 20 pixels.
4) CSS Font Style
CSS Font style property defines what type of font you want to display. It may
be italic, oblique, or normal.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. font-size: 100%;
7. }
8. h2 { font-style: italic; }
9. h3 { font-style: oblique; }
10. h4 { font-style: normal; }
11. }
12. </style>
13. </head>
14. <body>
15. <h2>This heading is shown in italic font.</h2>
16. <h3>This heading is shown in oblique font.</h3>
17. <h4>This heading is shown in normal font.</h4>
18. </body>
19. </html>
Test it Now
Output:
This heading is shown in italic font.
This heading is shown in oblique font.
This heading is shown in normal font.
5) CSS Font Variant
CSS font variant property specifies how to set font variant of an element. It may be
normal and small-caps.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p { font-variant: small-caps; }
6. h3 { font-variant: normal; }
7. </style>
8. </head>
9. <body>
10. <h3>This heading is shown in normal font.</h3>
11. <p>This paragraph is shown in small font.</p>
12. </body>
13. </html>
Test it Now
Output:
This heading is shown in normal font.
THIS PARAGRAPH IS SHOWN IN SMALL FONT.
6) CSS Font Weight
CSS font weight property defines the weight of the font and specify that how bold a
font is. The possible values of font weight may be normal, bold, bolder, lighter or
number (100, 200..... upto 900).
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p style="font-weight:bold;">This font is bold.</p>
5. <p style="font-weight:bolder;">This font is bolder.</p>
6. <p style="font-weight:lighter;">This font is lighter.</p>
7. <p style="font-weight:100;">This font is 100 weight.</p>
8. <p style="font-weight:200;">This font is 200 weight.</p>
9. <p style="font-weight:300;">This font is 300 weight.</p>
10. <p style="font-weight:400;">This font is 400 weight.</p>
11. <p style="font-weight:500;">This font is 500 weight.</p>
12. <p style="font-weight:600;">This font is 600 weight.</p>
13. <p style="font-weight:700;">This font is 700 weight.</p>
14. <p style="font-weight:800;">This font is 800 weight.</p>
15. <p style="font-weight:900;">This font is 900 weight.</p>
16. </body>
17. </html>
Test it Now
Output:
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.
CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this
property is used to set the background color or the font color of an element.
In CSS, we use color values for specifying the color. We can also use this property for
the border-color and other decorative effects.
We can define the color of an element by using the following ways:
o RGB format.
o RGBA format.
o Hexadecimal notation.
o HSL.
o HSLA.
o Built-in color.
Let's understand the syntax and description of the above ways in detail.
RGB Format
RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the
color of an HTML element simply by specifying the values of R, G, B that are in the
range of 0 to 255.
The color values in this format are specified by using the rgb() property. This
property allows three values that can either be in percentage or integer (range from
0 to 255).
This property is not supported in all browsers; that's why it is not recommended to
use it.
Syntax
1. color: rgb(R, G, B);
RGBA Format
It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies
the element's transparency. The value of alpha is in the range 0.0 to 1.0, in
which 0.0 is for fully transparent, and 1.0 is for not transparent.
Syntax
1. color:rgba(R, G, B, A);
Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation. This notation starts
with the # symbol followed by six characters ranges from 0 to F. In hexadecimal
notation, the first two digits represent the red (RR) color value, the next two digits
represent the green (GG) color value, and the last two digits represent the blue
(BB) color value.
The black color notation in hexadecimal is #000000, and the white color notation in
hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000,
#00FF00, #0000FF, #FFFF00, and many more.
Syntax
1. color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
Short Hex codes
It is a short form of hexadecimal notation in which every digit is recreated to arrive at
an equivalent hexadecimal value.
For example, #7B6 becomes #77BB66 in hexadecimal.
The black color notation in short hex is #000, and the white color notation in short
hex is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many
more.
HSL
It is a short form of Hue, Saturation, and Lightness. Let's understand them
individually.
Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents
red, 120 represents green, 240 represents blue.
Saturation: It takes value in percentage in which 100% represents fully saturated, i.e.,
no shades of gray, 50% represent 50% gray, but the color is still visible, and 0%
represents fully unsaturated, i.e., completely gray, and the color is invisible.
Lightness: The lightness of the color can be defined as the light that we want to
provide the color in which 0% represents black (there is no light), 50% represents
neither dark nor light, and 100% represents white (full lightness).
Let's see the syntax of HSL in color property.
Syntax
1. color:hsl(H, S, L);
HSLA
It is entirely similar to HSL property, except that it contains A (alpha) that specifies
the element's transparency. The value of alpha is in the range 0.0 to 1.0, in
which 0.0 indicates fully transparent, and 1.0 indicates not transparent.
Syntax
1. color:hsla(H, S, L, A);
Built-in Color
As its name implies, built-in color means the collection of previously defined colors
that are used by using a name such as red, blue, green, etc.
Syntax
1. color: color-name;
Let's see the list of built-in colors along with their decimal and hexadecimal values.
S.no. Color name Hexadecimal Value Decimal
1. Red #FF0000 rgb(255,0
2. Orange #FFA500 rgb(255,1
3. Yellow #FFFF00 rgb(255,2
4. Pink #FFC0CB rgb(255,1
5. Green #008000 rgb(0,128
6. Violet #EE82EE rgb(238,1
7. Blue #0000FF rgb(0,0,25
8. Aqua #00FFFF rgb(0,255
9. Brown #A52A2A rgb(165,4
10. White #FFFFFF rgb(255,2
11. Gray #808080 rgb(128,1
12. Black #000000 rgb(0,0,0)
The illustration of CSS colors, which includes the above properties, is given below.
Example
1. <html>
2. <head>
3. <title>CSS hsl color property</title>
4. <style>
5. h1{
6. text-align:center;
7. }
8. #rgb{
9. color:rgb(255,0,0);
10. }
11. #rgba{
12. color:rgba(255,0,0,0.5);
13. }
14. #hex{
15. color:#EE82EE;
16. }
17. #short{
18. color: #E8E;
19. }
20. #hsl{
21. color:hsl(0,50%,50%);
22. }
23. #hsla{
24. color:hsla(0,50%,50%,0.5);
25. }
26. #built{
27. color:green;
28. }
29. </style>
30. </head>
31. <body>
32. <h1 id="rgb">
33. Hello World. This is RGB format.
34. </h1>
35. <h1 id="rgba">
36. Hello World. This is RGBA format.
37. </h1>
38. <h1 id="hex">
39. Hello World. This is Hexadecimal format.
40. </h1>
41. <h1 id="short">
42. Hello World. This is Short-hexadecimal format.
43. </h1>
44. <h1 id="hsl">
45. Hello World. This is HSL format.
46. </h1>
47. <h1 id="hsla">
48. Hello World. This is HSLA format.
49. </h1>
50. <h1 id="built">
51. Hello World. This is Built-in color format.
52. </h1>
53. </body>
54. </html>
CSS Lists
There are various CSS properties that can be used to control lists. Lists can be
classified as ordered lists and unordered lists. In ordered lists, marking of the list
items is with alphabet and numbers, whereas in unordered lists, the list items are
marked using bullets.
We can style the lists using CSS. CSS list properties allow us to:
o Set the distance between the text and the marker in the list.
o Specify an image for the marker instead of using the number or bullet point.
o Control the marker appearance and shape.
o Place the marker outside or inside the box that contains the list items.
o Set the background colors to list items and lists.
The CSS properties to style the lists are given as follows:
o list-style-type: This property is responsible for controlling the appearance and shape
of the marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet
point.
o list-style-position: It specifies the position of the marker.
o list-style: It is the shorthand property of the above properties.
o marker-offset: It is used to specify the distance between the text and the marker. It
is unsupported in IE6 or Netscape 7.
Let's understand the above properties in detail, along with an example of each.
Backward Skip 10sPlay VideoForward Skip 10s
The list-style-type property
It allows us to change the default list type of marker to any other type such as
square, circle, roman numerals, Latin letters, and many more. By default, the ordered
list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an
unordered list are marked with round bullets (•).
If we set its value to none, it will remove the markers/bullets.
Note: The list also includes the default padding and margin. To remove this, we
need to add padding:0 and margin:0 to <ol> and <ul>.
The illustration of using this property is given as follows:
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .num{
7. list-style-type:decimal;
8. }
9. .alpha{
10. list-style-type:lower-alpha;
11. }
12. .roman{
13. list-style-type:lower-roman;
14. }
15. .circle{
16. list-style-type:circle;
17. }
18. .square{
19. list-style-type:square;
20. }
21. .disc{
22. list-style-type:disc;
23. }
24. </style>
25. </head>
26. <body>
27. <h1>
28. Welcome to the javaTpoint.com
29. </h1>
30. <h2>
31. Ordered Lists
32. </h2>
33. <ol class="num">
34. <li>one</li>
35. <li>two</li>
36. <li>three</li>
37. </ol>
38. <ol class="alpha">
39. <li>one</li>
40. <li>two</li>
41. <li>three</li>
42. </ol>
43. <ol class="roman">
44. <li>one</li>
45. <li>two</li>
46. <li>three</li>
47. </ol>
48. <h2>
49. Unordered lists
50. </h2>
51. <ul class="disc">
52. <li>one</li>
53. <li>two</li>
54. <li>three</li>
55. </ul>
56. <ul class="circle">
57. <li>one</li>
58. <li>two</li>
59. <li>three</li>
60. </ul>
61. <ul class="square">
62. <li>one</li>
63. <li>two</li>
64. <li>three</li>
65. </ul>
66.
67. </body>
68. </html>
Test it Now
The list-style-position property
It represents whether the appearing of the marker is inside or outside of the box
containing the bullet points. It includes two values.
inside: It means that the bullet points will be in the list item. In this, if the text goes
on the second line, then the text will be wrap under the marker.
outside: It represents that the bullet points will be outside the list item. It is the
default value.
The following example explains it more clearly.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .num{
7. list-style-type:decimal;
8. list-style-position:inside;
9. }
10. .roman{
11. list-style-type:lower-roman;
12. list-style-position:outside;
13. }
14. .circle{
15. list-style-type:circle;
16. list-style-position:inside;
17. }
18. .square{
19. list-style-type:square;
20. }
21. .disc{
22. list-style-type:disc;
23. list-style-position:inside;
24. }
25. </style>
26. </head>
27. <body>
28. <h1>
29. Welcome to the javaTpoint.com
30. </h1>
31. <h2>
32. Ordered Lists
33. </h2>
34. <ol class="num">
35. <li>INSIDE</li>
36. <li>two</li>
37. <li>three</li>
38. </ol>
39. <ol class="roman">
40. <li>OUTSIDE</li>
41. <li>two</li>
42. <li>three</li>
43. </ol>
44. <h2>
45. Unordered lists
46. </h2>
47. <ul class="disc">
48. <li>INSIDE</li>
49. <li>two</li>
50. <li>three</li>
51. </ul>
52. <ul class="circle">
53. <li>INSIDE</li>
54. <li>two</li>
55. <li>three</li>
56. </ul>
57. <ul class="square">
58. <li>DEFAULT</li>
59. <li>two</li>
60. <li>three</li>
61. </ul>
62.
63. </body>
64. </html>
Test it Now
The list-style-image property
It specifies an image as the marker. Using this property, we can set the image bullets.
Its syntax is similar to the background-image property. If it does not find the
corresponding image, the default bullets will be used.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .order{
7. list-style-image: url(img.png);
8. }
9. .unorder{
10. list-style-image: url(img.png);
11. }
12.
13. </style>
14. </head>
15. <body>
16. <h1>
17. Welcome to the javaTpoint.com
18. </h1>
19. <h2>
20. Ordered Lists
21. </h2>
22. <ol class="order">
23. <li>one</li>
24. <li>two</li>
25. <li>three</li>
26. </ol>
27. <h2>
28. Unordered lists
29. </h2>
30. <ul class="unorder">
31. <li>one</li>
32. <li>two</li>
33. <li>three</li>
34. </ul>
35.
36. </body>
37. </html>
Test it Now
The list-style property
It is the shorthand property that is used to set all list properties in one expression.
The order of the values of this property is type, position, and image. But if any
property value is missing, then the default value will be inserted.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .order{
7. list-style: lower-alpha inside url(img.png);
8. }
9. .unorder{
10. list-style: disc outside;
11. }
12.
13. </style>
14. </head>
15. <body>
16. <h1>
17. Welcome to the javaTpoint.com
18. </h1>
19. <h2>
20. Ordered Lists
21. </h2>
22. <ol class="order">
23. <li>one</li>
24. <li>two</li>
25. <li>three</li>
26. </ol>
27. <h2>
28. Unordered lists
29. </h2>
30. <ul class="unorder">
31. <li>one</li>
32. <li>two</li>
33. <li>three</li>
34. </ul>
35.
36. </body>
37. </html>
Test it Now
Styling Lists with colors
To make the lists more attractive and interesting, we can style lists with colors. The
addition of anything to the <ul> or <ol> tag will affect the entire list, whereas the
addition to the individual <li> tag will affect the items of the corresponding list.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .order{
7. list-style: upper-alpha;
8. background: pink;
9. padding:20px;
10. }
11. .order li{
12. background: lightblue;
13. padding:10px;
14. font-size:20px;
15. margin:10px;
16. }
17. .unorder{
18. list-style: square inside;
19. background: cyan;
20. padding:20px;
21. }
22. .unorder li{
23. background: green;
24. color:white;
25. padding:10px;
26. font-size:20px;
27. margin:10px;
28. }
29.
30. </style>
31. </head>
32. <body>
33. <h1>
34. Welcome to the javaTpoint.com
35. </h1>
36. <h2>
37. Ordered Lists
38. </h2>
39. <ol class="order">
40. <li>ONE</li>
41. <li>TWO</li>
42. <li>THREE</li>
43. </ol>
44. <h2>
45. Unordered lists
46. </h2>
47. <ul class="unorder">
48. <li>ONE</li>
49. <li>TWO</li>
50. <li>THREE</li>
51. </ul>
52.
53. </body>
54. </html>
CSS Box Model
The components that can be depicted on the web page consist of one or more than
one rectangular box.
A CSS box model is a compartment that includes numerous assets, such as edge,
border, padding and material. It is used to develop the design and structure of a web
page. It can be used as a set of tools to personalize the layout of different
components. According to the CSS box model, the web browser supplies each
element as a square prism.
The following diagram illustrates how the CSS properties
of width, height, padding, border and margin dictate that how much space an
attribute will occupy on a web page.
The CSS box model contains the different properties in CSS. These are listed below.
o Border
o Margin
o Padding
o Content
Now, we are going to determine the properties one by one in detail.
Border Field
It is a region between the padding-box and the margin. Its proportions are
determined by the width and height of the boundary.
Margin Field
This segment consists of the area between the boundary and the edge of the border.
The proportion of the margin region is equal to the margin-box width and height. It
is better to separate the product from its neighbor nodes.
Padding Field
This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.
Content Field
Material such as text, photographs, or other digital media is included in this area.
It is constrained by the information edge, and its proportions are dictated by the
width and height of the content enclosure.
Elements of the width and height
Typically, when you assign the width and height of an attribute using the CSS width
and height assets, it means you just positioned the height and width of the subject
areas of that component. The additional height and width of the unit box is based on
a range of influences.
The specific area that an element box may occupy on a web page is measured as
follows-
Size of the box Properties of CSS
Height height + padding-top + padding-bottom + border-top + border-bottom + marg
Width width + padding-left + padding-right + border-left + border-right + margin-left
Example 1
Here, to explain the CSS box model, we have an instance.
1. <!DOCTYPE html>
2. <head>
3. <title>CSS Box Model</title>
4. <style>
5. .main
6. {
7. font-size:30px;
8. font-weight:bold;
9. Text-align:center;
10. }
11. .gfg
12. {
13. margin-left:50px;
14. border:50px solid Purple;
15. width:300px;
16. height:200px;
17. text-align:center;
18. padding:50px;
19. }
20. .gfg1
21. {
22. font-size:40px;
23. font-weight:bold;
24. color:black;
25. margin-top:60px;
26. background-color:purple;
27. }
28. .gfg2
29. {
30. font-size:20px;
31. font-weight:bold;
32. background-color:white;
33. }
34. </style>
35. </head>
36. <body>
37. <div class = "main">CSS Box-Model Property</div>
38. <div class = "gfg">
39. <div class = "gfg1">JavaTpoint</div>
40. <div class = "gfg2">A best portal for learn Technologies</div>
41. </div>
42. </body>
43. </html>
Test it Now
Output
After the compilation of the above code, you get the following output.
Example 2
Here, we also have an illustration to describe the CSS box model.
1. <!DOCTYPE html>
2. <head>
3. <style>
4. .main
5. {
6. font-size:30px;
7. font-weight:bold;
8. text-align:left;
9. }
10. #box
11. {
12. padding-top:30px;
13. width: 300px;
14. height: 100px;
15. border: 40px solid red;
16. margin: 30px;
17. text-align:center;
18. font-size:32px;
19. font-weight:bold;
20. }
21. </style>
22. </head>
23. <body>
24. <div class="main">CSS Box-Model Property</div>
25. <div id="box">JavaTpoint</div>
26. </body>
27. </html>
Test it Now
Output
After the execution of the code, you get the following output:
Important Point: In the CSS box model, the subject area of an entity box is the
region where the content, such as image, text, video, etc., initially appeared. It may
also retain boxes of decedent elements.
You might also like
- Cascading Style Sheets (CSS) : The Basics ofNo ratings yetCascading Style Sheets (CSS) : The Basics of64 pages
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyNo ratings yetCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy88 pages
- Core Web Development: CW412 Programming in CSSNo ratings yetCore Web Development: CW412 Programming in CSS92 pages
- E-Note_28179_Content_Document_20241127094830AMNo ratings yetE-Note_28179_Content_Document_20241127094830AM95 pages
- BSc VC (Web Designing) 1st Year 2nd Unit (CSS)No ratings yetBSc VC (Web Designing) 1st Year 2nd Unit (CSS)20 pages
- Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech AcademyCascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy