Netzole https://www.netzole.org/ Tue, 22 Jul 2025 22:21:21 +0000 en-US hourly 1 Fix Google chrome updates are disabled by the administrator https://www.netzole.org/fix-google-chrome-updates-are-disabled-by-the-administrator/ Tue, 22 Jul 2025 22:21:11 +0000 https://www.netzole.org/?p=6795 How to fix updates are disabled by the administrator Google chrome Updated 2025 Fix Google Chrome updates are disabled by the administrator:- If you find...

The post Fix Google chrome updates are disabled by the administrator appeared first on Netzole.

]]>
How to fix updates are disabled by the administrator Google chrome Updated 2025

Fix Google Chrome updates are disabled by the administrator:-

If you find Google updates are disabled by the administrator and you are unable to update your Chrome browser,

Don’t worry Today I am going to show you How to Fix Google Chrome updates are disabled by the administrator?

It’s very simple

Open the Registry editor with regedit on the run.

Fix-Google-chrome-updates-are-disabled-by-the-administrator

Now navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Update

Fix-Google-chrome-updates-are-disabled-by-the-administrator

in the right-pane side double click on the UpdateDefault and change this value 0 to 1.

Fix-Google-chrome-updates-are-disabled-by-the-administrator

Now close the registry editor. it will start the updating your Google Chrome. Relaunch the chrome. Google Chrome is up-to-date.

Fix-Google-chrome-updates-are-disabled-by-the-administrator

The post Fix Google chrome updates are disabled by the administrator appeared first on Netzole.

]]>
Gzip Command in Linux https://www.netzole.org/gzip-command-in-linux/ Fri, 30 May 2025 22:17:13 +0000 https://www.netzole.org/?p=6781 The gzip command in Linux is used to compress files. It helps reduce the file size and saves space. It also makes transferring files faster....

The post Gzip Command in Linux appeared first on Netzole.

]]>
The gzip command in Linux is used to compress files. It helps reduce the file size and saves space. It also makes transferring files faster.

How to Use gzip

To compress a file, use this command:

To compress a file, use this command:

gzip filename

This command replaces the original file with a compressed file. The new file will have a .gz extension.

Example

gzip notes.txt

This will create a file named notes.txt.gz.

This will create a file named notes.txt.gz.

To Decompress a File

To get back the original file, use:

gunzip filename.gz

This will restore the original file and remove the .gz file.

View Contents Without Decompressing

You can view the content of a compressed file using:

zcat filename.gz

Compress Multiple Files

You can compress several files at once:

gzip file1.txt file2.txt file3.txt

This will create file1.txt.gz, file2.txt.gz, and file3.txt.gz.

Useful Options

-k: Keep the original file.

gzip -k file.txt

-d: Same as gunzip, to decompress.

gzip -d file.txt.gz

-r: Compress all files in a directory.

gzip -r myfolder/

Summary

gzip compresses files.

gunzip decompresses .gz files.

Use options to keep files, decompress, or work with folders.

gzip is a simple and fast way to handle file compression in Linux.

The post Gzip Command in Linux appeared first on Netzole.

]]>
Node.js Modules https://www.netzole.org/node-js-modules/ https://www.netzole.org/node-js-modules/#respond Tue, 28 Jan 2025 16:34:58 +0000 https://www.netzole.org/?p=25 In Simple Words, Node.js Modules are JavaScript files which contains different functionalities in each separate files. Modules are very useful to organise the code which...

The post Node.js Modules appeared first on Netzole.

]]>
In Simple Words, Node.js Modules are JavaScript files which contains different functionalities in each separate files. Modules are very useful to organise the code which makes debugging or future editing very easy. Node.js comes with various very useful Inbuilt modules which can be used for creating different functionalities.

Node.js Inbuilt Modules

Node.js inbuilt modules are lightweight and inbuilt with Node.js installations. You can use these Node.js Inbuilt Modules in your app without any installation.
Here is a list of the built-in modules of Node.js version 6.10.3:
assert :  Provides a set of assertion tests
buffer : To handle binary data
child_process : To run a child process
cluster : To split a single Node process into multiple processes
crypto : To handle OpenSSL cryptographic functions
dgram : Provides implementation of UDP datagram sockets
dns : To do DNS lookups and name resolution functions
events : To handle events
fs : To handle the file system
http : To make Node.js act as an HTTP server
https : To make Node.js act as an HTTPS server.
net : To create servers and clients
os : Provides information about the operation system
path : To handle file paths
querystring : To handle URL query strings
readline : To handle readable streams one line at the time
stream : To handle streaming data
string_decoder : To decode buffer objects into strings
timers : To execute a function after a given number of milliseconds
tls : To implement TLS and SSL protocols
tty : Provides classes used by a text terminal
url : To parse URL strings
util : To access utility functions
v8 : To access information about V8 (the JavaScript engine)
vm : To compile JavaScript code in a virtual machine
zlib : To compress or decompress files

