Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

Advanced Web Technology Lecture Notes Unit 2

Uploaded by

bhardwaj202136
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Advanced Web Technology Lecture Notes Unit 2

Uploaded by

bhardwaj202136
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Lecture Notes

Advanced Web technology


BCA V- E1UA510C
Unit-2
Introduction to CSS:
CSS (Cascading Style Sheets) is a language designed to simplify the process of making
web pages presentable. It allows you to apply styles to HTML documents, describing how a
webpage should look by prescribing colors, fonts, spacing, and positioning. CSS provides
developers and designers with powerful control over the presentation of HTML elements.
HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML element using
selectors. CSS is easy to learn and understand, but it provides powerful control over the
presentation of an HTML document.
CSS (Cascading Style Sheets) is a language for styling HTML or
XML documents, controlling layout, colors, fonts, and overall
appearance to enhance user experience.
Why CSS?
 Saves Time: Write CSS once and reuse it across multiple HTML pages.
 Easy Maintenance: Change the style globally with a single modification.
 Search Engine Friendly: Clean coding technique that improves readability for
search engines.
 Superior Styles: Offers a wider array of attributes compared to HTML.
 Offline Browsing: CSS can store web applications locally using offline cache,
allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and a declaration block.
 Selector: Targets specific HTML elements to apply styles.
 Declaration: Combination of a property and its corresponding value.
 The selector points to the HTML element that you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
Using CSS: In this example, we will add some CSS styles inside the HTML document to
show how CSS makes a HTML page attractive and user-friendly.

<html>

<head>
<title>Simple web page </title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige;
}

h1 {
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}

p {
font-family: sans-serif;
color: orange;
}
</style>
</head>

<body>
<main>
<h1>My first Page </h1>
<p>This is a basic web page. </p>
</main>
</body>

