The z-index property specifies the stack order of an element. The z-index Property When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: Because the image has a… Read More »
Using width, max-width and margin: auto; As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set… Read More »
Table Borders To specify table borders in CSS, use the border property. The example below specifies a solid border for <table>, <th>, and <td> elements: Example <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid; } </style> </head> <body> <h2>Add a border to a table:</h2> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> … Read More »
HTML Lists and CSS List Properties In HTML, there are two main types of lists: unordered lists (<ul>) – the list items are marked with bullets ordered lists (<ol>) – the list items are marked with numbers or letters The CSS list properties allow you to: Set different list item markers for ordered lists Set… Read More »
Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Example <!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <h2>Style a link with a color</h2> <p><b><a href=”default.asp” target=”_blank”>This is a link</a></b></p> </body> </html> Result: Style a link with a color This is a link In addition, links can… Read More »
How To Add Icons The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS… Read More »
Text Color The color property is used to set the color of the text. The color is specified by: a color name – like “red” a HEX value – like “#ff0000” an RGB value – like “rgb(255,0,0)” Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined… Read More »
An outline is a line drawn outside the element’s border. CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”. CSS has the following outline properties: outline-style outline-color outline-width outline-offset outline CSS Outline Style The outline-style property specifies the style of the outline, and can have… Read More »
All HTML elements can be considered as boxes. The CSS Box Model In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the… Read More »
The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element. CSS Setting height and width The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It… Read More »