Web Designing Theory

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>

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