How to include Node.js Module into the app:

We can include any of above module by using the require() function. for example:

var http = require('http');

We can include any of above module by this method we just need to change module name in place of http.

This is the full code to use http module to create http server

var http = require('http');

http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.end('Hello World!');
}).listen(8080);

In Next Tutorial we will learn how to create custom module at Node.js

The post Node.js Modules appeared first on Netzole.

]]> https://www.netzole.org/node-js-modules/feed/ 0 Nodejs Tutorial https://www.netzole.org/nodejs-tutorial/ https://www.netzole.org/nodejs-tutorial/#respond Tue, 28 Jan 2025 12:56:02 +0000 https://www.netzole.org/?p=23 Introduction to Node.js Node.js commonly used to run various build tools designed to automate the process of developing a modern JavaScript application. Node.js is an...

The post Nodejs Tutorial appeared first on Netzole.

]]>
Introduction to Node.js

Node.js commonly used to run various build tools designed to automate the process of developing a modern JavaScript application. Node.js is an fast and highly scalable open-source server side runtime environment built on Chrome’s V8 JavaScript engine. Node.js allows you to run JavaScript on the server. These Node.js tutorial provides basic and advanced concepts of Node.js and helps to beginners and professionals both to step by step learn node.js in easy and fast way.

Node.js runs single-threaded, non-blocking, asynchronously programming, which is very memory efficient. Node.js is particularly suited to building applications that require some form of real-time interaction or collaboration. It’s also a good fit for building APIs where you’re handling lots of requests that are I/O driven.

What Can Node.js Do?

Node.js can generate dynamic page content and can create, open, read, write, delete, and close files on the server. Node.js can collect form data and can add, delete, modify data in your database.

Prerequisites for learn node.js

You should have basic knowledge of html, css and javascript.

The post Nodejs Tutorial appeared first on Netzole.

]]>
https://www.netzole.org/nodejs-tutorial/feed/ 0
How to Download & Install Node.js – Step by Step Guide https://www.netzole.org/how-to-download-install-node-js-step-by-step-guide/ https://www.netzole.org/how-to-download-install-node-js-step-by-step-guide/#respond Tue, 28 Jan 2025 12:52:09 +0000 https://www.netzole.org/?p=21 In this Node.js tutorial we will learn step by step how to download Node.js and install Nodejs on different environment like Windows, Linux, Macos and...

The post How to Download & Install Node.js – Step by Step Guide appeared first on Netzole.

]]>
In this Node.js tutorial we will learn step by step how to download Node.js and install Nodejs on different environment like Windows, Linux, Macos and server.

Download node.js

You can download latest stable version of node.js from the node.js official website https://nodejs.org/en/
Once you open the website it will detect your operating system automatically and show you the correct version for your device. For example we opened the site from 64 bit Windows system so there is 64 bit node.js package available for download. If you are from 32 bit Windows or linux or Macos it will display version respectively. You can also download the other versions from the download page https://nodejs.org/en/download/
Download node.js

Install Node.js on Windows

In order to install Node.js on Windows you have to perform following actions:
Step 1 : Download the Node.js Windows Installer Package from the Node.js official website as per above.

Step 2 : After downloading the Node.js Windows Installer package, double click  on the downloaded msi file. Now installation process has started and you will see below screen.
Install Nodejs on Windows

Step 3 : Click on Next button, On the Next screen, Accept the terms in the license agreement and click on the Next button.
install Nodejs on Windows steps

Step 4 : On Next screen, choose the location where Node.js needs to be installed if want to install new location otherwise leave default location and then click on the Next button.
Install nodejs on windows steps

Step 5: Accept the default components as per below screenshot and click on the Next button. You don’t need to change anything at here.
Install Nodejs Windows

Step 6 : Now Nodejs is ready to install at your system. Click on the Install Button
Install nodejs windows

After clicking on the Next button, Node.js started to install at your system please keep waiting for finish installation

Install nodejs on windows step 7

Step 8 : Once Installation is done. Click on the finish button. Now Node.js is installed at your system successfully and ready to use for creating node.js applications.
Install Node.js on Windows last step

How to verify Installation

You can verify the installation or check the version of nodejs by the following steps. First open the command prompt at your desktop and type the command node -v  . If nodejs installed at your machine you will see the version of nodejs as per the below image:
verify nodejs install

Now we learn at next article, How to install nodejs at linux or ubuntu.

The post How to Download & Install Node.js – Step by Step Guide appeared first on Netzole.

]]>
https://www.netzole.org/how-to-download-install-node-js-step-by-step-guide/feed/ 0
How to Install Zip and Unzip in Linux https://www.netzole.org/how-to-install-zip-and-unzip-in-linux/ https://www.netzole.org/how-to-install-zip-and-unzip-in-linux/#respond Tue, 28 Jan 2025 12:08:13 +0000 https://www.netzole.org/?p=18 Zip utility tool used for compressing files and folder that makes the size smaller and fast transfer. Unzip are the other command-line utilities used for...

