CSS Archives - Netzole https://www.netzole.org/category/css/ Tue, 27 May 2025 20:32:51 +0000 en-US hourly 1 CSS Pseudo classes https://www.netzole.org/css-pseudo-classes/ https://www.netzole.org/css-pseudo-classes/#respond Wed, 03 Mar 2021 09:41:41 +0000 https://www.netzole.com/?p=6406 What is CSS Pseudo classes A CSS pseudo class is applied, where we want to explain a particular state of an element. For better understanding...

The post CSS Pseudo classes appeared first on Netzole.

]]> What is CSS Pseudo classes

A CSS pseudo class is applied, where we want to explain a particular state of an element.
For better understanding where we use “CSS Pseudo-classes” let us see some given examples:

  • Define the style of an element when a user mouses over it
  • or to style visited links differently

The CSS pseudo class begins with a colon (:).

CSS Pseudo classes Syntax

selector:pseudo-class {
  property: value;
}


CSS Anchor Pseudo classes

Let’s see the given example to understand how css anchor pseudo classes works:

Example

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
.tut-out1 a:link{
  color: red;
}

/* visited link */
.tut-out1 a:visited {
  color: green;
}

/* mouse over link */
.tut-out1 a:hover {
  color: hotpink;
}

/* selected link */
.tut-out1 a:active {
  color: blue;
}
</style>
</head>
<body>
<div class="tut-out1">
<h3>Anchor Pseudo classes</h3>
<p><b><a href="https://www.netzole.com/contact/" target="_blank">This is a css link</a></b></p>
</div>
</body>
</html>

 

Output

Anchor Pseudo-classes

This is a css link

 

CSS – The :first-child Pseudo-class

The :first-child pseudo-class is applied where we want to add a special effect to an element that is the first sibling of some other collection of sibling elements.
Let’s see the given example to understand how first-child Pseudo-class works:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.css-class p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
</style>
</head>
<body>
<h3>CSS first-child Pseudo-class</h3>
<div class="css-class">
<p>This is a css first-child Pseudo-class</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>It is a long established fact that a reader will be distracted by the readable content </p>
</div>
<div class="css-class">
<p>There are many variations of passages of Lorem Ipsum available</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</div>
</body>
</html>

 

Output

CSS first-child Pseudo-class

This is a css first-child Pseudo-class

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

It is a long established fact that a reader will be distracted by the readable content

There are many variations of passages of Lorem Ipsum available

Contrary to popular belief, Lorem Ipsum is not simply random text.

The standard chunk of Lorem Ipsum used since the 1500s

 

The :last-child Pseudo-class

The :last-child pseudo-class is applied where we want to add a special effect to an element that is the last sibling of some other collection of sibling elements.
Let’s see the given example to understand how last-child Pseudo-class works:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.css-class p:first-child {
  color: lime;
  background-color: orange;
  padding: 5px;
}
</style>
</head>
<body>
<h3>CSS last-child Pseudo-class</h3>
<div class="css-class">
<p>This is a css last-child Pseudo-class</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>It is a long established fact that a reader will be distracted by the readable content </p>
</div>
<div class="css-class">
<p>There are many variations of passages of Lorem Ipsum available</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</div>
</body>
</html>

 

Output

CSS last-child Pseudo-class

This is a css last-child Pseudo-class

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

It is a long established fact that a reader will be distracted by the readable content

There are many variations of passages of Lorem Ipsum available

Contrary to popular belief, Lorem Ipsum is not simply random text.

The standard chunk of Lorem Ipsum used since the 1500s

 

The post CSS Pseudo classes appeared first on Netzole.

]]> https://www.netzole.org/css-pseudo-classes/feed/ 0 CSS Combinators https://www.netzole.org/css-combinators/ https://www.netzole.org/css-combinators/#respond Tue, 23 Feb 2021 09:46:29 +0000 https://www.netzole.com/?p=6220 A CSS combinator is connected two selectors in a way that explains them a useful relationship to each other. Today we will discuss that there...

The post CSS Combinators appeared first on Netzole.

]]> A CSS combinator is connected two selectors in a way that explains them a useful relationship to each other.

Today we will discuss that there are mainly four different types of combinators in CSS:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Descendant Selector

