revision:
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is "block" or "inline".
It stretches out to the left and right as far as it can.
Examples of block-level elements:<div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
Examples of inline elements:<span>, <a>, <img>
"Display: none;" is commonly used with JavaScript to hide and show elements without deleting and recreating them. The <script> element uses "display: none;" as default.
Every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. A common example is making inline <li> elements for horizontal menus.
Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with "display: block;" is not allowed to have other block elements inside it.
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there.
"visibility:hidden;" also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout.
With "display: inline-block", the top and bottom margins/paddings are respected, but with "display: inline" they are not.
Compared to "display: block", the major difference is that "display: inline-block" does not add a line-break after the element, so the element can sit next to other elements.
Using inline-block to create navigation links: one common use for "display: inline-block" is to display list items horizontally instead of vertically.
bottom - sets the bottom margin edge for a positioned box
clip - clips an absolutely positioned element
left - sets the left margin edge for a positioned box
position - specifies the type of positioning for an element
right - sets the right margin edge for a positioned box
top - sets the top margin edge for a positioned box
z-index - sets the stack order of an element
Elements are positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
HTML elements are "positioned static" by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with "position: static;" is not positioned in any special way; it is always positioned according to the normal flow of the page.
An element with "position: fixed;" is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
An element with "position: absolute;" is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: a "positioned" element is one whose position is anything except static.
An element with "position: relative;" is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Other content will not be adjusted to fit into any gap left by the element.
An element with "position: sticky;" is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix. You must also specify at least one of top, right, bottom or left for sticky positioning to work.
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.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
This happens when the content of an element is too big to fit in the specified area.
Note: The overflow property only works for block elements with a specified height.
visible - by default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box.
hidden - with the hidden value, the overflow is clipped, and the rest of the content is hidden.
scroll - setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
auto - the auto value is similar to scroll, but it adds scrollbars only when necessary.
These properties specify whether to change the overflow of content just horizontally or vertically (or both):
"overflow-x" specifies what to do with the left/right edges of the content.
"overflow-y" specifies what to do with the top/bottom edges of the content.
The float property (= "float:") is used for positioning and formatting content: e.g. let an image float left to the text in a container.
The "float property" can have one of the following values:
left - the element floats to the left of its container;
right - the element floats to the right of its container;
none - the element does not float (will be displayed just where it occurs in the text); this is default;
inherit - the element inherits the float value of its parent.
In its simplest use, the float property can be used to wrap text around images.
The "clear property" can have one of the following values:
none - allows floating elements on both sides; this is default;
left - no floating elements allowed on the left side;
right - no floating elements allowed on the right side;
both - no floating elements allowed on either the left or the right side;
inherit - the element inherits the clear value of its parent.
The most common way to use the "clear property" is after you have used a "float property" on an element.
When clearing floats, you should match the clear to the "float:". If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
The clearfix hack: if an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container.
Then we can add "overflow: auto;" to the containing element to fix this problem. The "overflow: auto" clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars).
The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages: ".clearfix {overflow: auto;}".
To horizontally center a block element (like <div>), use "margin: auto;". Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins.
Note: center aligning has no effect if the width property is not set (or set to 100%).
Center align text: to just center the text inside an element, use "text-align: center;".
Center an image: to center an image, set left and right margin to auto and make it into a block element.
Center vertically - using padding: there are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding. To center both vertically and horizontally, use padding and text-align: center.
Center vertically - using position and transform: if padding and line-height are not options, another solution is to use positioning and the transform property.
Center vertically - using Flexbox: you can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions.
Left and right align - using position: one method for aligning elements is to use "position:absolute;".
Note: absolute positioned elements are removed from the normal flow, and can overlap elements.
Left and right align - using float: another method for aligning elements is to use the "float property".
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins.
Note: a problem with the <div> element occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.
Using "max-width" instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices.
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 (size, color, shadow, etc.)
Font Awesome icons: to use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:<script src="https://kit.fontawesome.com/yourcode.js"></script>
Bootstrap icons: to use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Google icons: to use the Google icons, add the following line inside the <head> section of your HTML page:<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1/a:link - a normal, unvisited link,
2/ a:visited - a link the user has visited,
3/ a:hover - a link when the user mouses over it,
4/ a:active - a link the moment it is clicked.
When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited, a:active MUST come after a:hover.
The "text-decoration property" is mostly used to remove underlines from links.
The "background-color property" can be used to specify a background color for links.
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:
1/ set different list item markers for ordered lists,
2/ set different list item markers for unordered lists,
3/ set an image as the list item marker,
4/ add background colors to lists and list items
Different list item markers : the "list-style-type property" specifies the type of list item marker: circle, square, upper-roman, lower-alpha.
An image as the list item marker : the "list-style-image property" specifies an image as the list item marker.
Position the list item markers : the "list-style-position property" specifies the position of the list-item markers (bullet points):
1/ "list-style-position: outside;" means that the bullet points will be outside the list item.; the start of each line of a list item will be aligned vertically.
2/ "list-style-position: inside;" means that the bullet points will be inside the list item; as it is part of the list item, it will be part of the text and push the text at the start.
Remove default settings : the "list-style-type:none property" can also be used to remove the markers/bullets.
Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>.
List - shorthand property: the list-style property is a shorthand property. It is used to set all the list properties in one declaration.
When using the shorthand property, the order of the property values are: list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed), list-style-position (specifies whether the list-item markers should appear inside or outside the content flow), list-style-image (specifies an image as the list item marker).
If one of the property values above are missing, the default value for the missing property will be inserted, if any.
Lists can also be styled with colors, to make them look a little more interesting. Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items.
Table borders: to specify table borders in CSS, use the border property.
Full-width table: if you need a table that should span the entire screen (full-width), add width: 100% to the <table> element:
Collapse table borders: the border-collapse property sets whether the table borders should be collapsed into a single border.
CSS table size: the width and height of a table are defined by the width and height properties. To create a table that should only span half the page, use width: 50%.
CSS table alignment: the text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center.
To left-align the content, force the alignment of <th> elements to be left-aligned, with the text-align: left property.
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
CSS table style: to control the space between the border and the content in a table, use the padding property on <td> and <th> elements. Add the border-bottom property to <th> and <td> for horizontal dividers. Use the :hover selector on <tr> to highlight table rows on mouse over. For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows.
CSS responsive table: a responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive.
<div class="parent blue">
<div class="child box coral" contenteditable>:)</div>
</div>
<style>
.parent {display: grid; place-items: center; background: lightblue; width: 30vw; height: 20vh; resize: both; overflow: auto;}
.child {padding: 0.5vw;border-radius: 1vw;border: 1px solid red;background: lightpink; font-size: 2vw; text-align: center;}
</style>
<div class="parent1 white">
<div class="box green">1</div>
<div class="box green">2</div>
<div class="box green">3</div>
</div>
<style>
.parent1 {display: flex;flex-wrap: wrap; justify-content: center;}
.box {flex: 1 1 150px/* stretching; */; /*flex: 0 1 150px /* no stretching */; margin: 5px; border: 1px solid red;
background: lightpink; font-size: 2vw; text-align: center;}
</style>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
<div class="ex3">
<div class="sidebar" contenteditable>Min: 5vw <br/> Max: 25% </div>
<p class="content" contenteditable>Lorem ipsum dolor sit ... ex iusto tempora animi quibusdam porro?</p>
</div>
<style>
.ex3 {display: grid; grid-template-columns: minmax(5vw, 25%) 1fr; padding: 0; margin: 0;}
.ex3 .sidebar {height: 10vh; background: lightpink; font-size: 1vw; text-align: center;}
.content {padding: 2vw;}
</style>
<div class="ex4">
<header><h1>Header.com</h1></header>
<main></main>
<footer>Footer Content — Header.com 2020</footer>
</div>
<style>
.ex4 {display: grid;height: 25vh; grid-template-rows: auto 1fr auto;}
.ex4 header{background: lightpink;padding: 1vw;}
.ex4 main {background: coral;}
.ex4 footer{background: wheat; padding: 1vw; text-align: center;}
</style>
<div class="ex5">
<header><h3 contenteditable>Header.com</h3></header>
<div class="left-sidebar" contenteditable>Left Sidebar</div>
<main contenteditable>Main</main>
<div class="right-sidebar" contenteditable>Right Sidebar</div>
<footer contenteditable>Footer Content — Header.com 2020</footer>
</div>
<style>
.ex5{display: grid; height: 30vh; grid-template: auto 1fr auto / auto 1fr auto}
.ex5 header {background: lightpink; padding: 2vw; grid-column: 1 / 4;}
.ex5 .left-sidebar{background: lightblue; grid-column: 1 / 2;}
.ex5 main {background: coral; grid-column: 2 / 3;}
.ex5 .right-sidebar {background: yellow; grid-column: 3 / 4;}
.ex5 .left-sidebar, .ex5 .right-sidebar{padding: 1vw;}
.ex5 footer{background: wheat; padding: 2vw; text-align: center; grid-column: 1 / 4;}
</style>
<div class="ex6">
<div class="span-12">Span 12</div>
<div class="span-6">Span 6</div>
<div class="span-4">Span 4</div>
<div class="span-2">Span 2</div>
</div>
<style>
.ex6 {display: grid; height: 30vh; grid-template-columns: repeat(12, 1fr);}
.ex6 div{display: grid; place-items: center;}
.span-12 {background: lightpink; grid-column: 1 / 13;}
.span-6 {background: lightblue; grid-column: 1 / 7;}
.span-4 {background: coral; grid-column: 4 / 9;}
.span-2 {background: yellow; grid-column: 3 / 5;}
</style>
<div class="ex7">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<style>
.ex7 {display: grid; height: 25vh; grid-gap: 1vw; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.ex7 div {display: grid; place-items: center; background: lightpink;}
</style>
Medium length description. Let's add a few more words here.
Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.
Short Description.
<div class="ex8">
<div class="card">
<h3>Title - Card 1</h3>
<p>Medium length description. Let's add a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 2</h3>
<p>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<div class="visual"></div>
</div>
<div class="card">
<h3>Title - Card 3
<p>Short Description.</p>
<div class="visual"></div>
</div>
</div>
<style>
.ex8 {display: grid; grid-gap: 1vw; grid-template-columns: repeat(3, 1fr);}
.visual {height: 10vh; width: 100%; background: wheat; margin: 0.5rem 0;}
.card {display: flex; flex-direction: column; justify-content: space-between;
background: lightpink; padding: 1vw;}
h3 {font-size: 1vw;}
</style>
Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eveniet beatae veritatis saepe corporis voluptates illo placeat maxime sapiente. Sit facere cumque quidem ad quo, dolores pariatur repudiandae ullam animi?
<div class="ex9">
<div class="card1">
<h3>Title Here</h3>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eveniet beatae veritatis saepe corporis voluptates illo
placeat maxime sapiente. Sit facere cumque quidem ad quo, dolores pariatur repudiandae ullam animi?</p>
</div>
</div>
<style>
.ex9 {display: grid; place-items: center; height: 35vh;}
.ex9 .visual{height: 10vh; width: 100%; background: wheat; margin: 0.5rem 0;}
.ex9 .card1 {width: clamp(40vh, 50%, 85vh); display: flex; flex-direction: column; background: #ffb6c1; padding: 1vw;}
h3 {font-size: 1.5vw;}
</style>
Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.
<div class="ex10">
<div class="card">
<h4>Title Here</h4>
<div class="visual">
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetu ... repellat veritatis.
</div>
</div>
</div>
<style>
.ex10{display: grid; place-items: center; height: 20vh;}
.ex10 .visual {aspect-ratio: 16/9; background: wheat; margin: 0.5rem 0;}
.ex10 .card {width: 80%; display: flex; flex-direction: column; background: lightpink;
padding: 1vw;}
.ex10 h3 {font-size: 1.5vw;}
</style>