Thursday, February 8, 2024

css text-decoration

CSS Text-decoration

1] cascading style sheets (css) the text-decoration property is used to specify

the decoration added to text content.

2] It allows you to control aspects such as underlining , overline, line-through, none

1] Text decoration Property

1] text-decoration: overline;

2] text-decoration : underline;

3] text -decoration : line-through;

4] text-decoration :none;

1] Text-decoration : overline

1] Adds a line above the text;

Syntax :-

Text-decoration : overline;

Example :-

<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration:overline;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

Text-decoration : overline

Output:-

2] Text-decoration : underline

1] Adds a line beneath the text.

Syntax :-

Text-decoration : underline;

Example :-

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: underline ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

Text-decoration : underline

Output :-

3] text -decoration : line-through

1] Draws a line through the middle of the text.

Syntax :-

text -decoration : line-through;

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: line-through ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

Text -decoration : line-through

Output

4] text-decoration :none

1] No text decoration is applied.

Syntax :-

text-decoration :none

Example :-

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: none ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

text-decoration :none;

Output:-

Wednesday, February 7, 2024

css text-align

Text-align property

1] Text-align property in used to the horizontal alignment of text content element.

2] A text property includes value left and right ,center , justify.

3] The text-align property in css is used for the alignment of the text.

4] Use css property to set the horizontal alignment of a table -cell box or the block element .

1] text-align: justify

1] justify the text in the container.

2] spaces between word in each line so that the text aligns with both the left and right edges of the container.

Syntax :-

text-align: justify ;

Text-Align: justify

Example:-

<!DOCTYPE html>
<html>
<head>
      <title>text-align property = justify</title>
      <style>
            .justify {
                  text-align :justify;
                       }
      </style>
</head>
<body>
      <p class="justify"><B>
            Learn Programming Language<br>
      Learn to the this website https://webdesigningtheory.blogspot.
            com/ <B></p>
      
</body>
</html>

Text-Align: justify

Output:-

2] text-align: right

1] right align the text to the right edge of its container.

2] The text will align to the right.

Syntax :-

text-align: right;

Example:-

<!DOCTYPE html>
<html>
<head>
      <title>text-align property = right</title>
      <style>
            .right {
                  text-align :right;
                       }
      </style>
</head>
<body>
      <p class="right"><B>
            Learn Programming Language<br>
      Learn to the this website https://webdesigningtheory.blogspot.
            com/ <B></p>
      
</body>
</html>

text-align: right

Output

3] text-align: left

1] This value the text to the left edge of its container.

2] This in is the default alignment for most language

written left to right.

Syntax :- text-align: left;

text-align: left

Example :-

<!DOCTYPE html>
<html>
<head>
      <title>text-align property = left</title>
      <style>
            .left {
                  text-align :left;
                       }
      </style>
</head>
<body>
      <p class="left"><B>
            Learn Programming Language<br>
      Learn to the this website https://webdesigningtheory.blogspot.
            com/ <B></p>
      
</body>
</html>

text-align: left

Output

4] text-align: center

1] This value aligns the text in the center of its container along the horizontal axis.

Syntax :- text-align: center;

Example

<!DOCTYPE html>
<html>
<head>
      <title>text-align property = right</title>
      <style>
            .center{
                  text-align :center;
                       }
      </style>
</head>
<body>
      <p class="center"><B>
            Learn Programming Language<br>
      Learn to the this website https://webdesigningtheory.blogspot.
            com/ <B></p>
      
</body>
</html>

text-align: center

output

Monday, February 5, 2024

text properties in css

Text properties in css

1] This css property allows us to change the case of the text.

2] used to control the text capitalization.

3] css property can be used to make the appearance of next

all-lowercase and ,all uppercase can first character each word uppercase.

Text properties

1] text-transform : uppercase;

2] text-transform : lowercase;

3] text-transform : capitalize;

1) text-transform : uppercase;

Transforms all characters to uppercase.

Example :-

<!DOCTYPE html>
<html>
<head>
   
      <title>css text-transform property</title>
      <style>
             p
             {
                  text-transform:uppercase;
             }

      </style>
</head>
<body>
      <h1>Learn Programming Language</h1>

      <p>Learn to the this website https://webdesigningtheory.blogspot.com/
       </p>
      
</body>
</html>

Output :-

2) Text-transform : lowercase;

Transforms all characters to lowercase.

Example:-

<!DOCTYPE html>
<html>
<head>
   
      <title>css text-transform property</title>
      <style>
             p
             {
                  text-transform:lowercase;
             }

      </style>
</head>
<body>
      <h1>Learn Programming Language</h1>

      <p><b>Learn to the this website https://webdesigningtheory.blogspot.
       com/</b></p>
      
</body>
</html>

Output :-

3) Text-transform : capitalize;

Transforms to the first character of each the word to uppercase and

transforms all other characters to lowercase.

Example :-

<!DOCTYPE html>
<html>
<head>
   
      <title>css text-transform property</title>
      <style>
             p
             {
                  text-transform:capitalize;
             }

      </style>
</head>
<body>
      <h1>Learn Programming Language</h1>

      <p><b>Learn to the this website https://webdesigningtheory.blogspot.
       com/</b></p>
      
</body>
</html>

Output :-

how to create home page design

php program to print hollow pyramid star pattern

css box padding property

Sunday, February 4, 2024

external css in html

External CSS

1] refers to that are store that are stored in separate file.

2] External CSS linked to HTML documents using the '<link> ' element.

3] External css method allows for the separation of the presentation (style) from the

content ( )

4] External css is use easier to manage and maintain large-scale website.

5] Create a css file Save your css rules in a separate file with a ' .css ' extension.

Example - file name :- ' '

External css

Example :-

7] Link the css file to your Html document :-

1] <head> section of your html document add.

2] <link> element with the ' rel ' attribute set to " stylesheet " and .

3] ' href ' attribute pointing to the location of your css file.

External html

Example :-

html code
<!DOCTYPE html>
<html>
<head>
      <title>External CSS</title>
  <link rel ="stylesheet" href="styles.css">
</head>
<body>
<div> 
        <h1>Learn programming Language</h1>
        <p> easy to undestand html ,css
 js in webdesigningtheory.blogspot.com</p>
    
    </div>
</body>
</html>

External CSS

Example :-

/* style.css */
body
{
    font-family: sans-serif;
    background-color:palevioletred;
}
h1
{
    color :aqua;
 }
 h2
{
    color:antiquewhite;
 }
.container 
{
    width: 80%;
    margin:auto;
}

External CSS

Output :-

html Dom getElementsByClassName()

php $_POST Method

how to create a order form

inline css in html

Inline css

1] inline css use of applying CSS styling directly with HTML.

2] inline css using html element using " style "attribute

3] inline css used apply unique to a single html element.

4] inline css define individual element.

Inline CSS

Example :-

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <title>internal css</title>
</head>
<body>
    <h1 style="color:rgb(255, 0, 51);
         font-size:50px;
         text-align :center; ">
          HTML</h1>
    <p style="font-size:40px;">
        Hypertext text markup language </p>

    <h1 style="color:aquamarine;
       font-size:50px;
       text-align:center;">
       CSS</h1>

    <P style="font-size :40px;">Cascading style sheet </P>
    
    <a href="#" >webdesigningtheory.blogspot.com</a>
    
</body>
</html>

ad

Thursday, February 8, 2024

css text-decoration

1] Text decoration Property

1] Text-decoration : overline

Syntax :-

Example :-

Text-decoration : overline

Output:-

2] Text-decoration : underline

1] Adds a line beneath the text.

Syntax :-

Example :-

Text-decoration : underline

Output :-

3] text -decoration : line-through

Syntax :-

text -decoration : line-through;

Example:-

Text -decoration : line-through

Output

4] text-decoration :none

Syntax :-

text-decoration :none

Example :-

text-decoration :none;

Output:-

Related Post :-

Wednesday, February 7, 2024

1] text-align: justify

Syntax :-

text-align: justify ;

Text-Align: justify

Example:-

Text-Align: justify

Output:-

Syntax :-

text-align: right;

text-align: right

Output

3] text-align: left

text-align: left

text-align: left

Syntax :- text-align: center;

Example

text-align: center

output

Related Post :-

Monday, February 5, 2024

Text properties in css

Output :-

Example:-

3) Text-transform : capitalize;

Example :-

Output :-

Sunday, February 4, 2024

External CSS

External css

Example :-

Example :-

External CSS

Example :-

External CSS

Output :-

Related Post :-

Inline css

Inline CSS

Example :-

Inline CSS

Output:-

Related Post :-