Wednesday, November 23, 2022

CSS Menu Design

Css menu design

Webpage menus play necessary part on the web. When designing menus, usability is the key. In this section we are going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS step by step. We assume that you have a basic knowledge of HTML and CSS.

A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements make perfect sense.

Create Navigation menu .

Example

<!DOCTYPE html>

<html>

<body>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href ="#contacts">Contacts</li>

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>

Create Navigation menu

output

Create Navigation menu (margins, padding)

2. Example

<!DOCTYPE html>

<html>

<head>

<style>

ul{

list-style-type: none;

margin: 0px;

padding: 0px;

</style>

</head>

<body>

<h1>college of Computer science</h1>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

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

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>

Create Navigation menu output

Vertical Navigation Bar

A vertical navigation bar is a collection of links on each page's left or right side. Merits of Vertical Navigation. A more considerable number of top-level linkages is possible.

Everything is apparent. While many of the pages on your website are hidden from view in drop-down menus in a horizontal menu, vertical menus let you list every page down the side of the page. Because of this, vertical menus are a fantastic alternative for lengthy, single-page websites and make navigating them easier.

Vertical Nevigation Bar Example

<!DOCTYPE html>

<html>

<head>

<style>

ul{

lilist-style-type: none;

margin: 0px;

padding:0px;

}

li a{

display:block;

background-color: #f09d28;

text-align: left;

text-decoration:none;

width:100px;

padding: 8px 10px;

color:yellow; }

</style>

</head>

<body>

<h1>College of Computer science</h1>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href="#downloads">Downloads</li>

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

</ul></body> </html>

Vertical Nevigation Bar output

Create a basic vertical Nevigation Bar with a background color and Change the background color of the when links when the user moves the mouse over them.

For Example

<!DOCTYPE html>

<html>

<head>

<style>

ul(list-style-type: none;

margin: 0px;

padding: 0px;

}

li a{

display:block;

background-color:#f09d28;

text-align:left;

text-decoration:none;

width:100px;

padding: 8px 10px;

color: yellow;

}

li a:hover

{

background-color:red;

opacity:0.8;

color:white; }

</style>

</head>

<body

<h1>College of Computer science</h1>

<h3> change the link color on hover </h3>

<ul>

<li><a href="#About">About us</li>

<li><a href="#courses">Courses</li>

<li><a href="#downloads">Downloads</li>

</ul> </body>

</html>

Output

Related post

background image html program

background color program

how to create a split screen 2/3

Tuesday, November 22, 2022

html Table Border

Border Cells

Border on empty cells

In any table, A cell that does not contain any content is known as an empty cell. If you have empty cells in your table, then you can use the empty-cells property to specify whether or not their borders should be shown. Since browsers treat empty cells in different ways, if you want to explicitly show or hide borders on any empty cells then you should use this property.

Type 3

1. Show: This shows the border of any empty cells.

2. hide: This hides the border of any empty cells

3. Inherit : if you have one table nested inside another

Border on empty cells Example

<html>

<head>

<style>

td { border: 1px solid #0088dd;

padding:15px;}

table.one { empty-cells: show; }

table.two { empty-cells: hide; }

</style>

</head>

<body>

<h2> empty-cells: show property</h2> <table class="one">

</table> <br> <h2> empty-cells:hide property</h2>

</html>

Border on empty cells output

Border-spacing & border-collapse

The border spacing property allows you to control the distance between adjacent cells. By defaul browsers often leave a small gap between each table cell, so if you want to increase or decrease this space then the border spacing property allows you to control the gap. The value of this property is usually specifted in pixels. You can specify two values if desired to specify separate numbers for horontal and vertical spacing.

Border-spacing property:

a)length:- It specifies the horizontal and vertical spacing between borders. If two length values are provided to this property, the first value sets the horizontal spacing and the second value sets the vertical spacing.

b)inherit:-It specifies that the value of the border-spacing property should be inherited from the parent element.

syntax

border-spacing: 15px 50px;

In the above syntax, the border-spacing property takes two values, 15pixles and 50pixles. The first value specifies the horizontal spacing and the second value specifies the vertical spacing.

When a border has been used on table cells, where two cells meet, the width of lines would be twice that of the outside edges. It is possible to collapse adjacent borders to prevent this using the border- collapse property.

Possible values

Collapse: We use border-collapse property to create a collapsed border in HTML. The border-collapse is a CSS property used to set the table borders should collapse into a single border or be separated with its own border in HTML. it sets a common border to all the cells of a table.

Separate: The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table> . This property applies only when border-collapse is separate. It sets the separate border for each cell of a table.

Inherit: it inherits the value of the border-collapse property from the parent element.

The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property.

Syntax:

table {border-collapse: separate;

}

Border-spacing & border-collapse Example

<style>

td {

background-color: pink;

padding: 15px; border: 2px solid #000000;

}

table.one { border-spacing: 5px 5px; } table.two { border-collapse: collapse; }

</Style>

</head>

<body>

<h2> border-spacing: 5px 5px;</h2>

</table>

<h2> border-collapse: collapse: </h2>

</table>

</body>

</html>

Border-spacing & border-collapse output

Table Layout property

The table layout property is used to specify how a table should appear in a web browser. In CSS, the table-layout property allows flexibility in positioning the tables, which means that you can easily move and place tables at different locations throughout the Web page. Using the table-layout property also decreases the loading time of the table, allowing the main content to appear before the graphics.

Auto: It refers to the layout in which a web browser automatically resizes a table according to its content. This is the default value of the table layout property.

Fixed: It refers to the layout in which a web browser reads only the first row of a table to determine the final layout of the table. It depends on the table width the width of the columns and border or cell spacing.

Syntax

Table {table-layout: auto;}

Table Layout property Example

<!Doctype html>

<Style>

table { border-collapse: collapse;

border:1px solid black;}

th, td {border-:1px solid black;}

table.a {table- layout: auto; width:180px;}

</Style></head><body>

<h3>The table-layout & caption side Property</h3>

<caption> Student Details</caption> <tr><th>Student ID</th>

<th>Student Name</th>

<th>Course</th></tr>

<td>Sumit</td>

</Body></html>

Table Layout property output

Related post

split a background into 2 color

how to apply image tag in html

html block and inline element

Monday, November 21, 2022

CSS Table property Web designing

CSS Table property

HTML table allow web development to arrange data into rows and columns. Styling a table with css can greatly improve it appearance.

CSS table (basic tag information)

1.Width: To set the width of the table

2. Padding: To set the space between the border of each table cell and it's content.

3. Text-transform: To convert the content of the table headers to uppercase.

4. letter-spacing, font-size: add additional styling to the contents of the table headers.

5. border-top, border-bottom: set borders above and below the table headers.

6. text-align: align the writing to the left of some table cells and to the right of the others.

7. background-color: change the background color of the alternative table rows.

8. Hover: highlight a table row when a user mouse goes over it.

CSS styling Table Tag

1.Give cells padding: if text in a table cell either touches a border ( or another cell) it becomes much harder to read. Adding padding helps to improve readability.

2. Distinguish heading: putting all table headings in bold makes them easier to read.you can also make headings uppercase and then either add a background color or an underline to clearly distinguish them from content.

3. Shade alternate rows: shading every other row can help users follow along the lines. use a subtle distinction from the normal color of the rows to keep the table looking clean.

4. Align numerals: You can use the text align property to align the content of any column that contains number to the right,so that large number are clearly distinguished from smaller ones.

Table Example

<!DOCKTYPE html>

<html>

<head>

<style>

body { font-family: Arial, Verdana, sans-serif; color: #111333;

}

table {

width: 600px; }

th, td {

padding: 7px 10px 10px 10px;}

th {

text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; border-top: 1px solid #999; text-align: left;

}

