Thursday, November 17, 2022

Css Border bottom property Web designing


      CSS Border Properties


CSS border property


 CSS Border property allows you to customize the borders around HTML elements. It is a shorthand property to set individual border property values in a single place. You can set the thickness or width, color and style of each border. The border-color specifies the color of a border. The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values. The border-width specifies the width of a border.


There are mainly three border properties 


The border-style- 

Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. inset is a keyword to Border style and is used to draw border around a box.


The border-color- 

Specifies the color of a border. The border-color property sets the color of an element's four borders. This property can have from one to four values. If the border-color property has four values: border-color: red green blue pink; top border is red.

 The border-width -

 Specifies the width of a border. 


border-style:

 none /* Defines no border */ | solid | double | dotted | dashed | groove | inset | outset | ridge | hidden



1. Border style

 Example 

<!DOCTYPE html>

<html>

<head>

<style>

h1 {border: 5px solid red; }

 h2{ border: 5px double blue; }

h3{border: 5px dotted yellow; }

h4 {border: 5px dashed pink; }

h5 { border: 5px groove blue; }

h6 { border: 5px outset; }

 div { border-width:5px; border-style: inset;}

 p {border:5px ridge;} 

</style>

</head> 

<body>

solid double | dotted | dashed | groove | inset | outset | ridge

 <h1>Solid Border</h1>

 <h2>Double Border</h2>  

<h3>Dotted Border</h3>

 <h4>Dashed Border</h4>

 <h5>Groove Border</h5>

 <h6>Insert Border</h6>

<div>Inset Border</div>

<p> Ridge Border </p>

</body>

</html>

 

Border style values 

output 


Border style values


2. Border side of element 

Example 

<!DOCTYPE html>

<html>

<head> <style>

 p.one {border-style: dotted solid dashed double; }

 p.two { border-style: dotted solid dashed;} p.three { border-style: dotted solid;}

 p.four {border-style: dotted ;}

  </style>

</head>

<p class="one">This is some text in a paragraph.</p> 

<p class="two">This is some text in a paragraph.</p> 

 <p class="three">This is some text in a paragraph.</p> 

 <p class="four">This is some text in a paragraph.</p>

</body> </html>

Border side of element 

 output 

 

Border side of element


3. Border bottom property 

Example 

<!DOCTYPE html>

 <html>

 <head>

<style>

 h1 { border-bottom: 5px solid pink;}

 h2 { border-bottom: 4px dotted blue;}

div { border-bottom: double;}

</style>

</head>

 <body>

 <h1>A heading with a solid red bottom border</h1>

<h2>A heading with a dotted blue bottom border</h2> 

 <div>A div element with a double bottom border.</div>

</body>

</html>


Border bottom property output 


Border bottom property

4. Border-bottom-width

border-bottom-width: The border-bottom-width property sets the width of an element's bottom border. Always declare the border-style or the border-bottom-style property before the border- bottom-width property. An element must have borders before you can change the width.


Border bottom width 

Example

<!DOCTYPE html>

 <html>

<head>

<style>

h1 { border-bottom-style: solid; 

border-bottom-width: medium; }

 div { border-style: solid; 

border-bottom-width: thick;}

  p{ border-style: solid; border-bottom-width: 15px;}

</style>

</head>

 <body>

 <h1>A heading with a medium bottom border</h1>

 <div>A div element with a medium bottom border.</div><br>

 <p>This is medium bottom border using pixels</p>

 </body>

 </html>

Border-bottome-width

 output


Border-bottom-width




webdesigningtheory.blogspot.com

patterns attributes html

responsive website feature html

on No comments:

Wednesday, November 16, 2022

CSS Box property Web designing

 


CSS Box property 


CSS Box property



Box property

All Html element can be measured as boxes. In CSS the term "box model" is used when talking about design and layout. The CSS box model is basically a box that wraps around each HTML elements it consists of margins, borders, padding and action content. The image below illustration the box model


Details of the different parts: 

 

Margin :

The blank area around the border of an element is called margin. It is used to create an extra space around an element. The margin is transparent.


 Border :-

 A border that goes around the padding and content. One is a visual border in a document, sometimes a solid line, dotted or dashed line, or one made up of various objects, like flowers, baseballs, animals, or virtually any other object.  


Padding :-

 It is used to generate space around an element's content, inside of any defined borders. The padding is transparent, An element's padding is the space between its content and its border. The padding property is a shorthand property for padding-top. padding-right. padding-bottom.


Content :-

 The contents of box, where text and images appear. The content attribute gives the value associated with the http-equiv or name attribute.

box model allows us to attach a border around elements and to classify space between elements. 


CSS Box property

 Example 

<!DOCTYPE html>

 <html>

<head>

