Scribd
Upload
26 views

CSS All Lectures

Uploaded by

Ramesh Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

CSS All Lectures

Uploaded by

Ramesh Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 220

INTRODUCTION

TO CSS
Lecture 1
1 Introduction To CSS

 able Of
T
2 Versions Of CSS

Contents
3 Types Of CSS

4 Comments in CSS
What Is CSS ?

Stands for Cascading Style Sheet

It is a design language

Used to set the look and feel of the page


What CSS can do ?

CSS can set

The color of the text


The style of fonts
background images
the responsiveness of the site
What Is Responsive Web Design ?
CSS Versions

CSS1(1996) Enabled users to set font size, align text, set margins, and apply background
and foreground colors

CSS2 (1998) Included features such as design styles for different devices

CSS3(2005) Includes text effects such as drop shadows and web fonts, semitransparent colors
as well as animations
CSS Syntax

Like HTML, CSS is also case in-sensitive.

It consists of only 3 parts, and they are :


CSS Syntax

Selector: Element to be styled like <h1>, <p> etc.

Property: The Attribute to be styled like font-size, color, font-style etc.

Value: Values are assigned to properties.

For example: color property can have value either red or #FF0000 etc.
Example
Types Of CSS Files
There are 3 choices available to use CSS in our HTML file:

Internal CSS

External CSS

Inline CSS
Internal CSS

In this, we place the CSS code within the <head></head> tags of each HTML file that we want to
style with CSS.

The format for this is:

<head>
<title>….</title>
<style >
CSS Content Goes Here
</style>
</head>
When To Use Internal CSS?

In Internal CSS, each HTML file contains the CSS code needed to style the page.

Internal CSS is good only if we need to style just one page, or if we want different pages to have
varying styles.
External CSS

Write the CSS code within a separate file and save it with the .css extension.

In the HTML page use the link tag to link the CSS file

Syntax

<head>
<title>…</title>
<link rel=”stylesheet” href=“Path To css file” />
</head>
External CSS

By using an external style sheet, all of our HTML files link to one CSS file in order to style the
pages.

This means, that if we need to alter the design of all our pages, we only need to edit one .css file
to make global changes to our entire website.
Inline CSS

Inline styles are CSS styles that are applied to one element using the “style” attribute.

An inline style can be used if a unique style is to be applied to one single occurrence of an
element.

Its format is:


<body>
< tag style=“css property” > some text</tag>
</body>
Comments In CSS
Comments are used to explain our code and may help us when we edit the source code at
a later date.

A CSS comment begins with "/*", and ends with "*/“.


Quiz Time

What is a RuleSet in CSS?

A. The instruction on how to style a CSS property

B. A combination of WHAT to style and HOW to style

C. The link tag that includes an external CSS

Answer: B
Quiz Time

Which type of CSS is least recommended?

A. Inline CSS

B. Internal CSS

C. External CSS

Answer: A
Quiz Time

Which type of CSS has the highest priority?

A. Inline CSS

B. Internal CSS

C. External CSS

D. Browser Default

Answer: A
THANK YOU
WHAT IS
CASCADING ORDER
Lecture 2
Cascading Style Sheets

Verbal Explanation here


Cascading Order

How browser decide what style will be used when there is more than one style specified for
an HTML element?

Generally speaking, we can say that all the styles will "cascade" into a new"virtual" style sheet
by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Example

1.One
2.Two
3.Three
Example

1.One
2.Two
3.Three
Position
Position

Specificity
Position

Specificity

Type
Position

Specificity

Type

Importance
Quiz Time

Vs.
Quiz Time
Quiz Time
THANK YOU
SELECTORS IN CSS
Lecture 3
1 What are Selectors

 able Of
T
2 Universal

Contents
3 Type

4 ID

5 Class
What Are Selectors In CSS

Selector is used to select or point to a specific element within the page.

The following are the most commonly used selectors:

