HEADER ADS 728X90

How To Use CSS List Property Explain | CSS Tutorial || BY CodePrime

css,css tutorial,css display property,list properties in css,css list style type property,css properties,css list style,css properties tutorial,css list-style-type property,display property in css,display property,css list style property,display property in css tutorial,css tutorial for beginners,css display property tutorial,css display property explained,css list shorthand property,list style type css,css list style type image, css tutorial,css tutorial for beginners,css,html css tutorial,html tutorial,tutorial css,html and css tutorial for beginners,html and css tutorial,html css,tutorial,tutorial de css,css tutorial hindi,simple css tutorial,css beginners tutorial,css grid,css html tutorial in hindi,css crash course,web development tutorial,css for beginners,html5 tutorial,css tutorial w3,css tutorial ita,bem css tutorial,css3 tutorial,css selectors, CSS-Tutorial,Latest-Posts,How To Use CSS List Property Explain,css list,list-style,list property,css basic tutorial,list-style-type,list-style-image,lis-style-position,codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post we are going to learn abot CSS List Property. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css list  property - By CoedPrime</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="title">CSS List Property</div>

    <p>Unorder List</p>
    <ul>
        <li>Helo</li>
        <li>Helo</li>
        <li>Helo</li>
        <li>Helo</li>
    </ul>

    <p>Order List</p>

    <ol>
        <li>Helo</li>
        <li>Helo</li>
        <li>Helo</li>
        <li>Helo</li>
    </ol>

     

</body>
</html>

CSS

*{
    font-family: sans-serif;
}
.title{
   font-size: 2rem;
   background: linear-gradient(45deg,#f09, #111);
   padding: 5px 10px;
   text-align: center;
   color: #fff;
   margin-top: 20px;
   text-transform: uppercase;
}


p{
    font-size: 1.5rem;
    background: linear-gradient(45deg,#f09, #111);
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
    text-transform: uppercase;
}

li{
    font-size: 2rem;

    list-style-type: square;
    /* list-style-position:inside; */
    /* list-style-image: url(/dimond-icon.jpg) ; */
    /* color: #f09; */
}

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram