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$

css box model-padding property

css box model-margin property

css button style

html button tag

css element selector

css text decoration

text properties in css

external css in html

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

css button style

CSS Margin Property

css box model margin property

mean html tag

head-section html

script element script element

html tag information html

static website

responsive website feature

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

css button style

css class selector

css id selector

CSS Class Selector

css-text-properties

External CSS

CSS button

CSS inline block

CSS Border Property

css element selector

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 border cell

css table property

css position property

css border bottom property

css box property

css inline block

css background property

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

READ MORE :-

html class attribute

html block and inline element

responsive image grid

background image in text html

html id attribute

split screen into two more color html

menu card html

css column gap property html

html table blog post

html table program

css id selector 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:-

script element script element html

html list html

add background image html

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>

Sunday, February 25, 2024

CSS box model-Border property

css box model-Border property

Example :-

css box model-Border property

READ MORE

Saturday, February 24, 2024

CSS Box -Padding Property

CSS Properties

CSS Box Model - padding

EXample :-

CSS Box Model - padding

Output :-

READ MORE

Tuesday, February 20, 2024

CSS Box Model -Margin Property

1] Margin :-

Margin

CSS Box Model -Margin

Example :-

CSS Box Model -Margin :-

Output:-

READ MORE

Friday, February 16, 2024

CSS Button Style

Example:-

CSS Shadow Button

Output:-

READ MORE

Html Button Tag

Html Button Tag

Output :-

READ MORE

css class selector

CSS Class Selector

Thursday, February 15, 2024

CSS ID Selector

Syntax :-

CSS id selector

CSS id selector

Read More :-

Tuesday, February 13, 2024

CSS Selector

Four type of css selectors

1] CSS Element Selector :-

CSS Element Selector :-

Program:-

CSS Element Selector :-

Output :-

READ MORE :-

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

READ MORE

Wednesday, February 7, 2024

1] text-align: justify