Web Designing Theory

Friday, February 16, 2024

css class selector

1] css class selector write (.) character.

2] css class selector is a fundamental part of cascading style sheets target html elements

based on their class attribute.

Syntax :-

. class

{

text-align : center;

color :pink;

}

CSS Class Selector

Example :-

<!DOCTYPE html>
<html>
<head>
    <title>css class select </title>
    <style>
    .web 
    {
        text-align : center;
        color:yellowgreen;
    }
</style>
</head>
<body>
    <h2 class="web">
        hello https://webdesigningtheory.blogspot.com/ </h2>

        <h3>This is program of Css ID Selector</h3>
    </h2>
    
</body>
</html>

CSS Class Selector

Output :-

Related Post :-

javascript Tutorial

e-commerce project for student

simple login form in html

Thursday, February 15, 2024

css id selector

CSS ID Selector

1] css id selector attribute is the unique identifier in an html document.

2] id selector use # character.

3] css id selector is used to apply style specific HTML element.

Syntax :-

#id

{

// css property

}

CSS id selector

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>css id selector</title>
    <style>

        #web
        {
            text-align :center;
            color:brown;

        }
    </style>
</head>
<body>
    <h2 id="web">
        hello https://webdesigningtheory.blogspot.com/ </h2>

        <h3>This is program of Css ID Selector</h3>
    </h2>
    
</body>
</html>

CSS id selector

Output :-

Tuesday, February 13, 2024

css element selector

CSS Selector

1] css selector are used to select the content to style.

2] Selector are the part of css rule set.

3] css selector is a pattern used to select and style elements on webpage.

Four type of css selectors

1] CSS Element Selector

2] CSS ID Selector

3] CSS Class Selector

4] CSS Universal Selector

1] CSS Element Selector :-

1] Selects HTML elements based on their tag names

eg. ' h3 ' selects all ' <h3> ' elements.

CSS Element Selector :-

Program:-

<!DOCTYPE html>
<html>
<head>
    <title>css selector</title>
    <style>
        h3 
        {
               text-align : center;
               color:blueviolet;
        }
    </style>
</head>
<body>
    <h3>heading will be affected by style</h3>
    <p>css selector </p>
    <p>css element element</p>

    
</body>
</html>

CSS Element Selector :-

Output :-

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>

ad

Friday, February 16, 2024

css class selector

CSS Class Selector

Thursday, February 15, 2024

CSS ID Selector

Syntax :-

CSS id selector

CSS id selector

Related Post :-

Tuesday, February 13, 2024

CSS Selector

Four type of css selectors

1] CSS Element Selector :-

CSS Element Selector :-

Program:-

CSS Element Selector :-

Output :-

Related Post :-

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 :-