introduction-of-css

How to Set Shadow of Text | Cascading Style Sheet | Use of CSS With HTML

How to Set Text Shadow





If you want to learn that how can you use text shadow for your website or webpage then you should use text-shadow CSS property. Here you will get all information about text shadow property. Here we will describe it with example. Here some points are given below:

  • The text-shadow property applies shadow to text.
  • Text-shadow v-shadow blur color;

Properties:

Value Description
h-shadow Required. The position of horizontal shadow.
v-shadow Required. The position of vertical shadow.
Blur-radius Optional. The blur radius.
Color The color of shadow.





Syntax:

ElecmentSelector{

                                                text-shadow:20px 20px 5px gray;

                                }

Example:

<html>

    <head>

        <style type="text/css">

            h1{

                color:red;

                text-shadow:2px 4px 5px orange;

            }

        </style>

    </head>

    <body>

        <h1>WELCOME</h1>

    </body>

</html>





Output:

text-shadow



introduction-of-css

How To Italic Text in CSS | Use of CSS With HTML

How to Italic Text Using CSS

Like us on facebook to get more updates





If you want to decorate text for italic then you should use text-italic property. Here some points are given below for text-italic CSS property.

  • The font-style property is mostly used to specify italic text.
  • This property has following values:
    • Normal- The text is shown normally.
    • Italic- The text is shown in italic.





Syntax:

<style type=”text/css”>

                elementSelector{

                                font-style:italic;               

}

Example:

<html>

    <head>

        <style type="text/css">

            h1{

                font-style:italic;

            }

            h2{

                text-italic:normal;

            }

        </style>

    </head>

    <body>

        <h1>This is 1st heading.</h1>

        <h2>This is 2nd heading.</h2>

    </body>

</html>





Output:

text-italic-using-css



introduction-of-css

How To Underline Text Using CSS | Use of CSS With HTML

How To Underline Text Using CSS

Like us on facebook to get more updates.





If you want to learn that how can you underline text using CSS then you should read this article till end. Here we will explain you that how can you underline text using CSS.

Text Decoration:

The text-decoration property is used to set or remove decorations from text. Here text-decoration properties are given below which are use for underline text.

  • None
  • Overline
  • Line-through
  • Underline

Syntax:

ElementSelector{

                text-decoration:none;

                text-decoration:overline;

                text-decoration:line-through;

                text-decoration:underline;

}





Example:

<html>

    <head>

        <style type="text/css">

            h1{

                text-decoration:none;

            }

            h2{

                text-decoration:overline;

            }

            h3{

                text-decoration:line-through;

            }

            h4{

                text-decoration:underline;

            }

        </style>

    </head>

    <body>

        <h1>This is 1st heading.</h1>

        <h2>This is 2nd heading.</h2>

        <h3>This is 3rd heading.</h3>

        <h4>This is 4th heading.</h4>

    </body>

</html>





Output:

text-decorationIf you want to learn Java programming language then you should download this app Click Here




introduction-of-css

How To Set Text-Alignment in CSS | Use of CSS With HTML

How To Set Text-Alignment in CSS

Like us on facebook to get more updates.

 




  • The text-align property is used to set the horizontal of a text.
  • Text can be centered, or aligned to the left, or right, or justified.

Syntax:

h1{

text-align:center;

}





Property Values:

Value Description
left Align the text to the left
right Align the text to the right
center Align the text to the center
justify Stretches the lines (each line has equal width)
Initial Set to property to its default value
Inherit Inherits this property from its parent element





Example:

<html>

    <head>

        <style type="text/css">

            h1{

                text-align:right;

            }

            p{

                text-align:center;

            }

        </style>

        <title>Text Alignment</title>

    </head>

    <body>

        <h1>

            This is a heading.

        </h1>

        <p>

            This is a paragraph.

        </p>

    </body>

</html>





Output:

text-alignmentIf you want to learn Java programming language then you should download this app Click Here




introduction-of-css