This selector is used to match all the descendant elements of a specified particular element. The descendant selector represents by using a single space.

Descendant Selector
Let’s see the given example to understand how descendant selector works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul a {
  font-size:10px;
   color:#ccc;
}
 
</style> 
</head> 
<body> 
<div class="bor-test"><ul>
 	<li><a>descendant selector (space)</a></li>
 	<li><a>child selector (>)</a></li>
 	<li>adjacent sibling selector (+)</li>
 	<li>general sibling selector (~)</li>
</ul></p>

 
</body> 
</html>

 

Output

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

 

Child combinator (>)

The child combinator (>) is written in the middle of 2 CSS selectors. It selects all those tags or elements matched by the second CSS selector(see fig) that are the immediate children of tags or elements matched by the first CSS selector.
For example, to select only <span> elements that are direct children of <h1> elements:

h2 > span

Let’s see the given example to understand how descendant selector works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h2 > span {
  font-size:15px;
   color:red;
}
 
</style> 
</head> 
<body> 
<div class="bor-test">
 	<h2><span>descendant selector (space)</span></h2>
 	<h2><span>child selector (>)</span></h2>
 	<h2>adjacent sibling selector (+)</h2>
 	<h2>general sibling selector (~)</h2>

</body> 
</html>

 

Output

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

descendant selector (space)

child selector (>)

adjacent sibling selector (+)

general sibling selector (~)

 

Adjacent sibling combinator

The Adjacent sibling selector is used between two CSS selectors, where an element is immediate to the specified element. This type of selector matches only one element that is just immediate to the specified element. For example, to select single <p> elements that are immediately preceded by a <h2> element:

h2 + p

Let’s see the given example to understand how adjacent sibling combinator works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h2 + p {
  font-size:14px;
   color:green;
}
div + p{
font-size:17px;
   color:y#207cf1;
}
 
</style> 
</head> 
<body> 
<div class="bor-test">
 	<h2>descendant selector (space)</h2>
 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
 <div>
  <p>Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
  <p>Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

<p>Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
<p>Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>

</body> 
</html>

 

Output

descendant selector (space)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .

Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry.

Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry.

 

General Sibling Selector (~)

This type of selector matches all elements that are children of the specified element. For example, to select all <p> elements that come after the  <h2> element:

h2 ~ p

Let’s see the given example to understand how general sibling combinator works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h2 ~ p {
  font-size:14px;
   color:green;
}
div ~ p{
font-size:17px;
   color:y#207cf1;
}
 
</style> 
</head> 
<body> 
<div class="bor-test">
 	<h2>descendant selector (space)</h2>
 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
 <div>
  <p>Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
  <p>Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

<p>Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
<p>Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>

</body> 
</html>

 

Output

descendant selector (space)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .

Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry.

Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry.

 

The post CSS Combinators appeared first on Netzole.

]]> https://www.netzole.org/css-combinators/feed/ 0 CSS Lists https://www.netzole.org/css-lists/ https://www.netzole.org/css-lists/#respond Wed, 30 Dec 2020 07:50:42 +0000 https://www.netzole.com/?p=6083 HTML Lists and CSS List Properties Firstly if we discuss about HTML list, there are two different types of HTML list, which is given below:...

The post CSS Lists appeared first on Netzole.

]]> HTML Lists and CSS List Properties

Firstly if we discuss about HTML list, there are two different types of HTML list, which is given below:

  1. Unordered lists (<ul>) — These types of list objects are shown with bullets (•).
  2. Ordered lists (<ol>) — These types of list objects are shown with numbers (1, 2, 3, 5, and so on).

There is a number of CSS list properties, which are applied to HTML lists. The CSS list properties are given below:

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • marker-offset

list-style-type

Let’s see the given example to understand how list-style-type works:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul.test {
  list-style-type: circle;
}

ol.test1 {
  list-style-type: upper-roman;
}

</style>
</head>
<body>

<h4>Example of unordered lists:</h4>
<ul class="test">
  <li>Name</li>
  <li>Email</li>
  <li>Phone</li>
</ul>

<h4>Example of ordered lists:</h4>
<ol class="test1">
   <li>Name</li>
  <li>Email</li>
  <li>Phone</li>
</ol>

</body>
</html>

 

Output

