Section 1
Preview this deck
Internal/Embedded style sheets may be used if
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 (109)
Section 1
(50 cards)
Internal/Embedded style sheets may be used if
one page has unique style
What style has the lowest priority
browser default
Selector are used to
find/select elements
When are inline styles used ?
to apply unique style to a single starting element
Write inline style to p to make it blue
<p style = "color : blue">text phrase</p>
An id selector selects elements using
the id attribute
3 ways to insert CSS
external or internal style sheet, or inline style
When can external style have priority over internal style
If the internal style is defined before the link
CSS stands for
Cascading Style Sheets
CSS describes
how HTML elements are to be displayed
Style a <p> to refer to class 'center' and class 'large'
<p class = "center large"> text phrase </p>
A declaration consists of (2)
property and value
Who has higher priority, external or internal style sheets
internal
What style has the highest priority
inline style
Border-width can have 1 to 4 values for each
side (order is top, right, bottom, left)
HTML was created to
describe the content of a web page (no tags)
What must be set to use other border properties
border-style
Rule to make all elements with class=center, red in color
.center { color : red ; }
CSS commands are called
rules
External style sheet allows you to change
an entire website
Why use CSS
define styles for web pages and variations in different devices and screen sizes
Multiple style sheet, which is has priority
the last read style sheet
Border-width can be specific size, or (3)
thin, medium, or thick
Declarations end with a
semi-colon
Border-style property can have 1 to 4 values (4)
top border, right border, bottom border, left border
Border-style property specifies kind of borders (3)
solid, dotted, dashed, double, groove, ridge, inset
Group selectors "h1" "h2" and "p"
h1, h2, p { rule ; }
CSS comments start and end with ?
/* comment goes here */
Internal/Embedded styles are located between ____ inside ___
style tags inside the head section
Rule that specifies all p tags with class = center
p . center { }
Border property let you specify (3)
width, style, and color of the border
CSS rules consist of 2 parts
selector and declaration
Properties and values are separated by
colons
Why not use inline style
mixes content with presentation
Where is the link element
between the head tags
What style method should be used sparingly
inline
Id="para" has a style rule of
#para
Declaration blocks are surrounded by
curly braces
What are the 3 attributes in a link tag
rel, type, and href
An element selector selects elements based on
the element name
Don't put ____ between a property value and its unit
a space (20 px is wrong, 20px is correct)
Selectors choose elements based on (4)
element name, class, id, or attribute
What element references to external style sheets
<link> element
Class selectors are preceded with a
period (.)
Rule for all p tags center-aligned with red text color
p { text-align : center ; color : red ; }
In {color:blue;}, which is the value
blue
External style sheets are stored in
CSS files
In {color:blue;}, which is the property
color
Id selectors are preceded with a
hash tag (#)
A class name CANNOT start with
a number
Section 2
(50 cards)
Can margins specify the side of an element
yes (margin-top, margin-left, etc)
If padding property has 4 values
they cover top, right, bottom, left
What is the command for rounded borders
border-radius : 5px;
If padding property has 1 value
it is assigned to all 4 sides
How set the maximum width of an element
max-width
max-length property can be set to (3)
length, %, or none
If border-style has 2 values
top and bottom same, left and right same
What is the command for border shorthand
border : width style color;
Margin properties are used to
generate space around elements
Height and width set the height/width of the
area inside the padding, border, and margin of the element
Can you have a negative value with margins
no
Margin collapse only affects
top and bottom margins
What value is associated with margin and not padding
auto
Padding puts space between
the content and the border of an element
If margin has 1 value
values refer to all sides
If margin is set to 'auto'
element will use specified width, remaining space split equally between left and right margins
What does "inherit" mean for margins
margin is inherited from the parent element
Height and width properties are used to set
the height and width of an element
If margin has 2 values
values refer to top & bottom - left & right
What property indicates top style for the border
border-top-style: solid;
How set margin for top of an element
margin-top
In border shorthand, what property is required
style
Margin properties set the size of
the white space outside the border
If border-style has 3 values
top and bottom are valued, left & right the same
If border-style has 4 values
all 4 sides will be valued
What value is missing from height and width
inherit
If border-color is not set, it ...
inherits the color of the element
If height and width use auto
the browser calculates them
Command for border shorthand left side only
border-left : width style color;
How do you set only the left margin
margin-left: __px;
If 'auto' is used with margins, the margin is set
by the browser
How do you only set the bottom margin
margin-bottom: __px;
What sides of an element accept padding
all : top, right, bottom, left
If height and width use %
dimensions will be % of the containing block
How do you specify padding for only the left side
padding-left : __px;
How do you specify padding for only the top
padding-top : __px;
If "%" is used with margins, "%" is the
width of the containing element
Margin collapse is when ...
elements have adjoining margins and the smaller of the two is collapsed
Border-color can have 1 to 4 values for each
side (order is top, right, bottom, left)
If border-style has 1 value
all 4 sides are the same
What are the values for padding (3)
length, %, and inherit
Height and width do not include
padding, borders, or margins
If padding property has 3 values
they cover top, left and right, bottom
Border-color can be set using (3)
name, hex, or rgb
If margin has 4 values
values refer to top - right - bottom - left
Margin shorthand uses values in what sequence
top - right - bottom - left
Margin properties can have the following values (4)
auto, length, %, inherit
If margin has 3 values
values refer to top - right & left - bottom
If padding property has 2 values
they cover top and bottom, and left and right
Values for height and width (3)
auto, length, or %
Section 3
(9 cards)