Universal Selector
Type Selector
ID Selector
Class Selector
The Universal Selector
The Universal Selector is indicated by * and applies to all the elements of a page.
The Type Selector
The Type Selector allows us to create styles that apply to a specific type of HTML element.
Using Type and Universal Both
Type > Universal
The ID Selector
The Id selector is always prefixed by a hash symbol(#) and allows us to refer to a single element
in a page.
Using Type and ID Both
ID > Type
The Class Selector
The Class Selector allows us to style multiple HTML elements through the class attribute.

It is always prefixed by a dot symbol (.)

The class selector enables the application of the same type of formatting to a number of
unrelated elements.
The Class Selector
Adding Multiple Class Selectors
ID > Class
THANK YOU
ADVANCE SELECTORS
Lecture 4
 able Of
T 1 Grouping Selectors

Contents 2 Combining Selectors


Grouping Selectors

Grouping of selectors is done when we want to the same style for different elements
Grouping Selectors

Grouping of selectors is done when we want to the same style for different elements
Combining Selectors

Combining selectors is done sothat we can select an element with specific properties using
multiple selectors.
Combining Selectors

Combining selectors is done sothat we can select an element with specific properties using
multiple selectors.
Descendent Selectors

In CSS, a descendant means an element that is a child, grandchild, great-grandchild, and so


on, of another element.

Descendant selectors apply style based on whether one element contains another.
Descendent Selectors
Exercise 1
Exercise 1
Exercise 2
Exercise 2
Exercise 3
Exercise 3
THANK YOU
CSS UNITS
Lecture 6
1 What Are CSS Units

 able Of
T 2 What Is Absolute Units

Contents 3 What Is Relative Units


CSS Units

A CSS unit determines the size of a property we’re setting for an element or its content.

For example, if we wanted to set the property margin of a paragraph, we would give it a
specific value.

This value includes the CSS unit.


CSS Units

Let’s look at a small example:

p{
margin: 20px;
}

In this case:
margin is the property
20px; is the value, and
px (or “pixel”) is the CSS unit.
CSS Units

Before we can understand more about CSS units, it’s important to consider the two categories of
units:

These are:

absolute
and
relative
Absolute Units

Units that are “absolute” are the same size regardless of the parent element or device size.

This means a property set with a value that has an absolute unit will always stick to that size
when looked at on a phone or on a laptop or on a large screen.
Absolute Units
Example
Relative Units

Relative measurements have no fixed, specific value.

Instead, they are calculated in comparison to an inherited value.

Relative units are useful for styling responsive sites because they scale relative to the parent
or window size (depending on the unit).
Relative Units
Example
THANK YOU
INHERITANCE IN CSS
Lecture 5
 able Of
T 1 Inheritance

Contents
Inheritance In CSS

Inheritance is the mechanism through which a child element receives property values
from its parent element in the document tree.

In an HTML document, elements are organized in a tree structure. With the exception of the
initial <html> element, every element has a parent element that encapsulates it.

Styles applied to a parent element can propagate down to its enclosed elements if the
properties are designed to be inherited. This ensures a consistent and efficient way of styling
elements within the document tree.
HTML Inheritence Tree
Inheritance In CSS

It's important to note that not all CSS properties are inherited from parent-to-child
elements.

For instance, font size is an inherited property, meaning it can be passed from a parent to its
child elements. On the other hand, properties like borders are not inherited and need explicit
definitions for each element.

"For a comprehensive list of inherited and non-inherited properties, you can refer to the official
CSS property index at W3C CSS Property Index.
The Inherit Keyword

The inherit keyword serves as an explicit way to specify inheritance in CSS.

Crucially, it can be used for both inherited and non-inherited properties, providing flexibility in
defining styles.
Example
Example
Example
Example
HANDLING BACKGROUND
Lecture 7
Styling Background Using CSS

Backgrounds are a core part of CSS.

They are one of the fundamentals that we simply need to know.

Overall we have 8 background properties but 6 of them are most commonly used.
Styling Background Using CSS

background-color: specifies the solid color to fill the background with.

background-image: sets an image on the background.

background-repeat: determines whether the image is tiled.

background-position: specifies where to place the image in the element’s background.


Styling Background Using CSS

background-attachment: determines whether the image scrolls with the page.

background-size: sets the size of the element's background image.


Background Color

Color is a crucial aspect of web design that enhances visual appeal and communicates
information.

It plays a vital role in user experience and brand identity.


Background Color

The background-color property fills the background with a solid color.

There are Many ways to set the background-color and they are:

background-color: blue;
background-color: #0000ff;
background-color: rgb(0, 0, 255);
background-color: rgba(0,0,255,0.5);
Color Models
Background Color
Background Image

The background-image property allows us to specify an image to be displayed in the background.

Syntax:
background-image: url(‘path to image’);
Background Image
Background Repeat

By default, when we set an image, it is repeated both horizontally and vertically until the entire
element is filled.

But sometimes we want an image to be displayed only once or to be tiled in only one direction.

The possible values are:


repeat;
no-repeat;
repeat-x;
repeat-y;
inherit;
Background Position
The background-position property sets the starting position of a background image.

Possible values are:


left top
left bottom
left center
right center
right top
right bottom
center top
center bottom
center center
left% top%
xpos ypos
inherit
Background Size
The background-size CSS property sets the size of the element's background image.

The image can be left to its natural size, stretched, or constrained to fit the available space.
Background Size

There are different syntaxes we can use with this property:

the keyword syntax ("auto", "cover" etc ),

the one-value syntax (sets the width of the image (height becomes "auto")

the two-value syntax (first value: width of the image, second value: height)
Background Attachment
The background-attachment property determines what happens to an image when the user
scrolls the page.

The three available values are


scroll
fixed
inherit
Background Shorthand
There are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property.

This is called a shorthand property.


Background Shorthand
We can use any combination of these properties that we like, in almost any order.

If the value for an individual background property is missing or not specified while using the
shorthand notation, the default value for that property will be used instead, if any.

Example:
body
{
background:#ffffff url(‘bgimg.jpg') no-repeat right top;
}
THANK YOU
THANK YOU
FONTS AND
ICONS IN CSS
Handling Font In CSS

CSS provides several properties for styling the font of the text, including changing their face and
controlling their size and boldness.

There are 5 properties for setting font and they are:


font-family
font-style
font-weight
font-size
CSS Font Groups
The Font-Family Property

The font-family property is used to specify the font to be used to render the text.

There are 3 ways to apply font:

Single Font Name:


body
{
font-family: Verdana;
}
The Font-Family Property

Font Family Keywords


body
{
font-family: serif;
}

Multiple Font Names


body
{
font-family: Verdana,Arial,Helvetica,sans-serif;
}
The Font-Style Property

The font-style property is used to set the font face style for the text content of an element.

The font style can be:


normal
italic
oblique

The default value is normal.


The Font-Style Property
p.normal
{
font-style: normal;
}

p.italic
{
font-style: italic;
}
The Font-Size Property

The font-size property is used to set the size of the font for the text content of an element.

There are several ways to specify the font size values:

Using pixels

Using em or percentage

Using special keywords


Setting Font Size With Pixels

Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when we need accuracy.

A pixel is an absolute unit of measurement that specifies a fixed length.


Setting Font Size With em

The em unit refers to the font size of the parent element.

When defining the font-size property, 1em is equal to the size of the font that applies to the
parent of the element.

So, if we set a font size of 20px on the body element, then 1em = 20px and 2em = 40px.

However, if we haven't set the font size anywhere on the page, then it is the browser default,
which is normally 16px.
Setting Font Size With Keyword

CSS provides several keywords that we can use to define font sizes.

An absolute font size can be specified using one of the following keywords:
xx-small /*equivalent of 9 pixels*/
x-small /*equivalent of 10 pixels*/
small /*equivalent of 13 pixels*/
medium /* equivalent to the browsers default font-size*/
large /*equivalent of 18 pixels*/
x-large /*equivalent of 24 pixels*/
xx-large. /*equivalent of 32 pixels*/

Whereas relative fonts can be specified using the keywords: smaller or larger
The Font-Weight Property

The font-weight property specifies the weight or boldness of the font.

This property can take one of the following values:


normal
bold
bolder
lighter
100, 200, 300, 400, 500, 600, 700, 800, 900
inherit
The Font-Weight Property

The numeric values 100-900 specify the font weights, where each number represents a weight
that is greater than its predecessor.

400 is same as normal and 700 is same as bold.

The bolder and lighter values are relative to the inherited font weight, while the other values
such as normal and bold are absolute font weights.
What Are Google Fonts

Google Fonts launched in 2010, is a free, open-source selection of fonts.

The Google Fonts website makes it easy for anyone to quickly select and utilize various different
fonts for their own design needs.

Currently, 1587 collections of fonts are available on the Google Fonts website
What Is Font Awesome ?

Font Awesome is an icon toolkit with 2016 free icons and 19,287 paid icons that are incredibly
easy to use.

The icons were created using a scalable vector and inherited CSS sizes and colors when applied to
them.

This makes them high-quality icons that work well on any screen size.
Customizing Icons

Font Awesome allows us to customize the icons.

We can do this by simply adding our own class to the icons

Then we can add CSS code to these classes


THANK YOU
TEXT PROPERTIES
Handling Text In CSS

CSS provides several properties that allow you to define various text styles such as color,
alignment, decoration, transformation, etc. very easily and effectively.

The most commonly used text properties are:


color
text-align
text-decoration
text-transform
line-height
Handling Color In CSS

The color of the text is defined by the CSS color property.

Example:

body
{
color: #434343;
}
The Text-Align Property
The text-align property is used to set the horizontal alignment of the text.

Text can be aligned in four ways: to the left, right, center, or justify
(straight left and right margins).
The Text-Decoration Property

The text-decoration property is used to set or remove the decorations from the text.

This property typically accepts one of the following values:

underline
overline
line-through
none
The Text-Transform Property

The text-transform property is used to set the cases for a text.

Using this property we can change an element's text content into uppercase or lowercase
letters, or capitalize the first letter of each word without modifying the original text.
The Line-Height Property

The line-height property is used to set the distance between lines of text.

The default for most browsers is 1.2.

The value of this property can be a unitless number, a percentage (%), or a length in pixels,
ems, etc.
The Line-Height Property

When the value is a unitless number or em the line height is calculated by multiplying the
element's font size by the number.

However, it is always recommended to use a unitless number rather than em because em can
give unexpected results
THANK YOU
SEMANTIC
ELEMENTS
What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of semantic elements:


<form>, <table>, and <article> - Clearly define its content.

Examples of non-semantic elements:


<div> and <span> - Tells nothing about its content.
What are Semantic Elements?
Semantic Vs Non-Semantic
Semantic Vs Non-Semantic
THANK YOU
DIV AND SPAN
What Is A div Tag

div is a block element and is used to


divide our page into different blocks or
divisions

It is also used to group multiple HTML


elements like image, para, and tables
and treat them as a single unit
Example
Output
What Is A span Tag

Span is a generic inline element


often used to apply styling to a portion
of content.

Span tags are used to style small


segments of text, links, etc that
appear inline with the surrounding
content.
Example
Output
THANK YOU
STYLING LISTS IN CSS
1 Styling Lists In CSS

 able Of
T 2 CSS List Properties
Contents
Styling Lists In CSS

CSS provides several properties for styling and formatting the most commonly used
unordered and ordered lists.

These CSS list properties typically allow you to:

Control the shape or appearance of the marker.

Set the distance between the marker and the text in the list.

Specify an image for the marker rather than a bullet point or number.
Styling Lists In CSS

Following are the properties provided by CSS for styling any list:

list-style-type
list-style-position
list-style-image
list-style
The list-style-type Property

The list-style-type property allows us to control the shape or style of the marker in the
list.

For unordered lists possible values are:

none
disc
circle
square
The list-style-type Property
For ordered lists possible values are:
All Possible Values
The list-style-position Property

By default, the marker of each list item is positioned outside of their display boxes.

However, we can also position these markers or bullet points inside of the list item's
display boxes using the list-style-position property along with the value inside.

In this case, the lines will wrap under the marker instead of being indented
The list-style-image Property

We can also set an image as a list marker using the property list-style-image.

Example:
ul li
{
list-style-image: url("images/bullet.png");
}

The style rule in the above code assigns a PNG image “bullet.png" as the list marker
Setting All List Properties
At Once
The list-style property is a shorthand property for defining all three properties:
list-style-type, list-style-image, and list-style-position of a list in one place.

Example:
ul
{
list-style: square inside url("images/bullet.png");
}
THANK YOU
BOX MODEL
1 The CSS Box Model
 able Of
T 2 Border, Padding And Margin
Contents
The CSS Box Model

Every element that can be displayed on a web page is comprised of one or more
rectangular boxes.

CSS box model typically describes how these rectangular boxes are laid out on a web
page.
The CSS Box Model
These boxes can have different properties and can interact with each other in
different ways, but every box has 4 very important elements :

a content area
This can be text, images, or anything else.

padding
The space between the contents and the border

border
The frame is in the defined thickness.

margin
The space between the frame and the next item.
The CSS Box Model
The CSS Box Model
Setting Width And Height

Usually when we set the width and height of an element using the CSS width and
height properties, in reality, we are only setting the width and height of the content
area of that element.

This width and height do not include paddings, borders, or margins.


Example
Padding
The CSS padding properties allow us to set the spacing between the content of an
element and its border.

It can be specified using the following properties:

padding-top

padding-right

padding-bottom

padding-left

padding
Padding
The padding properties can be specified using the following values:

length - specifies padding in px, em, rem, pt, cm, etc.

% - specifies a padding in percentage (%) of the width of the containing element.

inherit - specifies that the padding should be inherited from the parent element.
Border
The CSS border properties allow us to define the border area of an element's box.

Borders appear directly between the margin and padding of an element.

The border can be a style like solid line, dotted line, double line, etc.
Border
Border
Following are the CSS border properties that can be applied on an element:

border-style

border-width

border-color

border
Example
Creating Rounded Borders
CSS3 introduced a new property called border-radius, which can be used to create
rounded corners.

This property typically defines the shape of the corner of the outer border edge.
Margin
The CSS margin properties allow us to set the spacing around the border

It can be specified using the following properties:

margin-top

margin-right

margin-bottom

margin-left

margin
Margin
The margin properties can be specified using the following values:

length - specifies padding in px, em, rem, pt, cm, etc.

% - specifies a padding in percentage (%) of the width of the containing element.

auto - the browser calculates a suitable margin to use.

inherit - specifies that the padding should be inherited from the parent element.
Using auto
For Horizontal Centering
The auto value for the margin property tells the web browser to automatically calculate
the margin.

This is commonly used to center an element horizontally within a larger container.


THANK YOU
HANDLING LINK IN
CSS
1 Handling Link In CSS

 able Of
T 2 Pseudo-Classes

Contents 3 Making Links Look Like Button


Handling Links In CSS

Links or hyperlinks are an essential part of a website as they provide navigation


through the site.

Therefore styling the links properly is an important aspect of building a user-friendly


website.
The Link PseudoClasses
A link has four different states :
link
visited
hover and
active

These four states of a link can be styled differently using the following anchor
pseudo-class selectors:
a:link
a:visited
a:hover
a:active
The Link PseudoClasses

a:link — define styles for normal or unvisited links.

a:visited — define styles for links that the user has already visited.

a:hover — define styles for a link when the user places the mouse pointer over it.

a:active — define styles for links when they are being clicked.
Making Link Look Like Button

We can also make our ordinary text links look like buttons using CSS.

To do this we need to utilize 3 more CSS properties which are

background-color
border
padding
THANK YOU
FLOAT
PROPERTY
The float Property
Float is a CSS positioning property.

It is used for 2 purposes


Laying out div horizontally
Placing images and text around image
How Images And Text
Appear In Books ?
The float Property

Similarly in CSS, the float property is used to place an element on to left or right side of
its container, allowing text and other elements to wrap around it

It is generally used to place an image or an element inside its container and other
elements will wrap around it.
The float Property
Making Divs Appear
Side By Side
Normally div elements will be displayed on top of each other.

However, if we use float: left we can let elements float next to each other.
The clear Property

Elements that come after the floating element will flow around it.

The clear property helps us change this behavior and move the element below the
floating elements that precede it.

The possible values are none, left, right, and both.


THANK YOU
CSS
POSITIONING
CSS Positioning

CSS positioning is a technique used to control the layout and placement of elements
within a webpage.

It allows developers to precisely position elements relative to their containing elements


or the viewport.

In addition, we can utilize some other position-related properties: top, right, bottom,
left, and z-index.
Possible Values Of Position

The position property can take five different values and they are:

static

relative

absolute

fixed

sticky
Static Positioning

A static-positioned element is always positioned according to the normal flow of the


page.

All the HTML elements are positioned as static by default.

Static-positioned elementsare not affected by the top, bottom, left, right, and z-index
properties.
Example

.one
{
position: static;
top: 50px;
}

The above rule set will have no effect since the position property is set to static which
remains unaffected with any kind of positioning.
Relative Positioning

A relative positioned element is positioned with respect to its normal position.

In the relative positioning scheme the element's box position is calculated according to the
normal flow.

Then the box is shifted from this normal position according to the properties — top or bottom
and/or left or right.
Example

.one
{
position: relative;
top: 50px;
}

The above rule set will have to shift the element to 50px downwards from its original
position
Points To Remember
About Relative Positioning

A relatively positioned element can be moved out from its original position but it keeps the
space originally reserved for it in the normal flow.

It can overlap with other elements according to their order of appearance on the page and to
prioritize this overlapping, we can use another property called z-index
The z-index Property
The z-index property in CSS controls the vertical stacking order of elements that overlap.

As in, which one appears closer to the user.

z-index only affects elements that have a position value other than static
What If We Don’t Use Z-index?

Without any z-index value, the elements will always stack in the order that they appear on the
page.

That is, the lowest one down at the same hierarchy level appears on top.
What If We Don’t Use Z-index?
However, we can change it by setting the z-index, which has a simple rule that an element with
a greater z-index value is always in front of an element with a lower z-index value.

Example:
div
{
position: relative;
top: 50px;
z-index: 1;
}
Absolute Positioning
An element with position: absolute is positioned at the specified coordinates.

It is taken out of the normal flow and can be placed absolutely anywhere on the web page that
the designer chooses.
Example
.one
{
position: absolute;
top: 50px;
}

The above rule set will have set the element to 50px downwards from the top.
An Important Point!
An absolutely positioned element is positioned relative to the first parent element that has a
position other than static.

If no such element is found, it will be positioned on a page relative to the 'top-left' corner of
the browser window
Fixed Positioning
Fixed positioning allows us to fix the position of an element to a particular spot on the page,
regardless of scrolling.

In other words, we can say that fixed positioning is a subcategory of absolute positioning.

The only difference is a fixed-positioned element is fixed with respect to the browser's
viewport and does not move when scrolled.
Example
.one
{
position: fixed;
top: 50px;
left: 100px;
}

The above rule set will have set the element to 50px downwards from top and 100px towards the
right. Moreover, the position of the element will not change when the page is scrolled.
Sticky Positioning
A position: sticky element will initially behave like position: relative element, but if we keep
scrolling, they will get taken out of the normal flow and behave like position: fixed wherever we
have positioned them.

In simple words, we can say that a sticky element toggles between relative and fixed,
depending on the scroll position.
Example
.another
{
position: sticky;
top: 0px;
}

The above rule set will have initially let the element scroll until it reaches the top at 0px , then
the element will become fixed at that position will not further scroll with the page.
THANK YOU
DISPLAY
PROPERTY
What Is Display Property

The display property in CSS is used to control the layout behavior of an element.

It specifies how an HTML element should be displayed on the webpage.


Block-Level Element Vs Inline-Element
Block-Level Element Vs Inline-Element
Examples

Some inline elements <a> ,<span> , <img>, <b>, <i> etc.

Some block level elements are <p>, <div>, all headings, <ol>, <ul>, <li>, <table> etc.
The Display Property

However CSS allows us to change block level elements to inline and vice-versa

To do this we can use display property which can perform 2 tasks:


Change an element’s rendering from inline to block and vice versa
Remove an element.

It’s possible values are:

block
inline
Inline-block
none
The display: block

The block value of the display property forces an element to behave like a block-level
element, like a <div> or <p> element.

Example:
span
{
display: block;
}
a
{
display: block;
}
The display: inline

The inline value of the display property causes an element to behave as though it were an
inline-level element, like a <span> or an <a> element

Example:
p
{
display: inline;
}
ul li
{
display: inline;
}
The display: inline-block

The inline-block element appears to work almost like the block-level element with the
difference being that they do not need to start on a new line.

So if we want to create block-like boxes but keep them on the same line, we can use the
inline-block
The display: none

To remove an element we set its display property to none.

This not only makes the element invisible and but it also removes it from its position.

Example:
p.second
{
display : none;
}
THANK YOU

You might also like