Example of unordered lists:

  • Name
  • Email
  • Phone

Example of ordered lists:

  1. Name
  2. Email
  3. Phone

 

list-style-position

The list-style-position CSS property shows that where the marker should display inside or outside of the border containing the bullet points. The by default position of the list is outside.
Let’s see the given example to understand how list-style-position works:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul.test {
  list-style-position: outside;
}

ul.test1 {
   list-style-position: inside;
}

</style>
</head>
<body>

<h4>Example of unordered lists:</h4>
<ul class="test">
  <li>Name</li>
  <li>Email</li>
  <li>Phone</li>
</ul>

<h4>Example of ordered lists:</h4>
<ul class="test1">
  <li>Name</li>
  <li>Email</li>
  <li>Phone</li>
</ul>

</body>
</html>

 

Output

Display bullet point in default position:

  • Name
  • Email
  • Phone

Display bullet point in inside position:

  • Name
  • Email
  • Phone

 

The post CSS Lists appeared first on Netzole.

]]> https://www.netzole.org/css-lists/feed/ 0 CSS Text https://www.netzole.org/css-text/ https://www.netzole.org/css-text/#respond Mon, 28 Dec 2020 09:33:43 +0000 https://www.netzole.com/?p=6046 CSS Text In this tutorial, today we will teach “how to styled text properties of an element ”? There are numbers of text properties some...

The post CSS Text appeared first on Netzole.

]]> CSS Text

In this tutorial, today we will teach “how to styled text properties of an element ”? There are numbers of text properties some of which are given below:

  • color
  • text-align
  • word-spacing
  • text-decoration
  • text-transform
  • letter-spacing
  • text-indent
  • line-height

Text Color

For the defining text color, you can use CSS color property. You can define color values in lots of forms such as:

  • a color name or keywords – like “black”
  • an RGB color value – like “rgb(255, 99, 72)”
  • a HEX  color value – like “#cc6347”

Let’s see the given example to understand how color properties works:

Example

In this example we define the Text Color.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.bor-test{
 color:red;}

h3{
color:#aaad1c;
}
 
</style> 
</head> 
<body> 
<h3>how to styled text properties of an element?</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

how to styled text properties of an element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

Text Alignment

For changing the alignment of a text, you can use the text-align CSS property.
Let’s see the given example to understand how color properties works:

Example

In this example we define the Text Alignment.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

h4 {
  text-align: center;
}

bor-test2 {
  text-align: left;
}

bor-test3 {
  text-align: right;
}
 
</style> 
</head> 
<body> 

<h4>Hello Netzole</h3>
<p class="bor-test2">It has been the industry's standard dummy text ever since the 1500s</p>
<p class="bor-test3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 
</body> 
</html>

 

Output

Hello Netzole

It has been the industry’s standard dummy text ever since the 1500s

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 

The post CSS Text appeared first on Netzole.

]]> https://www.netzole.org/css-text/feed/ 0 CSS Links https://www.netzole.org/css-links/ https://www.netzole.org/css-links/#respond Mon, 28 Dec 2020 07:41:30 +0000 https://www.netzole.com/?p=6040 CSS Links In this tutorial, today we will learn “how to styled different properties of links through CSS”?  There are four different types of links...

The post CSS Links appeared first on Netzole.

]]> CSS Links

In this tutorial, today we will learn “how to styled different properties of links through CSS”?  There are four different types of links forms, which can be styled differently see below:

  1. a:link — apply CSS property (e.g. color, size, etc.) for normal or unvisited hyperlinks.
  2. a:visited — apply CSS property (e.g. color, text-decoration, etc.) for hyperlinks that the user has already visited.
  3. a:hover — apply CSS property (e.g. font-family, size, etc.) for a hyperlink when the user place the mouse pointer over link.
  4. a:active — apply CSS property (e.g. background, size, etc.) for hyperlinks when they are being clicked.

Let’s see the given example to understand how css links style works:

CSS Links Examples

