Web Designing Theory – Learn React, Python, HTML, CSS & PHP

      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="#home"> Home </li> <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> </bo...

          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"> <tr> <td>1</td...

            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:   T o set the width of the table 2. Padding:   T o set the space  between the border of each table cell and it's content . 3. Text-transform:    T o 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 c...

     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:   position: static | absolute | fixed | relative | sticky | initial | inherit;  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 s...

      Border bottom property 1. Border-bottom-style The Border bottom style property set a style of element bottom Border. Syntax  Rear: border-bottom-style: none hidden | dotted | dashed | solid | double groove ridge | inset | outset | initial | inherit; 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. Al...

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

  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 co...