</html>

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. <html>
2. <head>
3. <style>
4. p{
5. text-align: center;
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <p>This style will be applied on every paragraph.</p>
12. <p id="para1">Me too!</p>
13. <p>And me!</p>
14. </body>
15. </html>

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. <html>
2. <head>
3. <style>
4. #para1 {
5. text-align: center;
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <p id="para1">Hello Javatpoint.com</p>
12. <p>This paragraph will not be affected.</p>
13. </body>
14. </html>

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.

1. <html>
2. <head>
3. <style>
4. .center {
5. text-align: center;
6. color: blue;
7. }
8. </style>
9. </head>
10. <body>
11. <h1 class="center">This heading is blue and center-
aligned.</h1>
12. <p class="center">This paragraph is blue and center-
aligned.</p>
13. </body>
14. </html>
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the
elements on the pages.

1. <html>
2. <head>
3. <style>
4. * {
5. color: green;
6. font-size: 20px;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>This is heading</h2>
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>

CSS Combinators
CSS Combinators clarifies the relationship between two selectors, whereas
the selectors in CSS are used to select the content for styling. There can
be more than one simple selector in a CSS selector, and between these
selectors, we can include a combinator. Combinators combine the
selectors to provide them a useful relationship and the position of content
in the document.

There are four types of combinators in CSS that are listed as follows:

o General sibling selector (~)


o Adjacent sibling selector (+)
o Child selector (>)
o Descendant selector (space)

General Sibling Selector (~)


o It uses the tlide (~) sign as the separator between the elements. It
selects the elements that follow the elements of first selector, and
both of them are the children of the same parent. It can be used for
selecting the group of elements that share the common parent
element.

It is useful when we have to select the siblings of an element even if they


are not adjacent directly.

Syntax

1. element ~ element {
2. /*style properties*/
3. }

Suppose we have to select all <p> elements that are the siblings
of <div> element, then we can write it as:

1. div ~ p {
2. /*style properties*/
3. }

The figure given below helps us to understand the General sibling selector
(~).
In this figure, the blocks with the green color are the selected blocks
affected after using the general sibling selector.

Example

In this example we are selecting the <p> elements that come after
the <h1>. There is a <div> element which will not get selected and the
paragraph element inside the div will also not get selected. But
those <p>elements that come after the <div> will be affected.

This example will illustrate the use of a General sibling selector (~).

1. <html>
2. <head>
3. <title>General Sibling Selector</title>
4. <style>
5. body{
6. text-align: center;
7. }
8. h1 ~ p{
9. color: blue;
10. font-size: 25px;
11. font-weight: bold;
12. text-align: center;
13. }
14. div {
15. font-size: 32px;
16. }
17. </style>
18. </head>
19.
20. <body>
21. <h1>General sibling selector (~) property</h1>
22. <p>It is the first paragraph element which will get effected.</
p>
23. <div> It is the div element
24. <p> It is the paragraph under the div element </p>
25. </div>
26. <p>It is the paragraph element after the div</p>
27. <p>It is the paragraph element which will also get affected</
p>
28. </body>
29. </html>

Adjacent Sibling Selector (+)


It uses the plus (+) sign as the separator between the elements. It
matches the second element only when the element immediately follows
the first element, and both of them are the children of the same parent.
This sibling selector selects the adjacent element, or we can say that the
element which is next to the specified tag.

It only selects the element which is just next to the specified first element.

Syntax

1. element + element {
2. /*style properties*/
3. }

If we have to select the paragraph that comes immediately after another


paragraph, then by using the adjacent selector, it will be written as
follows:

1. p + p {
2. /*style properties*/
3. }

The figure given below helps us to understand the Adjacent sibling


selector (+).
In this figure, the blocks with the green color are the selected blocks
affected after using the adjacent sibling selector. There is the selection of
those paragraph elements that immediately comes after another
paragraph element.

Example

In this example we are selecting the <p> element that comes


immediately after the <p> element. There is an <div> element that will
not be selected, and the paragraph element after the div will also not be
selected. But the <p> element that comes just next to the third
paragraph will be affected.

1. <html>
2. <head>
3. <title> Adjacent Sibling Selector </title>
4. <style>
5. body{
6. text-align: center;
7. }
8. p + p{
9. color: Blue;
10. font-size:25px;
11. font-weight: bold;
12. text-align: center;
13. }
14. p{
15. font-size: 32px;
16. }
17. </style>
18. </head>
19.
20. <body>
21. <h1> Adjacent sibling selector (+) property</h1>
22. <p> It is the first paragraph </p>
23. <p> It is the second paragraph which is immediately next to t
he first paragraph, and it get selected. </p>
24. <div> This is the div element </div>
25. <p> This is the third paragraph which does not get affected <
/p>
26. <p> This paragraph is also selected because it immediately n
ext to third paragraph </p>
27. </body>
28. </html>

Child Selector (>)


It uses the greater than (>) sign as the separator between the elements.
It selects the direct descendant of the parent. This combinator only
matches the elements that are the immediate child in the document tree.
It is stricter as compared to the descendant selector because it selects the
second selector only when the first selector is its parent.

The parent element must always be placed at the left of the ">". If we
remove the greater than (>) symbol that designates this as a child
combinator, then it will become the descendant selector.

Syntax

1. element > element {


2. /*style properties*/
3. }

If we have to select the paragraph elements that are the children


of <div> element then by using the child selector, it will be written as
follows:
1. div > p {
2. /*style properties*/
3. }

The figure given below helps us to understand the child selector (>).

In this figure, the blocks with the green color are the selected blocks
affected after using the child selector. As we can see in the figure, there is
only the selection of those paragraph elements that are the direct child of
the div element.

Example

In this example we are selecting the <p> elements that are the child of
a <div> element. It only selects those paragraph elements that are the
direct child of the div element.

This example will illustrate the use of the child sibling selector (>).

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Child Selector </title>
5. <style>
6. body{
7. text-align: center;
8. }
9.
10. div > p{
11. color: Blue;
12. font-size:25px;
13. font-weight:bold;
14. text-align:center;
15. }
16. p{
17. font-size: 20px;
18. }
19.
20. </style>
21. </head>
22.
23. <body>
24. <h1> Child selector (>) property</h1>
25. <p> It is the first paragraph </p>
26. <p> It is the second paragraph </p>
27. <div>
28. <h1>This is the div element</h1>
29. <p> This is the third paragraph which is the child of div eleme
nt </p>
30. <p> This is the fourth paragraph and also get selected becau
se it is also the child of div element </p>
31. </div>
32. </body>
33. </html>

Descendant Selector (space)


It uses the space as the separator between the elements. The CSS
descendant selector is used to match the descendant elements of a
particular element and represent it using a single space. The word
descendant indicates nested anywhere in the DOM tree. It can be a direct
child or deeper than five levels, but it will still be referred to as a
descendant.

It combines two selectors in which the first selector represents an


ancestor (parent, parent's parent, etc.), and the second selector
represents descendants. The elements matched by the second selector
are selected if they have an ancestor element that matches the first
selector.

Syntax

1. element element {
2.
3. /*style properties*/
4. }

If we have to select the paragraph elements that are the children of


an <div> element, then by using the descendant selector, it will be
written as follows:

1. div p {
2. /*style properties*/
3. }

The figure given below helps us to understand the descendant selector.


Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Descendant Selector </title>
5. <style>
6. body{
7. text-align: center;
8. }
9. div p{
10. color: blue;
11. font-size:28px;
12. font-weight: bold;
13. text-align: center;
14. }
15. p,div {
16. font-size: 25px;
17. }
18.
19. </style>
20. </head>
21.
22. <body>
23. <div>
24. <p> This is 1st paragraph in the div. </p>
25. <p> This is 2nd paragraph in the div. </p>
26. <span>
27. This is the span element in the div
28. <p> This is the paragraph in the span. It will also be affected.
</p>
29. </span>
30. </div>
31.
32. <p> Paragraph 4. It will not be affected because it is not in th
e div. </p>
33.
34. </body>
35. </html>

CSS Pseudo Classes


What is Pseudo Classes?
A pseudo-class can be defined as a keyword which is combined to a
selector that defines the special state of the selected elements. It is added
to the selector for adding an effect to the existing elements based on their
states. For example, The ":hover" is used for adding special effects to an
element when the user moves the cursor over the element.

Pseudo-classes are unique keywords in CSS that target states or elements


depending on their location or user interaction. They enable you to style
inaccessible elements using just standard class ID selectors.

Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
1. selector: pseudo-class {
2. property: value;
3. }

A colon follows the keyword to indicate pseudo-classes. Listed below are


some popular pseudo-classes:

o :active: Applies styles when an element is activated by the user,


such as clicking a button.
o :hover: Applies styles when the mouse pointer is over an element.
o :focus: When an element receives focus, such as when an input
field is selected, the styling property :focus is applied.
o :first-child: Selects the first child element of its parent; last-child -
Selects the last child element of its parent; visited - Applies styles to
links the user has visited.
o :nth last child(n): Selects elements that fall into a particular
numerical pattern, such as every second or third child, using
the :nth-child(n) function.
o :nth-of-type(n): Chooses elements of a particular type that adhere
to a predetermined pattern of numbers.
o :nth-last-of-type(n): It selects elements of a particular type that
match a numerical pattern, counting from the end. :nth-last-child(n)
selects elements that match a specific numerical pattern, starting at
the end.

Many more Pseudo classes are available in CSS, just a few examples.
Pseudo-classes are effective tools that let you target and style particular
elements depending on their status or position, improving your web
pages' visual appeal and interactivity.

Let's discuss the above pseudo-classes, along with an example.

:hover pseudo-class
This pseudo-class adds a special style to an element when the user moves
the cursor over it. If you want to make it effective, it must be applied after
the ":link" and ":visited" pseudo-classes.
Example

1. <html>
2. <head>
3. <style>
4. body{
5. text-align:center;
6. }
7. h1:hover{
8. color:red;
9. }
10. h2:hover{
11. color:blue;
12. }
13. </style>
14. </head>
15.
16. <body>
17. <h1>Hello world </h1>
18. <h2>This is an example of :hover pseudo class</h2>
19. </body>
20. </html>

:active pseudo-class
It applies when the elements are clicked or activated. It selects the
activated element.

We can understand it with the example given below.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
a:active{
color: yellow;
}
h1, h2, h3{
color:red; ;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>The :active pseudo-class</h2>
<h3>Click the following link to see the effect</h3>
<a href="#">Click the link</a>
</body>
</html>

:visited pseudo-class
It selects the visited links and adds special styles to them. Its possible
values can be any color name in a valid format.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>The :visited pseudo-class</h2>
<h3>Click the following link to see the effect</h3>
<a href="#">Click the link</a>
</body>
</html>

:lang pseudo-class
It is helpful in documents that require multiple languages. It allows us to
define special rules for different languages.

Example
In this example, we specify p:lang(fr) which selects the elements having
attribute lang="fr".

<!DOCTYPE HTML>
<html>
<head>
<style>
body{
text-align:center;
}
p:lang(fr)
{
font-family:Verdana;
color:blue;

}
</style>
</head>
<body>

<p>Without :lang pseudo class</p>


<p lang="fr">With :lang pseudo class with the value fr</p>
</body>
</html>

:focus pseudo-class
It selects the elements that are currently focused on by the user. It is
generally used in input elements of the forms and triggers when the user
clicks on it.

Example

<!DOCTYPE HTML>
<html>
<style>
form{
text-align:center;
}
input:focus{
border:5px solid lightblue;
box-shadow:10px 10px 10px black;
color: blue;
width:300px;
}
</style>
<body>
<form>
<h1>Name: <input type="text" value="Enter your name"></h1>
</form>
</body>
</html>

:first-child pseudo-class
It matches a particular element, which is the first child of another element
and adds a special effect to the corresponding element.

The following illustration explains it more clearly.

Example

<!DOCTYPE HTML>
<html>
<head>
<style>
h1:first-child {
text-indent: 200px;
color:blue;
}
</style>
</head>

<body>

<div>
<h1>It is the first heading in div. It will be indented, and its color
will be blue.</h1>
<h1>It is the Second heading in div, which will not be affected.</
h1>
</div>
</body>
</html>

The simple tooltip hover


A tooltip specifies extra information about something when the user
moves the cursor over the element. Let's create a tooltip by using
the ":hover" pseudo-class.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h2{
display: none;
background-color: red;
color:white;
padding: 20px;
}
div{
font-size:40px;
}
div:hover h2 {
display: block;
}
</style>
</head>
<body>
<h1>Move your mouse to the below text to see the effect</h1>
<div>Hello World
<h2>Welcome to the javaTpoint</h2>
</div>

</body>
</html>

CSS classes and pseudo-classes


The classes in CSS can be combined with pseudo-classes. We can write
it as-

Syntax

selector.class: pseudo-class {
property: value;
}

We can understand it with the following example.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
div.hello:hover {
color: red;
font-size:40px;
}
</style>
</head>
<body>
<h1>CSS Classes and pseudo-classes</h1>
<h2>Move your cursor to the below text</h2>
<div class="hello">Hello World</p>

</body>
</html>

CSS Pseudo-elements
A pseudo-class can be defined as a keyword which is combined to a
selector that defines the special state of the selected elements. Unlike the
pseudo-classes, the pseudo-elements are used to style the specific part of
an element, whereas the pseudo-classes are used to style the element.

As an example, a pseudo-element can be used to style the first letter or


the first line of an element. The pseudo-elements can also be used to
insert the content after or before an element.

Syntax

Pseudo-element has a simple syntax which is given as follows:

1. selector::pseudo-element {
2. property: value;
3. }

We have used the double colon notation (::pseudo-element) in the


syntax. In CSS3, the double colon replaced the single colon notation for
pseudo-elements. It was an attempt from W3C to differentiate between
the pseudo-elements and pseudo-classes. So, it is recommended to
use double colon notation (::pseudo-element) instead of using single-
colon notation (:).
In CSS1 and CSS2, there is the use of a single colon (:) syntax for both
pseudo-elements and pseudo-classes. The single colon syntax is valid for
pseudo-elements in CSS1 and CSS2 for backward compatibility.

Although there are several CSS pseudo-elements, we are discussing some


of the most commonly used. The widely used CSS pseudo-elements are
tabulated as follows:

pseudo-element Description

::first-letter It selects the first letter of the text.


(:first-letter)

::first-line (:first- It styles the first line of the text.


line)

::before (:before) It is used to add something before the element's


content.

::after (:after) It is used to add something after the element's


content.

::selection It is used to select the area of an element that is


selected by the user.

Let's discuss the above pseudo-elements, along with an example.

The ::first-letter pseudo-element


As its name implies, it affects the first letter of the text. It can be applied
only to block-level elements. Instead of supporting all CSS properties, it
supports some of the CSS properties that are given below.

o Color properties (such as color)


o Font properties (such as font-style, font-family, font-size, font-
color, and many more).
o Margin properties (such as margin-top, margin-right, margin-
bottom, and margin-left).
o Border properties (like border-top, border-right, border-
bottom, border-left, border-color, border-width, and many
more).
o Padding properties (such as padding-top, padding-right,
padding-bottom, and padding-left).
o Background properties (such as background-color, background-
repeat, background-image, and background-position).
o Text related properties (such as text-shadow, text-transform,
text-decoration, etc.).
o Other properties are vertical-align (only when the float is
'none') word-spacing, line-height, line-spacing, etc.

Example

<html>
<head>
<style>
body{
text-align: center;
}
h1::first-letter {
font-family: Lucida Calligraphy;
font-size: 3cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of ::first-letter pseudo-element. </h2>
</body>
</html>

The ::first-line pseudo-element


It is similar to the ::first-letter pseudo-element, but it affects the entire
line. It adds the special effects to the first line of the text. It supports the
following CSS properties:
o Color properties (such as color)
o Font properties (such as font-style, font-family, font-size, font-
color, and many more).
o Background properties (such as background-color, background-
repeat, background-image, and background-position).
o Other properties are word-spacing, letter-spacing, line-height,
vertical-align, text-transform, text-decoration.

Example

In this example we will see the use of ::first-line element to add special
effects to the element's first line.

<html>
<head>
<style>
body{
text-align: center;
}
h1::first-line {
font-family: Lucida Calligraphy;
font-size: 1cm;
color: red;
text-shadow: 5px 8px 9px green;
}
</style>
</head>
<body>
<h1> Welcome to the javaTpoint.com. This site is developed so that
students may learn computer science related technologies easily. The j
avaTpoint.com is committed to provide easy and in-depth tutorials on v
arious technologies. </h1>
<h2> This is an example of ::first-line pseudo-element. </h2>
</body>
</html>

The ::before pseudo-element


It allows us to add something before the element's content. It is used to
add something before the specific part of an element. Generally, it is used
with the content property.

We can also add the regular strings or images before the content using
this pseudo-element.

Example

<html>
<head>
<style>
body{
text-align: center;
}
h1::before {
content: "'Hello World.'";
color: red;
}
</style>
</head>
<body>
<h1>Welcome to the javaTpoint.com. </h1>
<h2> This is an example of ::before pseudo-element. </h2>
<h3> In the first line the "Hello World" has added by using the pseu
do-element ::before </h3>
</body>
</html>

The ::after pseudo-element


It works similar to ::before pseudo-element, but it inserts the content
after the content of the element. It is used to add something after the
specific part of an element. Generally, it is used with the content property.

It also allows us to add regular strings or images after the content.

Example

<html>
<head>
<style>
body{
text-align: center;
}
h1::after {
content: "'Welcome to the javaTpoint.com.'";
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> This is an example of ::after pseudo-element. </h2>
<h3> In the first line the "Welcome to the javaTpoint.com." has add
ed by using the pseudo-element ::after </h3>
</body>
</html>

The ::selection pseudo-element


It is used to style the part of an element that is selected by the user. We
can use the following CSS properties with it:

o color.
o background-color.
o Other properties include cursor, outline, etc.

Example

<html>
<head>
<style>
body{
text-align: center;
}
h1::selection {
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> Select the text in first line to see the effect. </h2>
<h3> This is an example of ::selection pseudo-element. </h3>
</body>
</html>

CSS classes and pseudo-element


The pseudo-elements can be combined with CSS classes to style the
specific element having that class. The syntax of combining the CSS
classes with the pseudo-elements is given below.

Syntax

It can be written as:

selector.class::pseudo-element {
property: value
}

Example

This example will affect the first letter of those <h1> elements that
have class="example" rather than affecting the all <h1> elements.

<html>
<head>
<style>
body{
text-align: center;
}
h1.example::first-letter {
color: red;
font-size: 2cm;
font-family: Lucida Calligraphy;
}
</style>
</head>
<body>
<h1 class="example"> Hello World. </h1>
<h1> Welcome to the javaTpoint.com. </h1>
<h3> This is an example of pseudo-element with CSS classes.</
h3>
</body>
</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-

Example 1
Here, to explain the CSS box model, we have an instance.

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:30px;
font-weight:bold;
Text-align:center;
}
.gfg
{
margin-left:50px;
border:50px solid Purple;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:purple;
}
.gfg2
{
font-size:20px;
font-weight:bold;
background-color:white;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">JavaTpoint</div>
<div class = "gfg2">A best portal for learn Technologies</
div>
</div>
</body>
</html>

Example 2
Here, we also have an illustration to describe the CSS box model.

<!DOCTYPE html>
<head>
<style>
.main
{
font-size:30px;
font-weight:bold;
text-align:left;
}
#box
{
padding-top:30px;
width: 300px;
height: 100px;
border: 40px solid red;
margin: 30px;
text-align:center;
font-size:32px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">JavaTpoint</div>
</body>
</html>

You might also like