<!DOCTYPE html> 
<html> 
<head>
      <style type = "text/css">
      /* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: pink;
}
     </style>
   </head>
</html>

 

The post CSS Links appeared first on Netzole.

]]> https://www.netzole.org/css-links/feed/ 0 CSS Color https://www.netzole.org/css-color/ https://www.netzole.org/css-color/#respond Wed, 23 Dec 2020 12:09:55 +0000 https://www.netzole.com/?p=6030 CSS Color In the CSS color tutorial, today we will explain “how can you define color values?” With the help of CSS color property, you...

The post CSS Color appeared first on Netzole.

]]> CSS Color

In the CSS color tutorial, today we will explain “how can you define color values?”

With the help of CSS color property, you can apply text color in an element.

CSS Color Property Syntax

Let’s see the CSS color property syntax, which is given below:

color: value;

You can define color values in various form, which is given below:

  • Keyword or Name: You can define color name such as color: red;
  • HEX values: You can define color HEX values such as color: #cc6347;
  • HSL values: You can define color HSL values such as color: hsl(9, 100%, 65%);
  • RGB values: You can define color RGB values such as color: rgb(255, 99, 72);
  • RGBA values: You can define color RGBA values such as color: rgba(255, 99, 71, 0.4);
  • HSLA values: You can define color HSLA values such as color: hsla(9, 100%, 64%, 0.6);

Let’s see the given example to understand how color properties works:

CSS Colors Examples

Examples- #1

In this example we use Keyword or Name as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.bor-test{
 color:green;}

h3{
color:crimson;
}
 
</style> 
</head> 
<body> 
<h3>Here we use color green.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use color green.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

Examples- #2

In this example we use HEX values as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 color:#0000FF;
}
h3{
color:#FF00FF;
}
 
</style> 
</head> 
<body> 
<h3>Here we use HEX value for color.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use HEX value for color.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 
 

Examples- #3

In this example we use RGB values as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 color:rgb(0,255,0);
}
h3{
color:rgb(255,255,0;
}
 
</style> 
</head> 
<body> 
<h3>Here we use RGB value for color.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use RGB value for color.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

The post CSS Color appeared first on Netzole.

]]> https://www.netzole.org/css-color/feed/ 0 CSS Opacity https://www.netzole.org/css-opacity/ https://www.netzole.org/css-opacity/#respond Tue, 22 Dec 2020 08:22:08 +0000 https://www.netzole.com/?p=6017 CSS Opacity With the help of CSS Opacity, you can define the transparency of an element. CSS Opacity Property Syntax Let’s see the CSS Opacity...

The post CSS Opacity appeared first on Netzole.

]]> CSS Opacity

With the help of CSS Opacity, you can define the transparency of an element.

CSS Opacity Property Syntax

Let’s see the CSS Opacity property syntax, which is given below:

Opacity: value;

The CSS opacity value is varying from 0.0 to 1.0.  The lower value of the opacity, the more transparent elements. Let’s see below some examples of transparent Image:

Example- Transparent Image

The given example define that an image opacity value is 0.4

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.4;
}
</style>
</head>
<body>

<h2>Opacity Image Transparency</h2>
<p>The given example define that an image opacity value is 0.4</p>
<img src="Cake-Php-logo.png" alt="Forest" width="170" height="100">

</body>
</html>

 

Output

Original image

Without applying opacity

Forest

Transparet Image

The given example define that an image opacity value is 0.4

Forest

 

Opacity value is 0.2 then Image Transparency

Forest

The post CSS Opacity appeared first on Netzole.

]]> https://www.netzole.org/css-opacity/feed/ 0 CSS Float https://www.netzole.org/css-float/ https://www.netzole.org/css-float/#respond Mon, 21 Dec 2020 11:41:39 +0000 https://www.netzole.com/?p=5974 CSS float property In the CSS tutorial, today we will learn how to apply CSS float property with syntax and examples. In CSS float property,...

The post CSS Float appeared first on Netzole.

]]> CSS float property

In the CSS tutorial, today we will learn how to apply CSS float property with syntax and examples.

In CSS float property, you can change the position or formate of the element on the left or right side in a container.

CSS Float Property Syntax

Let’s see the CSS float property syntax, which is given below:

float: value;

There are given below float property values:

  • left – If you define left value the HTML element change position (float) to the left of its container
  • right – If you define right value the HTML element change position (float) to the right of its container.
  • none –If you define none value the HTML element does not float. This will no move(it’s the default).
  • inherit – If you define inherit value the HTML element inherits the float value of its parent.

Example- float: right;

The given example define that an image should float to the right in a text:

<!DOCTYPE html> 
<html> 
<head> 
<style> 

img {
  float: right;
}
 
</style> 
</head> 
</html>

 

Output

Netzole TeacherLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

 

Example- float: left;

The given example define that an image should float to the left in a text:

<!DOCTYPE html> 
<html> 
<head> 
<style> 

img {
  float: left;
}
 
</style> 
</head> 
</html>

 

Output

Netzole TeacherLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

 

The post CSS Float appeared first on Netzole.

]]> https://www.netzole.org/css-float/feed/ 0 CSS Padding https://www.netzole.org/css-padding/ https://www.netzole.org/css-padding/#respond Mon, 21 Dec 2020 06:47:18 +0000 https://www.netzole.com/?p=5944 CSS Paddings Properties If you want to display space around HTML elements or text, then you can use padding properties. Note that, the padding properties...

The post CSS Padding appeared first on Netzole.

]]> CSS Paddings Properties

If you want to display space around HTML elements or text, then you can use padding properties. Note that, the padding properties always work inside the any borders or HTML tags.

You can define the paddings for the each sides of an element such as the top, bottom, right, and left sides using the CSS padding properties like:

  1. padding-top
  2. padding-bottom
  3. padding-right
  4.  padding-left

Here are given below the values of the each padding properties:

  • % – we define a padding in % of the width of the containing element
  • length – we define padding  value in px, pt, cm, etc.
  • inherit – specifies that the padding always inherited from the parent element


Let’s see the given example to understand how padding properties works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
  padding-top: 115px;
  padding-bottom: 150px;
  padding-right: 120px;
  padding-left: 90px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">Here we use padding properties padding-top,padding-bottom,padding-left and padding-right in this paragraph.</p>
 
</body> 
</html>

 

Output

Here we use padding properties padding-top,padding-bottom,padding-left and padding-right in this paragraph.

 
Note: You can define negative values in paddinge properties.

padding – Shorthand Property

In padding shorthand property, you can combine all the padding properties in single property or single rule.
You can see here how it works:
If the CSS padding property has 4 values:

padding: 23px 45px 85px 110px;

  1. top padding is 23px
  2. right padding is 45px
  3. bottom padding is 88px
  4. left padding is 117px

Let’s see the given example to understand how padding shorthand property works:

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
  padding: 23px 45px 87px 117px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">Here we use padding shorthand property in this paragraph.</p>
 
</body> 
</html>

 

Output

Here we use padding shorthand property in this paragraph.

 

The post CSS Padding appeared first on Netzole.

]]> https://www.netzole.org/css-padding/feed/ 0 CSS Height and Width https://www.netzole.org/css-height-and-width/ https://www.netzole.org/css-height-and-width/#respond Mon, 21 Dec 2020 06:47:02 +0000 https://www.netzole.com/?p=5952 Setting the CSS Height and Width If you want to define the height and width of an element, then you can use height and width...

The post CSS Height and Width appeared first on Netzole.

]]> Setting the CSS Height and Width

If you want to define the height and width of an element, then you can use height and width properties.

The width/height properties do not cover margins, padding, or borders.

CSS height and width Values

Here are given below the values of the height and width properties:

  • auto – the browser deliberate the height and width value to apply
  • % – we define a height and width in % of the width of the containing element
  • length – we define height and width  value in px, pt, cm, etc.
  • inherit – specifies that the height and width always inherited from the parent element

CSS height and width Examples

Let’s see the given example to understand how width/height properties works:

Example #1

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: 400px;
 height: 250px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 250 pixels and a width of 400 pixels.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 250 pixels and a width of 400 pixels.

 

Example #2

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: auto;
 height: 150px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 150 pixels and a width of auto.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 250 pixels and a width of auto.

 

Example #3

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 width: 60%;
 height: 320px;
}
 
</style> 
</head> 
<body> 
<p class="bor-test">This paragraph has a height of 220 pixels and a width of 60%.</p>
 
</body> 
</html>

 

Output

This paragraph has a height of 220 pixels and a width of 60%.

The post CSS Height and Width appeared first on Netzole.

]]> https://www.netzole.org/css-height-and-width/feed/ 0