CSS Flashcards
CSS display Property
p. ex1 {display: none;}
p. ex2 {display: inline;}
p. ex3 {display: block;}
p. ex4 {display: inline-block;}
The display Property
display: none:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
display: inline:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
display: block:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
display: inline-block:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
p {color: red;}
p. ex1 {display: none;}
p. ex2 {display: inline;}
p. ex3 {display: block;}
p. ex4 {display: inline-block;}
<h1>The display Property</h1>
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p>HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p>HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p>HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p>HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
nline Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex Displays an element as a block-level flex container
grid Displays an element as a block-level grid container
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container
inline-grid Displays an element as an inline-level grid container
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a </p><li> element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a element
table-caption Let the element behave like a element
table-column-group Let the element behave like a element
table-header-group Let the element behave like a element
table-footer-group Let the element behave like a element
table-row-group Let the element behave like a element
table-cell Let the element behave like a element
table-column Let the element behave like a element
table-row Let the element behave like a element
none The element is completely removed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit</li></span>
Before CSS Flexbox
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Flexbox Elements
To start using the Flexbox model, you need to first define a flex container.
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
Parent Element (Container)
The flex container becomes flexible by setting the display property to flex:
.flex-container {
display: flex;
}
The flex container properties are:
flex-direction flex-wrap flex-flow justify-content align-items align-content
flex container - The flex-direction Property
The flex-direction property defines in which direction the container wants to stack the flex items.
The column value stacks the flex items vertically (from top to bottom):
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
The row-reverse value stacks the flex items horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex container - The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate the flex-wrap property.
–
The wrap value specifies that the flex items will wrap if necessary:
.flex-container {
display: flex;
flex-wrap: wrap;
}
--
The nowrap value specifies that the flex items will not wrap (this is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
--
The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex container - The flex-flow Property
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
flex container - The justify-content Property -Horizontal alignment
The justify-content property is used to align the flex items:
The center value aligns the flex items at the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
---
The flex-start value aligns the flex items at the beginning of the container (this is default):
.flex-container {
display: flex;
justify-content: flex-start;
}
---
The flex-end value aligns the flex items at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
---
The space-around value displays the flex items with space before, between, and after the lines:
.flex-container {
display: flex;
justify-content: space-around;
}
---
The space-between value displays the flex items with space between the lines:
.flex-container {
display: flex;
justify-content: space-between;
}
----
flex container - The align-items Property - vertical alignment
flex container - The align-items Property
The align-items property is used to align the flex items vertically.
–
The center value aligns the flex items in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
--
The flex-start value aligns the flex items at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
--
The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
The stretch value stretches the flex items to fill the container (this is default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
The baseline value aligns the flex items such as their baselines aligns:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>The align-items Property</h1>
<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>
<div class="flex-container"> <div><h1>1</h1></div> <div><h6>2</h6></div> <div><h3>3</h3></div> <div><small>4</small></div> </div>
flex container - The align-content Property -vertical alignment when there are multiple lines
flex container - The align-content Property
The align-content property is used to align the flex lines.
–
In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.
Example
The space-between value displays the flex lines with equal space between them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
--
The space-around value displays the flex lines with space before, between, and after them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
--
The stretch value stretches the flex lines to take up the remaining space (this is default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
--
The center value displays display the flex lines in the middle of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
--
The flex-start value displays the flex lines at the start of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
--
The flex-end value displays the flex lines at the end of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
flex container- Perfect Centering
SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:
Example
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Flex container -Child Elements (Items) or Flex items
The direct child elements of a flex container automatically becomes flexible (flex) items.
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>Flexible Items</h1>
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
<p>All direct children of a flexible container becomes flexible items.</p>
flex item properties - The order Property
The order property specifies the order of the flex items.
The first flex item in the code does not have to appear as the first item in the layout.
The order value must be a number, default value is 0.
The order property can change the order of the flex items:
<div class="flex-container"> <div style="">1</div> <div style="">2</div> <div style="">3</div> <div style="">4</div> </div>
flex item properties -The flex-grow Property
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
The value must be a number, default value is 0.
Make the third flex item grow eight times faster than the other flex items:
<div class="flex-container"> <div style="">1</div> <div style="">2</div> <div style="">3</div> </div>
flex item properties -The flex-shrink Property
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
The value must be a number, default value is 1.
Do not let the third flex item shrink as much as the other flex items:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex item properties - The flex-basis Property
The flex-basis property specifies the initial length of a flex item.
Set the initial length of the third flex item to 200 pixels:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="">3</div> <div>4</div> </div>
flex item properties -The flex Property
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
Example
Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="">3</div> <div>4</div> </div>
flex item properties -The align-self Property
The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container’s align-items property.
In these examples we use a 200 pixels high container, to better demonstrate the align-self property:
Example
Align the third flex item in the middle of the container:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="">3</div> <div>4</div> </div> ---
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>The align-self Property</h1>
<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>
<div class="flex-container"> <div>1</div> <div>2</div> <div style="">3</div> <div>4</div> </div>
<p>The align-self property overrides the align-items property of the container.</p>
styling div element within a class .flex-container>div
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>The order Property</h1>
<p>Use the order property to sort the flex items as you like:</p>
<div class="flex-container"> <div style="">1</div> <div style="">2</div> <div style="">3</div> <div style="">4</div> </div>
Flex container - Flex items - align self property
Example
Align the second flex item at the top of the container, and the third flex item at the bottom of the container:
<div class="flex-container"> <div>1</div> <div style="">2</div> <div style="">3</div> <div>4</div> </div> ----
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>The align-self Property</h1>
<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>
<div class="flex-container"> <div>1</div> <div style="">2</div> <div style="">3</div> <div>4</div> </div>
<p>The align-self property overrides the align-items property of the container.</p>
CSS Flexbox Properties
The following table lists the CSS properties used with flexbox:
Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container’s align-items property
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
CSS2 Introduced Media Types
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.
Unfortunately these media types never got a lot of support by devices, other than the print media type.
CSS3 Introduced Media Queries
Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
Media Query Syntax
A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Unless you use the not or only operators, the media type is optional and the all type will be implied.
You can also have different stylesheets for different media:
CSS3 Media Types
CSS3 Media Types
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that “reads” the page out loud
Media Queries Simple Examples
One way to use media queries is to have an alternate CSS section right inside your style sheet.
The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):
Example
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
Media Query example 2
main {margin-left: 4px;}
The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):
Example
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
--
.wrapper {overflow: auto;}
#leftsidebar {
float: none;
width: auto;
}
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
<div>
<div>
<ul>
<li>Menu-item 1</li>
<li>Menu-item 2</li>
<li>Menu-item 3</li>
<li>Menu-item 4</li>
<li>Menu-item 5</li>
</ul>
</div>
<div>
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
Responsive Web Design
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
Designing For The Best Experience For All Users
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
Media Query example - setting background color based on size
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Media Queries For Menus
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Media Queries For Columns
A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes:
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Media Query - setting flex direction
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Hide Elements With Media Queries
Another common use of media queries, is to hide elements on different screen sizes:
I will be hidden on small screens.
Example
/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Change Font Size With Media Queries
/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}</div></div>
For setting the mat-table in the position on a page with a div element
.content-main {
margin: 21px 107px 23px;
}
--
<div class="content-main">
</div>
CSS Margin
The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top margin-right margin-bottom margin-left All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</p>
CSS Box model
Element - Padding inside border - border - Margin outside border
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:
margin-top margin-right margin-bottom margin-left So, here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px Example Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If the margin property has three values:
If the margin property has three values:
margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px Example Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
If the margin property has two values:
margin: 25px 50px; top and bottom margins are 25px right and left margins are 50px Example Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
margin: 25px;
all four margins are 25px
Example
Use the margin shorthand property with one value:
p {
margin: 25px;
}
Margin auto value- for horizantal alignment
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Margin - Inherit value
This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (</p><div>):
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
–
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div>
<p>This paragraph has an inherited left margin (from the div element).</p>
</div>
</div>
Margin Collapse only on top and bottom and not on sides
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
Example
Demonstration of margin collapse:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</h2></h1></h2></h1><p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
