Section 1
Preview this deck
Explain the following property: padding-bottom
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (270)
Section 1
(50 cards)
Explain the following property: padding-bottom
Sets the bottom padding of an element
Explain the following property: padding-top
Sets the top padding of an element
Explain the following property: border-right
Sets all the right border properties in one declaration
Explain the following property: border
Sets all the border properties in one shorthand declaration
Explain the following property: clear
Specifies which sides of an element where other floating elements are not allowed
Explain the following property: margin-right
Sets the right margin of an element
Explain the following property: max-width
Sets the maximum width of an element
Explain the following property: min-width
Sets the minimum width of an element
Explain the following property: border-right-color
Sets the color of the right border.
Explain the following property: padding-left
Sets the left padding of an element
background-image
Specifies an image to use as the background of an element.
Explain the following property: background-attachment
Specifies that a background image should be fixed.
Explain the following property: margin
Sets all the margin properties in one declaration
Explain the following property: background-color
Specifies the background color of an element.
Explain the following property: border-top
Sets all the top border properties in one declaration
Explain the following property: height
Sets the height of an element
Explain the following property: float
Specifies whether or not a box should float
Explain the following property: min-height
Sets the minimum height of an element
Explain the following property: border-color
Sets the color of the four borders
Explain the following property: border-right-width
Sets the width of the right border.
Explain the following property: border-width
Sets the width of the four borders
Explain the following property: max-height
Sets the maximum height of an element
Explain the following property: position
Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
background-position
Specifies the position of a background image.
Explain the following property: padding
Sets all the padding properties in one declaration
Explain the following property: padding-right
Sets the right padding of an element
Explain the following property: margin-top
Sets the top margin of an element
Explain the following property: border-style
Sets the style of the four borders
Explain the following property: border-left
Sets all the left border properties in one declaration
Explain the following property: border-left-width
Sets the width of the left border
Explain the following property: clip
Clips an absolutely positioned element
Explain the following property: color
Sets the color of text
Explain the following property: background
Specify all background properties in a single shorthand property.
Explain the following property: margin-left
Sets the left margin of an element
Explain the following property: border-bottom-width
Sets the width of the bottom border
Explain the following property: border-left-color
Sets the color of the left border
Explain the following property: border-left-style
Sets the style of the left border
Explain the following property: border-bottom
Sets all the bottom border properties in one declaration
Explain the following property: border-bottom-style
Sets the style of the bottom border
Explain the following property: border-top-style
Sets the style of the top border
background-repeat
Repeats a background image horizontally, vertically or not at all.
Explain the following property: border-top-width
Sets the width of the top border
Explain the following property: border-bottom-color
Sets the color of the bottom border
Explain the following property: left
Specifies the left position of a positioned element
Explain the following property: bottom
Specifies the bottom position of a positioned element
Explain the following property: margin-bottom
Sets the bottom margin of an element
Explain the following property: overflow
Specifies what happens if content overflows an element's box
Explain the following property: display
Specifies how a certain HTML element should be displayed
Explain the following property: border-right-style
Sets the style of the right border.
Explain the following property: border-top-color
Sets the color of the top border
Section 2
(50 cards)
Explain the following property: word-spacing
Increases or decreases the space between words in a text
Explain the following property: z-index
Sets the stack order of a positioned element
Explain the following property: font-weight
Specifies the weight of a font
Explain the following property: caption-side
Specifies the placement of a table caption
Explain the following property: counter-reset
Creates or resets one or more counters
Explain the following property: outline
Sets all the outline properties in one declaration
Explain the following property: text-align
Specifies the horizontal alignment of text
Explain the following selector: div + p
Selects all <p> elements that are placed immediately after <div> elements
Explain the following property: page-break-after
Sets the page-breaking behavior after an element
Explain the following property: font-family
Specifies the font family for text
Explain the following selector: p
Selects all <p> elements
Explain the following selector: *
Selects all elements
Explain the following property: font
Sets all the font properties in one declaration
Explain the following property: outline-width
Sets the width of an outline
Explain the following property: list-style-image
Specifies an image as the list-item marker
Explain the following selector: div, p
Selects all <div> elements and all <p> elements
Explain the following property: white-space
Specifies how white-space inside an element is handled
Explain the following property: content
Used with the :before and :after pseudo-elements, to insert generated content
Explain the following property: border-collapse
Specifies whether or not table borders should be collapsed
Explain the following property: 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
Explain the following property: right
Specifies the right position of a positioned element
Explain the following property: table-layout
Sets the layout algorithm to be used for a table
Explain the following property: top
Specifies the top position of a positioned element
Explain the following property: list-style-position
Specifies if the list-item markers should appear inside or outside the content flow
Explain the following property: width
Sets the width of an element
Explain the following property: line-height
Sets the line height
Explain the following property: list-style-type
Specifies the type of list-item marker
Explain the following property: border-spacing
Specifies the distance between the borders of adjacent cells
Explain the following property: list-style
Sets all the properties for a list in one declaration
Explain the following property: text-indent
Specifies the indentation of the first line in a text-block
Explain the following property: empty-cells
Specifies whether or not to display borders and background on empty cells in a table
Explain the following selector: p ~ ul
Selects every <ul> element that are preceded by a <p> element
Explain the following property: page-break-inside
Sets the page-breaking behavior inside an element
Explain the following selector: div p
Selects all <p> elements inside <div> elements
Explain the following selector: div > p
Selects all <p> elements where the parent is a <div> element
Explain the following property: text-decoration
Specifies the decoration added to text
Explain the following property: vertical-align
Sets the vertical alignment of an element
Explain the following property: counter-increment
Increments one or more counters
Explain the following property: font-style
Specifies the font style for text
Explain the following property: letter-spacing
Increases or decreases the space between characters in a text
Explain the following property: cursor
Specifies the type of cursor to be displayed
Explain the following property: quotes
Sets the type of quotation marks for embedded quotations
Explain the following property: outline-style
Sets the style of an outline
Explain the following property: direction
Specifies the text direction/writing direction
Explain the following property: font-size
Specifies the font size of text
Explain the following property: text-transform
Controls the capitalization of text
Explain the following property: page-break-before
Sets the page-breaking behavior before an element
Explain the following property: visibility
Specifies whether or not an element is visible
Explain the following property: font-variant
Specifies whether or not a text should be displayed in a small-caps font
Explain the following property: outline-color
Sets the color of an outline
Section 3
(50 cards)
Explain the following styling: border: 2px solid green;
Border short hand ( 2px solid green )
Explain the following styling: a:visited { color: red;}
Visited Link
Explain the following selector: p::before
Insert something before the content of each <p> element
Explain the following styling: a{text-decoration:none;}
removes or adds underlines
Explain the following selector: a:hover
Selects links on mouse over
Explain the following selector: a:visited
Selects all visited links
Explain the following selector: [lang|=en]
Selects all elements with a lang attribute value starting with "en"
Explain the following styling: a:active{ color: blue;}
Selected Link
Explain the following selector: p::first-line
Selects the first line of every <p> element
Explain the following selector: [target=_blank]
Selects all elements with target="_blank"
Explain the following styling: text-indent:25px;}
indents first line to 25px
Explain the following selector: [title~=flower]
Selects all elements with a title attribute containing the word "flower"
Explain the following styling: padding-left:30px
Sets padding left 30px
Explain the following styling: H1{text-align:center;}
Aligns text to centre ( left and right )
Explain the following selector: input:focus
Selects the input element which has focus
Explain the following selector: a[href*="w3schools"]
Selects every <a> element whose href attribute value contains the substring "w3schools"
Explain the following styling: Background-color:[color];
Select background colour
Explain the following styling: Background-repeat: repeat-y;
Repeats background vertically
Explain the following styling: font-weight:bold;
Sets font bold
Explain the following selector: a:link
Selects all unvisited links
Explain the following styling: letter-spacing:25px;
Sets individual letter spacing to 25px
Explain the following styling: Line-height:25px;
Sets line height to 25px
Explain the following styling: Padding:25px 25px 20px 20px;
PadsTop R Bottom L ( 25px 5px 20px 20px )
Explain the following styling: list-style-type:upper-roman;
Sets style of numbers on list ( upper Roman )
Explain the following styling: Background-repeat: repeat-x;
Repeats background horizontally
Explain the following styling: H1{ Color:red;}
Sets color of text
Explain the following styling: font-family:"Courier";}
sets font family
Explain the following selector: a[href$=".pdf"]
Selects every <a> element whose href attribute value ends with ".pdf"
Explain the following styling: ul{list-style:circle inside url("img_marker.png");}
Shorthand list bullet maker
Explain the following styling: padding: 25px 50px 75px;
Pads Top L/R Bottom 25px 50px 75px
Explain the following styling: font-style:none;}
Sets font to italic or oblique
Explain the following selector: [target]
Selects all elements with a target attribute
Explain the following styling: padding: 25px 50px
Pads Top/Bottom L/R 25px 50px
Explain the following styling: Padding:25px;
Pads all sides 25 px
Explain the following selector: a:active
Selects the active link
Explain the following styling: Background-image:url("llama.jpg");
Displays image as background
Explain the following styling: P{text-transform:Capitalize;}
Makes text capitalise / lowercase / uppercase
Explain the following styling: font:italic 12pt Verdana;
Font Shortcut ( italic 12pt Verdana )
Explain the following selector: a[href^="https"]
Selects every <a> element whose href attribute value begins with "https"
Explain the following styling: font-size: 12pt;
Sets font Size to 12pt
Explain the following styling: list-style-type: circle;
Lists have circle or square bullets
Explain the following styling: a:link { color: red;}
Unvisited Link
Explain the following selector: p::first-letter
Selects the first letter of every <p> element
Explain the following styling: list-style-image:url(sqpurple.gif);}
Lets you specify your own bullets
Explain the following selector: p:first-child
Selects every <p> element that is the first child of its parent
Explain the following styling: Background-position: top right;
Sets background posistion
Explain the following styling: a:hover{color: red;}
Mouse over Link
Explain the following styling: Outline:10px solid green;`
Outline short hand ( 10px solid green )
Explain the following styling: Background-repeat: no-repeat;
Stops background repeating
Explain the following selector: p::after
Insert something after the content of each <p> element
Section 4
(50 cards)
Explain the following selector: P:first-child{
Highlights first of tag in list
Explain the following styling: Overflow:scroll/hidden/auto;
Specifies leftover text
Explain the following styling: z-index:-1;
Sets layer order (-1)
Selector are used to
find/select elements
Explain the following styling: background: linear-gradient(white, red, blue,);
Basic gradient through colours ( white red blue )
Explain the following styling: Height:100px;
Sets element height to 100px
Properties and values are separated by
colons
CSS stands for
Cascading Style Sheets
Style a <p> to refer to class 'center' and class 'large'
<p class = "center large"> text phrase </p>
External style sheets are stored in
CSS files
Class selectors are preceded with a
period (.)
In {color:blue;}, which is the value
blue
A declaration consists of (2)
property and value
Explain the following styling: background:linear-gradient(white,green);
Basic gradient Background (white,green)
Explain the following styling: border-image : url (x.png) 30 round;
Border image shorthand (x.png 30 round)
Explain the following selector: div p{
Affects only p tags in div
In {color:blue;}, which is the property
color
What are the 3 attributes in a link tag
rel, type, and href
CSS rules consist of 2 parts
selector and declaration
Selectors choose elements based on (4)
element name, class, id, or attribute
Explain the following styling: border-radius:25px;
Sets rounded corners to 25px
Rule that specifies all p tags with class = center
p . center { }
Explain the following styling: background-image: url(a.gif),url(b.gif);
Sets background images b over a (a.gif b.gif)
3 ways to insert CSS
external or internal style sheet, or inline style
Explain the following styling: opacity: 0.4;
Sets Transparency / Opacity to 0.4
Explain the following styling: Position:relative;
Positioned by its ancestor
Where is the link element
between the head tags
Explain the following styling: text-shadow:2px 2px;
Text shadow 2pxVertical / 2pxhorizontally
Explain the following styling: Display:none;
Text Vanishes
Explain the following styling: background:radial-gradient(white,green);
Basic radial gradient (white green )
CSS describes
how HTML elements are to be displayed
Why use CSS
define styles for web pages and variations in different devices and screen sizes
Explain the following styling: Position:absolute;
Goes in an exact position, but scrolls
Explain the following styling: Position:fixed;
Object stays in position regardless
Explain the following selector: [target]{
Applies to anything with a tag inside [ ]
Declarations end with a
semi-colon
Explain the following styling: background-size:cover;
Background image covers entire desktop
Explain the following styling: background-image: url(a.gif);
Sets picture as background (a.gif)
A class name CANNOT start with
a number
Id selectors are preceded with a
hash tag (#)
What element references to external style sheets
<link> element
Rule to make all elements with class=center, red in color
.center { color : red ; }
CSS comments start and end with ?
/* comment goes here */
Rule for all p tags center-aligned with red text color
p { text-align : center ; color : red ; }
Explain the following styling: visibility:hidden;
Text Vanishes, but leaves space
An id selector selects elements using
the id attribute
Explain the following styling: Width:100px;
Sets Element Width to 100px
An element selector selects elements based on
the element name
Declaration blocks are surrounded by
curly braces
Explain the following styling: background: linear-gradient(to bottom right , white, green);
Basic gradient Background with direction (to bottom right , white, green)
Section 5
(50 cards)
What value is associated with margin and not padding
auto
If border-style has 3 values
top and bottom are valued, left & right the same
If border-color is not set, it ...
inherits the color of the element
How do you set margin for top of an element
margin-top
Border property let you specify (3)
width, style, and color of the border
Margin shorthand uses values in what sequence
top - right - bottom - left
Why not use inline style
mixes content with presentation
Border-width can have 1 to 4 values for each
side (order is top, right, bottom, left)
In border shorthand, what property is required
style
If "%" is used with margins, "%" is the
width of the containing element
When are inline styles used ?
to apply unique style to a single element
Border-color can be set using (3)
name, hex, or rgb
What is the command for border shorthand
border : width style color;
What is the command for rounded borders
border-radius : 5px;
Padding puts space between
the content and the border of an element
How do you only set the bottom margin
margin-bottom: __px;
Can margins specify the side of an element
yes (margin-top, margin-left, etc)
What style has the lowest priority
browser default
Margin collapse is when ...
elements have adjoining margins and the smaller of the two is collapsed
If margin has 2 values
values refer to top & bottom - left & right
Margin collapse only affects
top and bottom margins
If padding property has 4 values
they cover top, right, bottom, left
Margin properties are used to
generate space around elements
If border-style has 2 values
top and bottom same, left and right same
If margin is set to 'auto'
element will use specified width, remaining space split equally between left and right margins
What must be set to use other border properties
border-style
Margin properties can have the following values (4)
auto, length, %, inherit
Can you have a negative value with margins
yes
If border-style has 1 value
all 4 sides are the same
What style method should be used sparingly
inline
What sides of an element accept padding
all : top, right, bottom, left
Border-width can be specific size, or (3)
thin, medium, or thick
Border-color can have 1 to 4 values for each
side (order is top, right, bottom, left)
What are the values for padding (3)
length, %, and inherit
If margin has 3 values
values refer to top - right & left - bottom
Command for border shorthand left side only
border-left : width style color;
How do you specify padding for only the top
padding-top : __px;
Margin properties set the size of
the white space outside the border
How do you set only the left margin
margin-left: __px;
Border-style property can have 1 to 4 values (4)
top border, right border, bottom border, left border
What does "inherit" mean for margins
margin is inherited from the parent element
What property indicates top style for the border
border-top-style: solid;
How do you specify padding for only the left side
padding-left : __px;
If margin has 4 values
values refer to top - right - bottom - left
If border-style has 4 values
all 4 sides will be valued
Multiple style sheet, which is used
the last read style sheet
If 'auto' is used with margins, the margin is set
by the browser
Border-style property specifies kind of borders (3)
solid, dotted, dashed, double, groove, ridge, inset
If margin has 1 value
values refer to all sides
If padding property has 3 values
they cover top, left and right, bottom
Section 6
(20 cards)