Web Designing Theory

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>

ad

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