tr.even {background-color: #cccccc;}

tr.hover { background-color: #c3e6e5;}

marks {text-align: right;}

</style>

</head>

<body>

<h1>Topers of the Class in Subject wise</h1>

<table>

<th>Subject</th>

<th class="marks">Marks</th>

<th class="marks">Position</th>

</tr>

<tr>

<td>Neeraj</td>

<td>Mathematics</td>

<td class="marks">First</td>

</tr>

<td>poonam</td>

<td>Natural Science</td>

<td class="marks">First</td>

</tr>

<tr>

<td>History</td>

<td class="marks">First</td>

</tr>

<td>Physics</td>

<td class="marks">First</td>

</tr>

</body></html>

Table output

2. Table border

When you. build an HTML table without any border styles or attributes, browser display them without any border.To specify table border in css you can set the table border, head border, table description border etc.

Table background color: In css background color property is used to change the color of the table.The description border.

Table background color Example

<!DOCTYPE html>

<html>

<head>

<style>

table, tr, th, td{

border: 3px solid blue;

border-left-color:red;

border-right-color:green;

border-right-style: dashed: 10 border-bottom-style:dotted; }

table { 12 width:40%;

text-align:left;

background-color:yellow; }

</style>

</head> <body>

<h1>Example of Table border with color</h1> <table>

<tr><th>FirstName</th><th>LastName</th>

<th>Saving</th></tr>

<tr><td>Amit</td><td>Tiwari</td><td>5000</td></tr>

<tr><td>Parichary</td><td>Tiwari</td><td>10000</td></tr>

<tr><td>Ashish</td><td>Shukla</td><td>15000</td></tr>

</table> </body>

</html>

Table background color output

3.Table Border-Radius-property

It is used to make the corners of the table borders as rounded.

Table Border-Radius- property Example

<!DOCTYPE html>

<style>

table, tr, th, td{

border: 3px solid blue;

border-left-color:red;

border-right-color:green;

border-right-style:dashed;

border-bottom-style:dotted;

border-radius:50px; /* For change the table border*/ padding: 16px;

background-color:yellow;

width:40%; text-align:center;

</style>

</head> <body>

<h1>Example of Table border with color</h1>

<table>

<tr><th>FirstName</th><th>LastName</th><th>Saving</th></tr>

<tr><td>Amit</td><td>chavan</td><td>5000</td></tr>

<tr><td>Pratiksha</td><td>Tivari</td><td>10000</td></tr>

<tr><td>aradhy</td><td>mohite</td><td>15000</td></tr>

</table>

</body> </html>

Table Border-Radius property output

related Post :-

css menu design

Sunday, November 20, 2022

CSS position property Web designing

CSS positioning property

CSS position

The element's placement mechanism (static, fixed, relative, absolute, or sticky) is specified by the position attribute. The attributes of top, bottom, left, and right are used to position elements. but still until the position property set first, properties function. Additionally, their operations vary based on the value of the position.

Syntax:

There are important types of positioning method use for an element.

a. Static

b. Relative

c. absolute

d. fixed

e. Sticky

The position of top, bottom, right, and left are used to place elements h. But until the position property is set, the properties won't function. Additionally, it operates differently based on the position value.

1 . position: static

This is default value of position it means that if the position value for an element is not set, then it will be static. The left, right, top, bottom properties have no effect in the position.

Static position Example

<! Doctype html>

<style>

#box1 {

border-width: 10px;

border-style:ridged;

background-color: yellow;

height:100px;

border: dotted;

#box2{

border:2px dashed red;

padding: 50px;

background-color: gray;

height: 200px;

position: static;

}

</style>

</head>

<body>

<h1> Static positioned elements are positioned according to the normal flow of the web page.</h1>

<div id="box1">I am division 1, I am static positioned </div>

<div id="box2">I am division 2, I am also static positioned.</div>

</body></html>

Static position output

2. position:relative

The element positioned relative to normal position in the webpage. The left, right,top,bottom properties are use then to set it location on the webpage. The gap (space) created due to adjustment.

Position: relative Example

<! Doctype html><html>

#box1{

border: 10px dotted blue;

background-color:beige;

position: relative;

left: 60px;

top:50px;

width:200px;

height:200px;

}

#box2{

border:2px dashed red;

background-color:azure;

position: relative;

left:300px;

bottom:150px;

width:200px;

height:200px;

padding-left:20px;

padding-top: 20px;

}

</style> </head>

<body>

<h1> Relative positioned elements are positioned relative to its normal position. </h1>

<div id="box1"> I am box 1, I am relatively

positioned <br> (60px left and 50px top from my normal position).</div>

<div id="box2"> I am box 2, I am relatively positioned <br>(i.e. 300px left and 150px bottom from my normal position. </div>

</body>

</html>

Position:relative output

3. Position absolute

The element will be positioned relative to closest positioned ancestor (parent). The left, right, top, bottom properties are use to set the location of the element relative to closest positioned ancestor. No space (gap) is created due to this adjustment (setting value of left, right, top, and bottom).

Position absolute Example

<! Doctype html>

<style>

#box1{

background-color: yellow;

position: relative;

left: 40px;

top: 20px;

width:500px; height:300px;

border: 10px dashed blue; }

img {

position: absolute;

height:200px;

width:200px;

right:10px;

bottom:10px;

border: 10px dotted red;

}

</style> </head>

<body>

<h1> Absolute positioned element positioned <br>relative to its closest ancestor. </h1>