Types of CSS | External CSS | Internal CSS | Inline CSS | Use of CSS With HTML

Types of CSS





types-of-css

  1. External CSS
  2. Internal CSS
  3. Inline CSS

1.External CSS

Here some points are given below for external CSS:

  • External style sheet is a separate file of CSS.
  • File must be saved with .css extension.
  • File contains no tag and only contains CSS code.
  • File can be used to apply on several html files.
  • External style sheet is useful when properties need to be applied on more than one web page on the site.

Example:

HTML file:

 

<html>

<head>

<link rel=”style sheet” type=”text/css” href=”mystyle.css” />

</head>

<body>

<h1> This is  heading. </h1>

<p> This is a paragraph. </p>

<p> This is second paragraph. </p>

</body>

</html>

CSS file (mystyle.css):

p{

color:blue;

}

h1{

color:red;

}


    1.  Internal CSS:
    • Internal style sheet means when CSS is included in the same html file.
    • <style> tag must be used to write CSS in html file.
    • <style> tag should be in <head> tag.
    • Type attribute of style tag specify the type of MIME type (text/css).
    • Internal style sheet is useful when page specific properties need to be applied.
    • Preference is given to internal style sheet over external style sheet.

    Syntax of internal css:

    <style type=”text/css”>

    ElementSelector{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    Example:

    <html>
    
    <head>
    
    <style type=”text/css”>
    
    h1{
    
    color:blue;
    
    font-style:italic;
    
    }
    
    </head>
    
    <body>
    
    <h1> This is  heading. </h1>
    
    <p> This is a paragraph. </p>
    
    <p> This is second paragraph. </p>
    
    </body>
    
    </html>
    





    3. Inline CSS

    • Style attribute can be used with tag representing html element.
    • The value of style attribute is any CSS property.
    • Each property name-value pair is terminated with a semicolon.
    • Inline style has more preference given than internal or external style.
    • Inline style is useful when element specific property needs to be applied.

    Example:

    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <p style=”color:gray; font-size:22px;”>
    
    This is a paragraph
    
    </p>
    
    </body>
    
    </html>




    introduction-of-css

    CSS Syntax | Cascading Style Sheet | Use of CSS with HTML

    CSS Syntax





    Elementselector{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    CSS helps to set properties in HTML tags.

    • Element selector is used to specify an HTML element or group of HTML elements on which properties are applied.
    • There are three ways to specify an element selector
      • Tag Name
      • ID Value
      • Class Value





    Tag Name:

    Here we set properties in HTML elements by Tag Name. Tag name selector set properties for all tags which are same. Here we write CSS code at a time and that CSS code applicable in same HTML elements.

    Example:-

    <html>

    <head>

    p{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    </head>

    <body>

    <p>

    …………………

    ………………….

    ………………….</p>

    </body>

    </html>



    ID Value:

    Here we set a unique id for a unique HTML element. And set CSS properties for a separate tag. If we have more than one HTML elements which are same and we want to set CSS property for a particular element then we use ID Value selector. ID value is prefixed with hash (#) symbol when mentioned in selector.

    Example:

    <html>

    <head>

    #p{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    </head>

    <body>

    <p>

    …….……………

    ………………….

    ………………….</p>

    <p id=”p1”>

    …………………

    ………………….

    ………………….</p>

    </body>

    </html>



    Class Value:

    Class value can be common to multiple heterogeneous HTMLS elements, which causes selection of more than one HTMLL elements.

    Example:

    <html>

    <head>

    #p{

    PropertyName:PropertyValue;

    PropertyName:PropertyValue;

    }

    </head>

    <body>

    <p class=”c1”>

    …..……………

    ………………….

    ………………….</p>

    <a class=”c2”>

    …….……………

    ………………….

    ………………….</a>

    <h1 class=”c3”>……………</h1>

    </body>

    </html>

    PropertyName:PropertyValue

    • PropertyName is the name of the CSS property name followed by colon (:) and then Property value.
    • We can write one or more property declaration in the block.