The post How to Install Zip and Unzip in Linux appeared first on Netzole.

]]>
Zip utility tool used for compressing files and folder that makes the size smaller and fast transfer. Unzip are the other command-line utilities used for decompressing zip files. In this article, we will learn how we can install the zip and unzip on various Linux distributions.

How to Install Zip and Unzip in Ubuntu/Debian/Mint

You can install zip by running this command on Ubuntu or Debian.

 $ sudo apt install zip

how to install zip linux

You can confirm the zip installation by running this command or above command. If it is installed it says zip already installed

 $ zip -v 

check zip install

After installing zip you can create zip by running this command at the root of target folder.

 $ zip -r filename.zip folder 

For installing Unzip utility, you can run following command.

 $ sudo apt install unzip 

You can confirm the unzip installation by running the same command

 $ unzip -v 

Newer version of Ubuntu/ Debian comes with preinstalled zip and unzip utilities

The post How to Install Zip and Unzip in Linux appeared first on Netzole.

]]>
https://www.netzole.org/how-to-install-zip-and-unzip-in-linux/feed/ 0
How to Download & Install PHP Step by Step Guide https://www.netzole.org/how-to-download-install-php-step-by-step-guide/ https://www.netzole.org/how-to-download-install-php-step-by-step-guide/#respond Tue, 28 Jan 2025 11:33:54 +0000 https://www.netzole.org/?p=13 In this tutorial, we learn how to install PHP on windows and how to install PHP with XAMPP. Install Wampserver or XAMPP on your Desktop...

The post How to Download & Install PHP Step by Step Guide appeared first on Netzole.

]]>

In this tutorial, we learn how to install PHP on windows and how to install PHP with XAMPP. Install Wampserver or XAMPP on your Desktop to quickly create your First web applications with Apache, PHP and a MySQL database.


 

  • Download latest version of PHP from http://www.php.net/downloads.php.
  • You can also download the .msi package i.e. Windows installer of PHP from sourceforge.net

For installing PHP, we will insist you to install AMP (Apache, MySQL, PHP) software stacks. It is available for all operating systems. And then we will see how to Install PHP on Windows and how to install PHP using XAMPP. There are lots of AMP options available in the market which are given below:

  • WAMP
  • LAMP
  • MAMP
  • SAMP
  • FAMP
  • XAMPP (Cross, Apache, MySQL, PHP, Perl)

Now we will see how to install PHP on windows and how to install PHP using XAMPP.


 

Setting PHP on Your Own Desktop

  • Install a web server on Your Own PC
  • Install PHP on Your Own PC
  • Install a database, such as MySQL on Your Own PC

 

Click Here to Download WAMP Server

Click Here to Download LAMP server

Click Here to Download XAMPP server

 


 

1. How To Download and Install PHP Using xampp Server Step by Step Guide on Windows

Now we will see how to install PHP using the XAMPP server in Windows.

In this PHP tutorial we will learn step by step how to download PHP and install PHP using XAMPP on different environment like Windows, Linux, Macos and server.

Download XAMPP in Window

You can download latest stable version of XAMPP from the bitnami.com official website https://bitnami.com

Once you open the website it will detect your operating system automatically and show you the correct version for your device. For example, We opened the site from 64 bit Windows systems so there is a 64 bit XAMPP package available for download. If you are from 32 bit Windows or Linux or Macos it will display the version respectively. You can also download the other versions from the download page Download | bitnami.com

Install PHP on Windows

In order to install PHP XAMPP on Windows you have to perform following actions:

Step 1 : Download the XAMPP Windows Installer Package from the bitnami.com official website as per above.

Step 2 : After downloading the XAMPP Windows Installer package, double click on the downloaded bitnami-xampp-1.0-1-windows-installer file. Now installation process has started and you will see below screen.


Step 3 :
Click on Next button, On the Next screen, Accept the terms in the license agreement and click on the Next button.

Step 4: On the Next screen, choose the location where XAMPP needs to be installed if want to install new location otherwise leave default location and then click on the Next button.

Step 5: Accept the default components as per below screen shot and click on the Next button. You don’t need to change anything in here.

Step 6: Now XAMPP is ready to install on your system. Click on the Install Button


After clicking on the Next button,XAMPP started to install at your system please keep waiting for finish installation

Step 7 : Once Installation is done. Click on the finish button. Now XAMPP is installed at your system successfully and ready to use for developing web sites.

How to verify Installation

You can verify the installation or check the version of xampp by the following steps. And run Apache and MYSQL services.

All done!

The post How to Download & Install PHP Step by Step Guide appeared first on Netzole.

]]>
https://www.netzole.org/how-to-download-install-php-step-by-step-guide/feed/ 0
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