MMC105 WEB TECHNOLOGIES
CSS Introduction
CSS is the language we use to style a Web page.
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display
for different devices and screen sizes.
CSS Example:
Types of CSS (Cascading Style Sheet)
1 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Cascading Style Sheets (CSS) is used to style HTML elements on web pages. It defines how elements are
displayed, including layout, colors, fonts, and other properties. CSS targets HTML elements and applies
style rules to dictate their appearance.
In this article, we’ll explore three primary types of CSS: Inline, Internal, and External. Understanding
these methods will help you apply styles effectively and efficiently.
There are three types of CSS which are given below:
Table of Content
1. Inline CSS
2. Internal or Embedded CSS
3. External CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This
method allows for specific styling of elements within the HTML document, overriding any external or
internal styles.
Example: This example shows the use of inline CSS with the help of an HTML document.
html
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900;
font-size:50px;
font-style:italic;
2 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
Output:
Explanation:
In the above-example we are following these steps
Here we are using Inline CSS directly to the paragraph element.
Changes color to green, font size to 50px, style to italic, and alignment to center.
Styling overrides external and internal CSS.
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies styles to
specified HTML elements, The CSS rule set should be within the HTML file in the head section i.e. the
CSS is embedded within the <style> tag inside the head section of the HTML file.
Example: This example shows the use of internal CSS with the help of an HTML document.
html
<!DOCTYPE html>
<html>
3 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
.geeks {
font-style: bold;
font-size: 20px;
</style>
</head>
<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>
<div class="geeks">
A computer science portal for geeks
4 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</div>
</div>
</body>
</html>
Output:
Internal or Embedded CSS Example Explanation:
In the above-example we are following these steps
We use internal CSS styles defined within the <style> element in the <head> section.
CSS rules are applied to elements with specific classes like “main,” “GFG,” and “geeks.”
The “GFG” class styles text in green, large font size, and bold.
The “geeks” class styles text with bold font style and a smaller font size.
3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes
(For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension
and should be linked to the HTML document using a link tag. It means that, for each element, style can
be set only once and will be applied across web pages.
Example: This example shows the use of external CSS with the help of an HTML document.
Html
<!DOCTYPE html>
<html>
<head>
5 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
CSS:
body {
background-color: powderblue;
.main {
text-align: center;
.GFG {
color: #009900;
6 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
font-size: 50px;
font-weight: bold;
#geeks {
font-style: bold;
font-size: 20px;
Output:
Explanation:
In the above example we are following these steps
We use External CSS file “style.css” in which we defines body background color as powderblue.
By using .main class aligns text to the center.
.GFG class sets text color to green, font size to 50px, and font weight to bold.
#geeks id applies bold font style and 20px font size.
CSS Selectors
CSS selectors target the HTML elements on your pages, allowing you to add styles based on their ID,
class, type, attribute, and more. This guide will help you to understand the intricacies of CSS selectors
and their important role in enhancing the user experience of your web pages. Understanding these
selectors—such as the universal selector, attribute selector, pseudo-class selector, and combinator
selectors—enables more efficient and dynamic web design.
7 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Types of CSS Selectors
Table of Content
Simple Selectors
Element Selector
Id Selector
Class Selector
Universal Selector
Group Selector
Attribute Selector
Pseudo-Class Selector
Pseudo-Element Selector
Element Selector
The element selector selects HTML elements based on the element name (or tag) for
example p, h1, div, span, etc.
NOTE : The following code is used in the above Example. You can see the CSS
rules applied to all <p> tags and <h1> tags.
CSS:
h1 {
color: red;
font-size: 3rem;
}
p{
color: white;
background-color: gray;
}
Id Selector
The id selector uses the id attribute of an HTML element to select a specific element. An id of the
element is unique on a page to use the id selector.
Note: The following code is used in the above Example using the id selector.
CSS:
#div-container{
color: blue;
background-color: gray;
}
8 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Class Selector
The class selector selects HTML elements with a specific class attribute.
Note: The following code is used in the above Example using the class selector. To use a class selector
you must use ( . ) followed by class name in CSS. This rule will be applied to the HTML element with the
class attribute “paragraph-class“
CSS:
.paragraph-class {
color:white;
font-family: monospace;
background-color: purple;
}
Universal Selector
The Universal selector (*) in CSS is used to select all the elements in an HTML document. It also
includes other elements which are inside under another element.
Note: The following code is used in the above Example using the universal selector. This CSS rule will
be applied to each and every HTML element on the page:
CSS:
*{
color: white;
background-color: black;
}
Group Selector
The Group selector is used to style all comma-separated elements with the same style.
Note: Suppose you want to apply common styles to different selectors, instead of writing rules separately
you can write them in groups as shown below.
CSS:
#div-container, .paragraph-class, h1{
color: white;
background-color: purple;
font-family: monospace;
}
Attribute Selector
9 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
The attribute selector [attribute] is used to select the elements with a specified attribute or attribute
value.
Note: The following code is used in the above Example using the attribute selector. This CSS rule will be
applied to each and every HTML element on the page:
CSS:
[href] {
background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}
Pseudo-Class Selector
It is used to style a special type of state of any element. For example- It is used to style an element when a
mouse cursor hovers over it.
Note: We use a single colon(:) in the case of a Pseudo-Class Selector.
Syntax:
Selector:Pseudo-Class {
Property: Value;
}
Pseudo-Element Selector
It is used to style any specific part of the element. For Example- It is used to style the first letter or the
first line of any element.
Note: We use a double colon(::) in the case of a Pseudo-Element Selector.
Syntax:
Selector:Pseudo-Element{
Property:Value;
}
CSS:
p::first-line{
background-color: goldenrod;
}
CSS Font
10 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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; }
11 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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>
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.
12 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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>
Output:
This heading is shown in sans-serif.
This heading is shown in serif.
This paragraph is written in monospace.
13 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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 Description
Value
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>
14 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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>
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.
15 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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. }
16 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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>
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.
ADVERTISEMENT
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p { font-variant: small-caps; }
6. h3 { font-variant: normal; }
17 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
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>
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>
18 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
15. <p style="font-weight:900;">This font is 900 weight.</p>
16. </body>
17. </html>
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.
19 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
This font is 900 weight.
Color Name
These are a set of predefined colors which are used by its name. For example: red, blue, green, etc.
Syntax:
h1 {
color: color-name;
Example: In this example, we will use the color property with the specified color name to set the text
color.
20 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Color_name Color</title>
<style>
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
RGB Color Format
21 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
The RGB (Red, Green, Blue) format is used to define the color of an HTML element by specifying the R,
G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is
(0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
Example: In this example, we will use the color property with the specified color in RGB format to set
the text color.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS RGB Color</title>
<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
22 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</html>
Output:
RGBA Color Format
The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which specifies
the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully
transparent and 1.0 represents not transparent.
Syntax:
h1 {
color: rgba(R, G, B, A);
Example: In this example, we will use the color property with the specified color in RGBA format to set
the text color.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA Color</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
</style>
23 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
Hexadecimal Color Format
The hexadecimal color forat begins with # symbol followed by 6 characters each ranging from 0 to F. For
example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
Syntax:
h1 {
color: #(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
Example: In this example, we will use the color property with the specified color in Hex color format to
set the text color.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS hex Color</title>
24 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<style>
h1 {
color: #009900;
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
HSL Color Fomat
HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate
system.
Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red,
120 represents green and 240 represents blue color.
Saturation: It takes a percentage value, where 100% represents completely saturated, while 0%
represents completely unsaturated (gray).
Lightness: It takes percentage value, where 100% represents white, while 0% represents black.
Syntax:
h1 {
color: hsl(H, S, L);
25 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Example: In this example, we will use the color property with the specified color in HSL color format to
set the text color.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS hsl Color</title>
<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
26 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
HSLA Color Format
The HSLA color is similar to HSL color, but the difference is HSLA contains A (Alpha) which specifies
the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully
transparent and 1.0 represents not transparent.
Syntax:
h1 {
color: hsla(H, S, L, A);
Example: In this example, we will use the color property with the specified color in HSLA color format
to set the text color.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS HSLA Color</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
27 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</html>
CSS Text Formatting
CSS Text Formatting refers to applying styles to text elements to control appearance and layout. This
includes properties for color, alignment, decoration, indentation, justification, shadows, spacing, and
direction. These properties enhance readability and aesthetics, improving the presentation of textual
content on web pages.
Syntax:
The Syntax to write this property:
Selector {
property-name : /*value*/
}
CSS Text Formatting Properties
These are the following text formatting properties.
Property Description
text-color Sets the color of the text using color name, hex value, or RGB value.
text-align Specifies horizontal alignment of text in a block or table-cell element.
text-align-last Sets alignment of last lines occurring in an element.
text-decoration Decorates text content.
text-decoration-color Sets color of text decorations like overlines, underlines, and line-throughs.
text-decoration-line Sets various text decorations like underline, overline, line-through.
text-decoration-style Combines text-decoration-line and text-decoration-color properties.
28 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Property Description
text-indent Indents first line of paragraph.
text-justify Justifies text by spreading words into complete lines.
text-overflow Specifies hidden overflow text.
text-transform Controls capitalization of text.
text-shadow Adds shadow to text.
letter-spacing Specifies space between characters of text.
line-height Sets space between lines.
direction Sets text direction.
word-spacing Specifies space between words of line.
Basic Text Formatting Example
In this example we demonstrates basic text formatting using CSS. It includes paragraphs with different
styles: changing color, aligning center, adding underline, setting indentation, and adjusting letter spacing
for improved readability and aesthetics.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
29 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Basic Text Formatting</title>
<style>
.text-color {
color: blue;
.text-align-center {
text-align: center;
.text-decoration {
text-decoration: underline;
.text-indent {
text-indent: 20px;
.letter-spacing {
letter-spacing: 2px;
</style>
30 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</head>
<body>
<p class="text-color">Changing Text Color</p>
<p class="text-align-center">Aligning Text</p>
<p class="text-decoration">Adding Text Decoration</p>
<p class="text-indent">Setting Text Indentation</p>
<p class="letter-spacing">Adjusting Letter Spacing</p>
</body>
</html>
Output:
CSS Text Formatting Example Output
Advanced Text Formatting Example
In this example we are showing advanced text formatting using CSS. It applies styles such as adjusting
line height, adding text shadow, transforming text to uppercase, setting word spacing, and specifying text
direction for diverse visual effects.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
31 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Advanced Text Formatting</title>
<style>
.line-height {
line-height: 1.5;
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
.text-transform {
text-transform: uppercase;
.word-spacing {
word-spacing: 5px;
.text-direction {
direction: rtl;
</style>
32 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
</head>
<body>
<p class="line-height">Changing Line Height</p>
<p class="text-shadow">Applying Text Shadow</p>
<p class="text-transform">Controlling Text Transformation</p>
<p class="word-spacing">Setting Word Spacing</p>
<p class="text-direction">Specifying Text Direction</p>
</body>
</html>
Output:
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
content, padding, borders and margins. The image below illustrates the box model:
33 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
34 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
HTML <span> Tag
Example
A <span> element which is used to color a part of a text:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an
inline
HTML div tag
The div tag is known as the Division tag. The HTML <div> tag is a block-level element used for
grouping and structuring content. It provides a container to organize and style sections of a webpage,
facilitating layout design and CSS styling.
Note: Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag.
Example: In this example we uses <div> tags styled with CSS to create colored, block-level
containers. Each div displays text “div tag” with white text on a green background, differentiated by
margins and font size.
html
<!DOCTYPE html>
<html>
<head>
<title>Div tag</title>
35 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<style>
div {
color: white;
margin: 2px;
font-size: 25px;
.div1 {
background-color: rgb(142, 142, 245);
.div2 {
background-color: #9af19a;
.div3 {
background-color: rgb(232, 232, 137)
.div0 {
background-color: #009900;
</style>
</head>
36 PROF.SACHIN.G.A,CIT,MANDYA
MMC105 WEB TECHNOLOGIES
<body>
<div class="div1"> div tag </div>
<div class="div2"> div tag </div>
<div class="div3"> div tag </div>
<div class="div0"> div tag </div>
</body>
</html>
37 PROF.SACHIN.G.A,CIT,MANDYA