<div id="box1"> This is box 1, I am relatively positioned <br>(i.e. 40px 1- 50px top from my normal position.<br><br> This image is positioned absol i.e.10px from bottom, 10px from right to my (div) position because 1 ancestor of the image).

</body></html>

Position : absolute output

4. Position: Fixed

It is used to set element is fixed even if window scroll vertically or horizontally element is fixed place. No space (gap) is created due to this adjustment (setting value of left, right, top, and bottom).

Position Fixed Example

<!Doctype html>

div{

background-color: yellow;

position: fixed;

height: 60px; width:400px;

right:10px; bottom: 10px;

border :10px dotted blue;

}

</style> </head>

<body>

<h1>Example of CSS Position: FIXED </h1> <br><br><h1>See at bottom right corner of the screen. The fixed positioned div adjusted according to viewport of the screen (i.e. 10px right and 10px bottom from viewport of the screen.</h1>

<br> <br> <br> <br><br> <br> <br><br> <br> <br> <br> <br> <br><br><br><br><br><br><br>< br > <br> <br> <br> <br> <br> <br> <br> <br><br><br><br><br><br><br><br> <div><h1>Please Scroll the web page. </h1> </div> <br>< br ><br><br> </body> </html>

Position Fixed output

5.position: Sticky

This position value works like as a mixture of relative and fixed. It behaves l relative position before the page scrolls and then sticks on the page based on the value of top, le might and bottom.

position: Sticky Example

<style>

div {

background-color:yellow;

position: sticky:

height: 60px; width:400px:

left:0px;

top:0px;

border: 10px dotted blue;

</style></head>

<body>

<h1> Example of Sticky positioned elements</h1>

<h1>The below is sticky positioned div.</h1> <div><h1>Please Scroll the page</h1>

</div>

</body>

</html>

position: Sticky output

Saturday, November 19, 2022

CSS Border bottom property Web designing blog

Border bottom property

1. Border-bottom-style

The Border bottom style property set a style of element bottom Border.

Syntax

Border-bottom-style Example

<!DOCTYPE html>

<html>

<head>

<style>

h1{border-bottom-style: groove;

border-bottom-color: coral;

border-bottom-width: 7px;

}

div { border-style: solid;

border-bottom-style: groove;

border-bottom-color: coral;

border-bottom-width: 7px; }

</style>

</head>

<body>

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

<div> div element with groove bottom border.</div>

</body>

</html>

Border-bottom-style output

2. Border-bottom-color

The border-bottom-color property set the color of an element bottom border. Always declare to the border-style or the border-bottom-style property before the border- bottom-color property. An element must have a border before you can change the color.

Border-bottom-color Example

<! Doctype html>

<html>

<head>

<style>

h1 {border-bottom-style: solid;

border-bottom-color: pink;

}

h2 {

border-bottom-style: solid;

border-bottom-color: rgb(20, 176,76);}

h3 { border-bottom-style: solid;

border-bottom-color: hsla(89, 45%, 10%,0.5);}

h4 {

border-style: solid;

border-bottom-color: #92a8d1;}

</style>

</head>

<body>

<h1>A head with a colored bottom border</h1>

<h2>A head with a colored bottom border</h2>

<h3>A head with a colored bottom border</h3>

<h4>A head with a colored bottom border</h4>

</body>

</html>

Border-bottom-color output

3. border-top-right-radius Property:

The border-top-right-radius property define the radius of top-right corner. This property allow add rounded borders to elements.

Syntax:

border-top-right-radius: length | % [length | %] | Initial | inherit;

If you set two values first one is for the top border, and the second one for the right border. If second value is omitted it is copied from the first. If either length is zero corner is square, not rounded.

border-top-right-radius Example

<html>

<head>

<style>

#border1{

border: 2px solid yellow;

padding: 10px;

border-top-right-radius: 25px;

}

#border2{

border: 2px solid red;

padding: 10px;

border-top-right-radius: 50px 20px;}

#border3

{

border: 2px solid red;

padding: 10px;

border-top-left-radius: 25px;

border-top-right-radius: 25px;

border-bottom-left-radius: 25px;

border-bottom-right-radius: 25px;}

</style> </style></head> <body>

<h2>border-top-right-radius: 25px: </h2>

<p>The border-top-right-radius property defines radius of top-right corner. </p></div>

<h2>border-top-right-radius: 50px 20px:</h2> <div id="border2">

<p>If two values set; the first one is for the top border, the second one for the right border,</p></div><br>

<div id="border3">third division </div>

</body> </html>

border-top-right-radius Output

related post :-

html table border

html background color

create menu card

Thursday, November 17, 2022

Css Border bottom property

CSS Border Properties

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

There three border properties

The border-style-

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

The border-color-

Specifies the color of a border. The border-color property set the color of a element four borders. This property use from one to four value. If the border-color property has four value border-color blue green red pink top border is blue.

The border-width -

Specifies the width of a border.

border-style:

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

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>

<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

2. Border side of element

Example

<!DOCTYPE html>

<html>

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

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

p.c { border-style: dotted solid;}

p.d {border-style: dotted ;}

</style>

</head>

<p class="a"> http://webdesigningtheory.blogspot.com/</p>

<p class="b"> http://webdesigningtheory.blogspot.com/</p>

<p class="c"> http://webdesigningtheory.blogspot.com/</p>

<p class="d"> http://webdesigningtheory.blogspot.com/</p>

</body> </html>

Border side of element

output

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 head with a solid red bottom border</h1>

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

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

</body>

</html>

Border bottom property output

4. Border-bottom-width

border-bottom-width: - The border-bottom-width property set the width of element bottom border. Always declared border-style or border-bottom-style property before the border- bottom-width property. An element must have border before you 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 medium bottom or border</h1>

<div>div element is the medium bottom border.</div><br>

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

</body>

</html>

Border-bottome-width

output

lnline css in html

html iframe

html id attribute

Wednesday, November 16, 2022

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

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>

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

background image html table

design web page use html css

html table program

Tuesday, November 15, 2022

Css inline block

inline block

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>

<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

2.Demonstration

(inherit property value)

Demonstration

Example

<!DOCTYPE html>

<html>

<head>

<style>

body { display: inline; }

p{ display: inherit;}

</style> </head>

<body>

<p>The two paragraphs generates inline boxes, </p> <p>no distance between the two elements.</p>

</body>

</html>

Demonstration

output

3.Flex-direction property

flex-direction property specifies to the direction for the flexible. flex-direction 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>

</body>

</html>

ad

Wednesday, November 23, 2022

CSS Menu Design

Create Navigation menu .

Example

Create Navigation menu

output

Create Navigation menu (margins, padding)

2. Example

Create Navigation menu output

Vertical Navigation Bar

Vertical Nevigation Bar Example

Vertical Nevigation Bar output

For Example

Output

Tuesday, November 22, 2022

Border Cells

Border on empty cells

Type 3

1. Show: This shows the border of any empty cells.

2. hide: This hides the border of any empty cells

3. Inherit : if you have one table nested inside another

Border on empty cells Example

Border on empty cells output

Border-spacing & border-collapse

Border-spacing property:

a)length:- It specifies the horizontal and vertical spacing between borders. If two length values are provided to this property, the first value sets the horizontal spacing and the second value sets the vertical spacing.

