HTML and CSS Cheat Sheet and Must Knows Flashcards
- Help memorize all the CSS properties, HTML tags attributes and attribute values - Give practical examples of some different front-end things. Eg: How do you shape a div as a circle?
List the “original” top most common HTML Tags that came before HTML 5
GOAL: Try to name 20 different tags
INFO 1: There are 94 tags listed here in total that were available in HTML4.
INFO 2: Before 2014 HTML5 did not exist. Therefore on sites which are older, you may have stricter requirement on which HTML elements you can use. It is best to know which elements are valid in HTML4.
< !-- comment -- > < !doctype > < a > < abbr > < acronym> (obsolete in HTML5 ) < address > < applet> (obsolete in HTML5 ) < area > < b > < base > < basefont> (obsolete in HTML5 ) < bdo > < big>(obsolete in HTML5 ) < blockquote > < body > < br > < button > < caption > < center> (obsolete in HTML5 ) < cite > < code > < col > < colgroup > < dd > < del > < dfn > < dir> (obsolete in HTML5 ) < div > < dl > < dt > < em > < fieldset > < font> (obsolete in HTML5 ) < form > < frame> (obsolete in HTML5 ) < frameset> (obsolete in HTML5 ) < h1 > < h2 > < h3 > < h4 > < h5 > < h6 > < head > < hr > < html > < i > < iframe > < img > < input > < ins > < isindex> (obsolete in HTML5 ) < kbd > < label > < legend > < li > < link > < map > < menu > < meta > < noframes> (obsolete in HTML5 ) < noscript > < object > < ol > < optgroup > < option > < p > < param > < pre > < q > < s > < samp > < script > < select > < small > < span > < strike> (obsolete in HTML5 ) < strong > < style > < sub > < sup > < table > < tbody < td > < textarea > < tfoot > < th > < thead > < title > < tr > < tt> (obsolete in HTML5 ) < u > < ul > < var >
List the tags of ONLY HTML 5 …
HINT: There are 23 new tags which are available in HTML5
Why do we want to use these semantic markups?
< article > Represents an independent piece of content of a document, such as a blog entry or newspaper article
< aside > Represents a piece of content that is only slightly related to the rest of the page.
< audio > Defines an audio file.
< canvas > This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
< command > Represents a command the user can invoke.
< datalist > Together with the a new list attribute for input can be used to make comboboxes
< details > Represents additional information or controls which the user can obtain on demand
< embed > Defines external interactive content or plugin.
< figure > Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
< footer > Represents a footer for a section and can contain information about the author, copyright information, et cetera.
< header > Represents a group of introductory or navigational aids.
< hgroup > Represents the header of a section.
< keygen > Represents control for key pair generation.
< mark > Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
< meter > Represents a measurement, such as disk usage.
< nav > Represents a section of the document intended for navigation.
< output > Represents some type of output, such as from a calculation done through scripting.
< progress > Represents a completion of a task, such as downloading or when performing a series of expensive operations.
< ruby > Together with and allow for marking up ruby annotations.
< section > Represents a generic document or application section
< time > Represents a date and/or time.
< video > Defines a video file.
< wbr > Represents a line break opportunity.
HTML5 semantic tags define the purpose of the element. By using semantic markup, you help the browser understand the meaning of the content instead of just displaying it. By providing this extra level of clarity, HTML5 semantic elements also help search engines to read the page and find the required information faster.
List some of the most common property keywords in CSS3
GOAL: Try to get 20.
A
align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
all Resets all properties (except unicode-bidi and direction)
animation A shorthand property for all the animation-* properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies a name for the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation
B
backface-visibility Defines whether or not the back face of an element should be visible when facing the user
background A shorthand property for all the background-* properties
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-clip Defines how far the background (color or image) should extend within an element
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-origin Specifies the origin position of a background image
background-position Specifies the position of a background image
background-repeat Sets if/how a background image will be repeated
background-size Specifies the size of the background images
border A shorthand property for border-width, border-style and border-color
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the radius of the border of the bottom-left corner
border-bottom-right-radius Defines the radius of the border of the bottom-right corner
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-collapse Sets whether table borders should collapse into a single border or be separated
border-color Sets the color of the four borders
border-image A shorthand property for all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the width of the border image
border-left A shorthand property for all the border-left-* properties
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for the four border--radius properties
border-right A shorthand property for all the border-right- properties
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-spacing Sets the distance between the borders of adjacent cells
border-style Sets the style of the four borders
border-top A shorthand property for border-top-width, border-top-style and border-top-color
border-top-color Sets the color of the top border
border-top-left-radius Defines the radius of the border of the top-left corner
border-top-right-radius Defines the radius of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
bottom Sets the elements position, from the bottom of its parent element
box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadow Attaches one or more shadows to an element
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not
break-after Specifies whether or not a page-, column-, or region-break should occur after the specified element
break-before Specifies whether or not a page-, column-, or region-break should occur before the specified element
break-inside Specifies whether or not a page-, column-, or region-break should occur inside the specified element
C
caption-side Specifies the placement of a table caption
caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable
@charset Specifies the character encoding used in the style sheet
clear Specifies on which sides of an element floating elements are not allowed to float
clip Clips an absolutely positioned element
color Sets the color of text
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns, balanced or not
column-gap Specifies the gap between the columns
column-rule A shorthand property for all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies the column width
columns A shorthand property for column-width and column-count
content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increases or decreases the value of one or more CSS counters
counter-reset Creates or resets one or more CSS counters
cursor Specifies the mouse cursor to be displayed when pointing over an element
D
direction Specifies the text direction/writing direction
display Specifies how a certain HTML element should be displayed
E
empty-cells Specifies whether or not to display borders and background on empty cells in a table
F
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
float Specifies whether or not a box should float
font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties
@font-face A rule that allows websites to download and use fonts other than the “web-safe” fonts
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weight Specifies the weight of a font
G
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
H
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
height Sets the height of an element
hyphens Sets how to split words to improve the layout of paragraphs
I
image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
@import Allows you to import a style sheet into another style sheet
isolation Defines whether an element must create a new stacking content
J
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space
K
@keyframes Specifies the animation code
L
left Specifies the left position of a positioned element
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker
M
margin Sets all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
mask Hides an element by masking or clipping the image at specific places
mask-type Specifies whether a mask element is used as a luminance or an alpha mask
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
@media Sets the style rules for different media types/devices/sizes
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
mix-blend-mode Specifies how an element’s content should blend with its direct parent background
O
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-position Specifies the alignment of the replaced element inside its box
opacity Sets the opacity level for an element
order Sets the order of the flexible item, relative to the rest
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
outline A shorthand property for the outline-width, outline-style, and the outline-color properties
outline-color Sets the color of an outline
outline-offset Offsets an outline, and draws it beyond the border edge
outline-style Sets the style of an outline
outline-width Sets the width of an outline
overflow
Specifies what happens if content overflows an element’s box
overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element’s content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element’s content area
P
padding A shorthand property for all the padding-* properties
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
page-break-after Sets the page-break behavior after an element
page-break-before Sets the page-break behavior before an element
page-break-inside Sets the page-break behavior inside an element
perspective Gives a 3D-positioned element some perspective
perspective-origin Defines at which position the user is looking at the 3D-positioned element
pointer-events Defines whether or not an element reacts to pointer events
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
Q
quotes Sets the type of quotation marks for embedded quotations
R
resize Defines if (and how) an element is resizable by the user
right Specifies the right position of a positioned element
row-gap Specifies the gap between the grid rows
S
scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump
T
tab-size Specifies the width of a tab character
table-layout Defines the algorithm used to lay out table cells, rows, and columns
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is “justify”
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is “justify”
text-orientation Defines the orientation of the text in a line
text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text
text-transform Controls the capitalization of text
text-underline-position Specifies the position of the underline which is set using the text-decoration property
top Specifies the top position of a positioned element
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
transition A shorthand property for all the transition-* properties
transition-delay Specifies when the transition effect will start
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect
U
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
user-select Specifies whether the text of an element can be selected
V
vertical-align Sets the vertical alignment of an element
visibility Specifies whether or not an element is visible
W
white-space Specifies how white-space inside an element is handled
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
width Sets the width of an element
word-break Specifies how words should break when reaching the end of a line
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically
Z
z-index Sets the stack order of a positioned element
What is the difference between a CSS Rule, CSS Property, and CSS Selector?
The CSS Rule is the Selector along with which Properties it modifies, together.
h2 {
color: blue;
}
h2 is known as the selector.
color is known as the property.
blue is known as a property value.
A “rule” is the terminology for this block of code.
What are the differences between padding, border, and margin?
padding is the inner-most whitespace next to HTML element
border is for styling which is applied to the padding (up to the edges of the
padding) (can have styling applied to it)
margin is blank white space added around the element, and is just used for such
padding and margins cannot be styled. only border can be styled.
How do you add margin or padding for all 4 edges of an element at once?
margin: 10px 3px 30px 5px;
order goes top right bottom left
clockwise.
What is a float?
Followup: How do you debug float issues?
float is the “old school” way that HTML pages were laid out using CSS, long before Bootstrap or modern Javascript frameworks. It is still used frequently.
img {
float: right;
}
none The element does not float, (will be displayed just where it occurs in the text). This is default
left The element floats to the left of its container
right The element floats the right of its container
If a floating element is taller than the containing element, it will overflow outside its container. It is possible to fix this with the “clearfix hack”:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Explain the CSS “background” property keyword explanation and common properties you might want to modify to change things about the background.
Hint: There are 10 such CSS properties related to background
background is a very common css property to modify, since it controls what should appear behind the HTML element.
background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size
memorize these and look up each if you do not know now. Then they can be applied when possible.
Explain about the !important CSS property modifier
This is a keyword which can be applied to a CSS property to make sure that it is applied to the outermost element.
This can help when it is confusing as to why an element which not take some CSS (usually due to prior CSS before it taking precedence)
USE SPARINGLY …
Explain about the css “margin” keyword and common CSS properties you might use to modify margins.
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
Explain about the css “border” keyword and common CSS properties you might use to modify borders
p. dotted {border-style: dotted;}
p. dashed {border-style: dashed;}
p. solid {border-style: solid;}
p. double {border-style: double;}
p. groove {border-style: groove;}
p. ridge {border-style: ridge;}
p. inset {border-style: inset;}
p. outset {border-style: outset;}
p. none {border-style: none;}
p. hidden {border-style: hidden;}
p. mix {border-style: dotted dashed solid double;}
Borders are used to add decoration or styling.
Padding and Margins are NOT used for styling.
Order goes: Padding, Border, Margin
—————>
Common border properties:
border-width
border-style
border-color
What are the eight possible border-style properties in CSS?
border-style: solid border-style: double border-style: groove border-style: outset border-style: dotted border-style: dashed border-style: inset border-style: ridge
Note: We don’t usually use any of these because they are ugly. Use Bootstrap instead or something else for styling.
This is still okay for styling basic websites.
What are the four possible border-width properties in CSS? What about other ways to set the border-width of an element?
border-width: thin; border-width: medium; border-width: thick; border-width: %; border-width: 20px;
Remember: padding -> border -> margins
Border can have styling applied to it, while padding and margins (usually) do not, since they are transparent.
Explain all about the font CSS properties. Name the 5 css font properties and how to apply them in CSS code.
The font property is a shorthand property for:
font-style font-variant font-weight font-size/line-height font-family
font: font-style font-variant font-weight font-size/line-height font-family
What does the line-height CSS property do?
The line-height CSS property increases the space between each line of text. You can use 1 by default which will fit it according to the font size.
Explain class and id using CSS and HTML code examples.
/* id */
#header { width: 100%; height: 80px; background: blue }
/* class "/
#container { width: 1080px; margin: 0 auto; background: #eee }
Explain about the text-align property in CSS
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}
What is a descendant selector in CSS?
div h2 { color: blue; }
div is the parent selector, h2 is the child selector. This relationship is sometimes known as “descendant selector”
Another thing you might see is:
< style >
li > div {
color:white;
background: green;
}
ul > li {
color: green;
}
< /style >
The ‘>’ symbol can be used to specify a specific child HTML element under a parent one.
What does auto mean when used as a value for a CSS property?
auto means to let CSS take control of the value for the CSS property. It is a common setting for the following CSS properties:
CSS properties you might use ‘auto’ for:
Code example:
Explain about the HTML < span > < /span > tag and where it’s commonly used.
span tag
What are the states a link can take on a HTML webpage? (This is referring to what happens when the link element changes as you click/interact with them)
HINT: There are 5 such states
Links on a webpage change to the following states (in order):
link visited hover focus active
What does the word “cascade” mean in relation to CSS?
The word “cascade” is the first word of CSS because of how different CSS files can cascade together to give the overall style for the website.
What does “mobile first” mean in relation to web design?
This refers to the process of initially creating a website for mobile environment first (phone), THEN later on designing the desktop version.
This is useful because the mobile version often has less functionality and only the necessary functionality. Leading to better results long term.
Bootstrap 4 is an example of one UI framework which promotes the ‘mobile first’ way of thinking.
What is a block style element? What about an inline element?
block vs inline elements
List some useful metadeta you might want to store in the head section of an HTML document.
< head >
< title >HTML CSS Cheatsheet (MeadowTsunami)< /title >
< meta charset=”UTF-8” >
< meta http-equiv=”X-UA-Compatible” content=”IE-edge” >
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
< meta name=”Description” content=”Learn Intermediate HTML and CSS Using one Cheatsheet” >
< meta name=”robots” content=”index,follow” >
< link rel=”icon” href=”coding_icon.ico” >
< link rel=”stylesheet” href=”example_styles.css”>
< script type=”text/javascript” src=”basic_script.js”>
< /head >
What are the units of measurement allowed in CSS?
% cm em ex in mm pc pt px
What is a clearfix? When do we usually need to use a clearfix?
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
We use the “clearfix” hack to fix the problem:
.clearfix {
overflow: auto;
}
What does the overflow CSS property do?
The overflow property specifies what should happen if content overflows an element’s box.
It can take on the following values:
visible hidden scroll auto initial inherit
Eg:)
#someid {
overflow: scroll;
}
Explain all about the “form” HTML element.
Followup: How do you cause Javascript functions to occur based on the submission of a form? What happens after the submit?
Forms
Explain about the opacity CSS property:
Opacity refers to how translucent (see-through) the element should be:
< head >
< style >
.example {
-moz-opacity: 0.5;
}
< /style >
< /head >
< body >
< a class="example" >This text has -moz-opacity: 0.5< /a >
< /body >
We use the -moz-opacity (for mozilla browsers) or opacity property in CSS3+
Explain about the grid CSS properties:
grid-column-gap
grid-row-gap
grid-gap
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Explain about the flex CSS properties:
.flex-container {
display: flex;
}
The flex container properties are:
flex-direction: row | column
flex-wrap: wrap | nowrap | wrapreverse
flex-flow:
flex-basis:
justify-content: flex-start | flex-end | center
align-items: flex-start | flex-end | center
align-content: flex-start | flex-end | center
Explain word-break vs word-spacing vs word-wrap in CSS
word-break
word-spacing
word-wrap
Explain about the transition CSS property:
transition transition-delay transition-duration transition-property transition-timing-function
Example: change div’s width
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
When to use flexbox and when to use grid?
Try to get 5 CSS properties for both flex and grid.
Flexbox is one-dimensional
Grid is two-dimensional
“Flexbox lays out items along either the horizontal or the vertical axis, so you have to decide whether you want a row-based or a column-based layout. A flex layout can also wrap in multiple rows or columns and flexbox treats each row or column as a separate entity, based on its content and the available space.”
“On the other hand, CSS Grid lets you work along two axes: horizontally and vertically. Grid allows you to create two-dimensional layouts where you can precisely place grid items into cells defined by rows and columns”
“Grid is is usually better for full-page layouts and flexbox is usually better for smaller components. However, this is not always the case.”
An HTML element becomes a grid container when its display property is set to grid or inline-grid:
.grid-container {
display: grid;
}
You adjust grid gaps using following CSS properties:
grid-column-gap
grid-row-gap
grid-gap
Place a grid item at row line 1, and let it end on row line 3:
.item1{
grid-row-start:1;
grid-row-end:3;
}
The flex property is a shorthand property for:
flex-grow
flex-shrink
flex-basis
Flex-wrap is another important CSS property:
flex-wrap:wrap;
In Bootstrap, content must be placed within…
HINT: Choose 1 – Columns, Rows, or Container?
columns
Bootstrap has a column based layout which means it fits responsively for phones.
Which of the following defines a relative measurement for the height of a font in em spaces?
A - %
B - cm
C - em
D - ex
Answer : C
em − A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt
Which of the following CSS font property is used to create a small-caps effect?
A - font-family
B - font-style
C - font-variant
D - font-weight
C.
The font-variant property is used to create a small-caps effect.
Which of the following property is used to increase or decrease how bold or light a font appears?
A - font-family
B - font-style
C - font-variant
D - font-weight
Answer : D
Explanation
The font-weight property is used to increase or decrease how bold or light a font appears.
Which of the following property of an anchor element signifies unvisited hyperlinks?
A - :link
B - :visited
C - :hover
D - :active
A.
The :link property of an anchor < a > tag signifies it not yet being visited.
Stages of a link: | link | visited | hover | focus v active
Which of the following property changes the color of left border?
A - :border-top-color
B - :border-left-color
C - :border-right-color
D - :border-bottom-color
B. border-left-color
/* CSS Code example: */
div {border-left-color: coral;}
Which of the following property serves as shorthand for the marker properties?
A - list-style-type
B - list-style-position
C - list-style-image
D - list-style
Answer : D
The list-style property serves as shorthand for the 3 marker properties, in order:
list-style-type
list-style-position
list-style-image
ul {
list-style: square inside url(“egimage.gif”);
}
