learn programming language: February 2024

Sunday, February 25, 2024

css border property

CSS box model-Border property

1] The border-top property in css is shorthand property that allows.

2] Set the width, style, and color of the top border of an element in a single declaration.

3] Simplifies the process of styling the top border by combining several individual border

properties :-

1] border-Top

2] border-Bottom

3] border-right

4] border-left

1] border -top Property :-

1] border-top-width :- 1] property sets the width of the top border.

2] specify the width using values like pixels and percentages.

2] border-top-style :- 1] property sets the style of the top border of an element.

2] choose various styles as solid, dashed, dotted, double etc

3] border-top-color :- 1] property sets th color of the top border.

2] specify the color using color name RGB values etc.

css box model-Border property

Example :-

<html>
<head>
<title>Padding </title>
<style>
h3
{
background-color: rgb(228, 239, 233);
color: rgb(221, 56, 202);
}
.main
{
border-top :2px solid ;
border-top-width :2px;
border-top-style:dotted;
border-top-color:crimson;
}
</style>
</head>
<body>
<h3>css box model :- css padding property<br>(padding-top ,
padding-left, padding-right, padding-bottom )</h3>
<p class="main">Learn for the https://webdesigningtheory.blogspot.com/
</p>
</body>
</html>

css box model-Border property

Output :-

$css box model-Border property \output$

Saturday, February 24, 2024

css box padding property

CSS Box -Padding Property

1] padding is the space between the content and border of the element.

2] It provides internal spacing within the element

CSS Properties

1] padding-top

2] padding-right

3] padding-bottom

4] padding-left

CSS Box Model - padding

EXample :-

<html>    
<head>
        <title>Padding </title>
        <style>
h3
{
    background-color: rgb(228, 239, 233);
    color: rgb(221, 56, 202);
}
.main
{
    border: 2px solid black;
    padding-right:100px;
    padding-right:100px;
    padding-top:52px;
    padding-bottom:52px;
    color:rgb(255, 0, 106);
}
</style>
</head>
<body>
<h3>css box model :- css padding property<br>(padding-top , padding-left,
 padding-right, padding-bottom )</h3>
 <p class="main">Learn for the https://webdesigningtheory.blogspot.com/ </p>
</body>
</html>

CSS Box Model - padding

Output :-

Tuesday, February 20, 2024

CSS Box margin property

CSS Box Model -Margin Property

1] css box model is a fundamental concept in web design that describes how elements on a webpage

2] css box model consists of components including content, margin, border, padding .

CSS box model explain

1] Margin :-

1] Margin property is use create space around html element.

2] Margin property CSS individual sides top, right, bottom, left

Margin

1] Margin-top :- used space to set left margin element.

2] Margin-right :- use space to set left margin element.

3] Margin-left :- used space to set left margin of element.

4] Margin-bottom :- used space to set bottom margin element.

CSS Box Model -Margin

Example :-

<!DOCTYPE html>
<html>
<head>
    <title> css box model "margin"</title>
<style>
    h3
    {
        background-color: rgb(0, 255, 110);
        color: rgb(212, 48, 19);
    }
    .main
    {
        margin-left:100px;
        margin-right:100px;
        margin-top:52px;
        margin-bottom:52px;
        color:blue;
    }
    </style>
</head>
<body>
    <h3>css box model :- css Margin property<br>(margin-top ,
 margin-left, margin-right, margin-bottom )</h3>
     <p class="main">Learn for the https://webdesigningtheory.blogspot.com/ </p>
</body>
</html>

CSS Box Model -Margin :-

Output:-

Friday, February 16, 2024

css button style

CSS Button Style

Example:-

  
  <html>
    <head><title>html shadow button</title>
    <style>
        .btn-shadow1 
        {
            background-color:rgb(63, 61, 188);
            border-radius: 10px;
            color:aliceblue;
            padding:15px 30px;
            font-size:16px;
            box-shadow:1px 1px 3px 3px palevioletred;
            


        }
    </style>
    </head>
    <body> 
        <button class="btn-shadow1" onclick="alert('hi friends')">
<B>Shadow Button</B></button>
    </body>
  </html>

CSS Shadow Button

Output:-

html Button tag

css class selector

css id selector

text align css

inline css html

internal css html

css introduction html

image resizer

html Button tag

Html Button Tag

1] <Button> tag creates a clickable button.

2] The type="button" attribute specifies the button.

3] The text "click Me" content of the button.

4] button can trigger java Script events / perform action defined the web page.

Html Button Tag

Example :-

<!DOCTYPE html>
<html>
    <head>
        <title>button tag</title>
    </head>
    <body>
        <h2>Html Button Tag </h2>
        <button type ="button" onclick="alert('hi friends')" >Click Me</button>
    </body>
</html>

Html Button Tag

Output :-

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

Sunday, February 25, 2024

CSS box model-Border property

css box model-Border property

Example :-

css box model-Border property

Related Post :-

Saturday, February 24, 2024

CSS Box -Padding Property

CSS Properties

CSS Box Model - padding

EXample :-

CSS Box Model - padding

Output :-

Related Post :-

Tuesday, February 20, 2024

CSS Box Model -Margin Property

1] Margin :-

Margin

CSS Box Model -Margin

Example :-

CSS Box Model -Margin :-

Output:-

Related Post :-

Friday, February 16, 2024

CSS Button Style

Example:-

CSS Shadow Button

Output:-

READ MORE

Html Button Tag

Html Button Tag

Output :-

related Post :-

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