b)inherit:-It specifies that the value of the border-spacing property should be inherited from the parent element.

syntax

Possible values

Inherit: it inherits the value of the border-collapse property from the parent element.

Syntax:

Border-spacing & border-collapse output

Table Layout property

Auto: It refers to the layout in which a web browser automatically resizes a table according to its content. This is the default value of the table layout property.

Fixed: It refers to the layout in which a web browser reads only the first row of a table to determine the final layout of the table. It depends on the table width the width of the columns and border or cell spacing.

Syntax

Table Layout property Example

Table Layout property output

Monday, November 21, 2022

CSS Table property

CSS table (basic tag information)

1.Width: To set the width of the table

2. Padding: To set the space between the border of each table cell and it's content.

3. Text-transform: To convert the content of the table headers to uppercase.

4. letter-spacing, font-size: add additional styling to the contents of the table headers.

5. border-top, border-bottom: set borders above and below the table headers.

7. background-color: change the background color of the alternative table rows.

8. Hover: highlight a table row when a user mouse goes over it.

CSS styling Table Tag

Sunday, November 20, 2022

CSS positioning property

CSS position

Syntax:

a. Static

b. Relative

c. absolute

d. fixed

e. Sticky

1 . position: static

Static position Example

Static position output

2. position:relative

Position: relative Example

Position:relative output

3. Position absolute

Position absolute Example

Position : absolute output

4. Position: Fixed

Position Fixed Example

Position Fixed output

5.position: Sticky

position: Sticky Example

position: Sticky output

Related post :-

Saturday, November 19, 2022

Border bottom property

1. Border-bottom-style

Syntax

Border-bottom-style Example