<style>

 div {

 background-color: lightblue:

width: 400px;

 border: 20px solid yellow;

 padding: 50px;

 margin: 50px;

 text-align: justify;

}

 </style>

</head> 

 <body>

 <h2> Welcome Toalaji Publication</h2> 17 <p> Here we see the demonstration of Box Model.</p>

<div>This text is written in the box or you can say that it is the text content of the box. The width of the box is 400px and the ineternal color is lightblue. We have added a 50px padding, 50px margin and a 20px yellow border.</div>

</body>

</html>


CSS Box property 

output 


CSS Box property

overflow: scroll

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

overflow: scroll 

Example 

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

background-color: purple;

width: 200px;

height: 70px;

overflow: scroll;

border: 5px solid black;

}

</style>

</head>

<body>

<h2>overflow: scroll:</h2>

<div class="ex1">

It Indicates that the content is clipped but scroll-bar is added to see the rest of the content.It Indicates that the content is clipped but scroll-bar is added to see the rest of the content.</div>

</body>

</html>


overflow: scroll 

output 


overflow: scroll

overflow: hidden

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area

overflow: hidden Example 

<!DOCTYPE html>

<html>

<head>

 <style>

div.ex2 {

background-color: yellow;

 width: 110px; 

height: 70px; 

overflow: hidden;

}

</style></head><body>

 <h2>overflow: hidden </h2> 

<div class="ex2">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>

</body>

</html>


overflow: hidden 

output 

overflow: hidden



overflow:auto

The auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

overflow:auto 

Example 

<html>
<head>
<style>
div.ex3 {
background-color: lightblue; 
width: 110px;
 height: 70px; 
overflow: auto;
}
</style></head>
<body>
<h2>overflow:auto </h2> 

<div class="ex2">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>
</body>
</html>



overflow:auto 

output 

overflow:auto



Overflow: visible (default)

By default, the overflow is visible , meaning that it is not clipped and it renders outside the element's box: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
 

Overflow: visible 

Example 

</html>
<head>
<Style>
 div.ex4 {
background-color: lightblue;
 width: 110px;
height: 70px; 
overflow: visible;
 border: 5px dotted black;
}
 </style>
</head>
<body>
<h2>overflow: visible</h2>
<div class="ex4">It Indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region. </div>

</body>

</html>

 

Overflow: visible 

 Output

Overflow: visible


html patterns attributes

table attributes tag html

html patterns attributes

on No comments:

Tuesday, November 15, 2022

Css inline block Web designing

    inline block


inline block/ output











1.display:inline-block

display:inline-block the top and bottom margins/paddings are respected, but wit display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line 14 <mead> break after the element, so the element can sit next to other elements.

Display inline - block

 Example 

 <!DOCTYPE html>

 <html>

 <head> 

 <style>

 nav {

 background-color: lightblue; 

list-style-type: none;

  text-align: center;

 margin: 0; 

padding: 0; 

}

.nav li {

 display: inline-block;

 font-size: 30px; 

padding: 30px;

Margin:20px;

}

 </style>

</head>

 <body>

 <h1>display: inline-block</h1>

 <ul class="nav">

 <li><a href="#home">Home</a></li>

<li><a href="#about">Projects</a></li> 

 <li><a href="#clients">Clients</a></li> 

<li><a href="#contact">Contact</a></li>

 </ul>

</body>

 </html>

display:inline-block

 output

 

Inline block




2.Demonstration 

(inherit property value)


Demonstration

 Example 

<!DOCTYPE html>

<html>

<head>

<style>

body { display: inline; }

 p{ display: inherit;}

</style> </head>

<body>

<p>These two paragraphs generates inline boxes, and it results in</p> <p>no distance between the two elements.</p>

</body>

</html>


Demonstration 

output


Demonstration inherit property use



3.Flex-direction property 

The flex-direction property specifies the direction of the flexible items. If the element is not a flexible item, the flex-direction property.

Flex-direction property 

Example 


<html>
<head>
<style>

#main {
width: 300px; 
height: 200px;
border: 1px solid #c3c3c3;
display:-webkit-flex: / Safari "/ -webkit-flex-direction:row -reverse; /* Safari 6.1+ "/ display: flex: flex-direction: row-reverse;
#main div {
width: 50px;
height: 50px;
} 
</style>
 </head>
 <body>
<h1>The flex-direction Property</h1>

<div id="main">
<div style="background-color:coral;">A</div>  
<div style="backgroundcolor:lightblue:">B</div>

<div style="background-color:khaki;">C</div>

<div style="background-color:pink;">D</div>

<div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen:;">F</div>

 </div>
</body>
</html>

Flex-direction property 

output 


Flex-direction property





VISIT THE LINK 

READ MORE 

css in combinators

type of css

list attributes tag

thought


on No comments:
Labels:
Subscribe to: Posts (Atom)