List & Table of CSS

November 24, 2020
No Comments

CSS Lists

There are  2 varieties of list exist in CSS i.e. Unordered lists and Ordered Lists.

  •  Unordered Lists

 In unordered lists, the list things area unit marked with bullets.

  • Ordered Lists

 In ordered lists, the list things area unit marked with numbers and alphabet.

Syntax:– list-style-type: value;

 Here, area unit the subsequent price for list styling :

  • Circle
  • square
  • decimal , eg :1,2,3,etc
  • decimal-leading-zeroes , eg :01,02,03,04,etc
  • lower-roman
  • upper-roman
  • lower-alpha, eg : a,b,c,etc
  • upper-alpha, eg : A,B,C,etc

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Simple ordered & 
        Unordered lists</title>
        <style type="text/css">
            ul.unorder{
                list-style-type: square;
            }
            ol.order{
                list-style-type: upper-alpha;
            }
        </style>
    </head>
    <body>
        <p>Gurukulzone SRCS</p>
        <b>Example of ordered & Unordered lists</b>
        <h3>Unordered List</h3>
        <ul>
            <li>Ujjawal Saini</li>
            <li>Ankur Dhama</li>
            <li>Shashank Tiwari</li>
            <li>Monu Kumar</li>
        </ul>
        <ul class="unorder">
            <li>Ujjawal Saini</li>
            <li>Ankur Dhama</li>
            <li>Shashank Tiwari</li>
            <li>Monu Kumar</li>
        </ul>
        <h3>Ordered List</h3>
        <ol>
            <li>Ujjawal Saini</li>
            <li>Ankur Dhama</li>
            <li>Shashank Tiwari</li>
            <li>Monu Kumar</li>
        </ol>
        <ol class="order">
            <li>Ujjawal Saini</li>
            <li>Ankur Dhama</li>
            <li>Shashank Tiwari</li>
            <li>Monu Kumar</li>
        </ol>
    </body>
    </html>                       

Output:-

Styling Lists

The Styling list is employed to formatnig the list in CSS. totally different colours, borders, background, and paddings are often set for the lists.

 Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Simple ordered & 
        Unordered lists</title>
        <style type="text/css">
            ul.unorder{
                list-style:square; 
                background:skyblue; 
                padding:20px;
            }
            
        </style>
    </head>
    <body>
        <p>Gurukulzone SRCS</p>
        <b>Example of Unordered lists formatting</b>
        <h3>Unordered List</h3>
        
        <ul class="unorder">
            <li>Ujjawal Saini</li>
            <li>Ankur Dhama</li>
            <li>Shashank Tiwari</li>
            <li>Monu Kumar</li>
        </ul>
      
    </body>
    </html>         
                  

CSS Text Formatting

The CSS-text is titled with a number of the text data format properties. CSS text data format properties ar used to style the text, vogue the text, describe a handful of data format designs, etc. The properties offer you the visual illustration of the characters, spaces, words, paragraphs and plenty of additional.

List of CSS text Formationg properties

The following CSS Text data format properties are:-

  •  Text-Color
  •  Text-Alignment
  •  Text-Decoration
  •  Text-Transformation
  •  text-Indentation
  • Word-Spacing
  • Letter-Spacing
  • Line-Height

  • Text Color This property will be wont to modification the colour of the text. It will be outlined by victimization visual property.

 Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of text color</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="color: skyblue;">Hello SRCS 
        Team...</p>
        <p style="color: lightgreen;">Here is the 
        example of Text color...</p>
    </body>
    </html>

Output:-

  • Text Alignment

This property will be wont to modification the horizontal of the text. It will be outlined by victimization left, right, center, justify properties.

Code:-

  <!DOCTYPE html>
    <html>
    <head>
        <title>Example of text alignment</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="text-align:left;">Hello Team
        ...</p>
        <p style="text-align:center;">Here is the 
        SRCS Website gurukulzone...</p>
        <p style="text-align:right;">Online Tutorial 
        website...</p>
    </body>
    </html>

Output:-

  • Text Decoration

This property will be wont to beautify the text. It will be outlined by victimization underline, overline, line-through properties.

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of text decoration</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="text-decoration:line-through;">Hello Team
        ...</p>
        <p style="text-decoration:underline;">Here is the 
            SRCS Website gurukulzone...</p>
        <p style="text-decoration:overline;">Online Tutorial 
        website...</p>
    </body>
    </html>
                    

Output:-

  • Text Transformation

 This property will be wont to modification cases of the text. It will be outlined by victimization capitalize, uppercase, small properties.

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of text transformation</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="text-transform: capitalize;">Hello Team
        ...</p>
        <p style="text-transform: uppercase;">Here is the 
        SRCS Website gurukulzone...</p>
        <p style="text-transform: lowercase;">Online Tutorial
         website...</p>
    </body>
    </html>

Output:-

  • Text Indentation

 This property will be wont to indent the primary line of the text. It will be outlined by victimization PX, cm, Pt properties.

 Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Text Indentation</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="text-indent:20px;">Hello Team
        ...</p>
        <p style="text-indent:5cm;">Here is the 
        SRCS Website gurukulzone...</p>
        <p style="text-indent:30pt;">Online Tutorial
         website...</p>
    </body>
    </html>

Output:-

  • Word Spacing

This property will be wont to offer area between words. It will be outlined by victimization the word-spacing property.

Code:-

  <!DOCTYPE html>
    <html>
    <head>
        <title>Example of Word Spacing</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="word-spacing:5px;">Hello Team
        ...</p>
        <p style="word-spacing:10px;">Here is the 
        SRCS Website gurukulzone...</p>
        <p style="word-spacing:20px;">Online Tutorial
         website...</p>
    </body>
    </html>

Output:-

  • Letter Spacing

 This property will be wont to offer area between characters. It will be outlined by victimization the letter-spacing property.

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Letter Spacing</title>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <p style="letter-spacing:5px;">Hello Team
        ...</p>
        <p style="letter-spacing:10px;">Here is the 
        SRCS Website gurukulzone...</p>
        <p style="letter-spacing:20px;">Online Tutorial 
        website...</p>
    </body>
    </html>
                

Output:-

  • Line Height

This property will be wont to offer area between the lines. It will be outlined by victimization line-height property.

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Line Height</title>
        <style type="text/css">
            h2{
            line-height:2.6;
            }
            h5{
            line-height:140%;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Hello Team...</h2>
        <h5>Here is the SRCS 
        Website gurukulzone...</h5>
        
    </body>
    </html>
                       

Output:-