Test 2 Flashcards
____________________was introduced in _______ by Håkon Wium Lie Bert Bos , and W3C
Cascading Style Sheets (CSS)
1996
Before this time, web formatting was provided by use of elements , such as <b> u>, and so on. These elements are ___________ b/we should now use CSS to provide formatting</b>
deprecated
In general, CSS allows web developers to keep separate __________, __________, __________ and.
content
structure
format
Each HTML document contains:
Content
Structure
Format
Syntax can be defined in three ways
In-line
Embedded
External
Regardless of where you declare your CSS, basic CSS syntax is comprised of…
- property: value pairs
CSS allows you to manipulate numerous HTML element properties, including…
Colors
Fonts
Position
Alignment
Precedence for inline, embedded and external follows
Highest precedence:
Middle precedence:
Lowest precedence:
Highest precedence: inline
Middle precedence: embedded
Lowest precedence: external
The _______ property (foreground color) and _______________ property (background color) can be assigned:
____________ or ____________
Color
background-color
Color key or hexadecimal(RGB)
Font have 5 properties:
font-family
font-size
font-style
font-variant
font-weight
Allows you to define the type of font used for a particular element
font-family property
-
-
-Specific font-family names
-Generic font-family
-The last list value should be generic font family name
Unlike most other CSS properties, VALUES are separated by a _______ to indicate that they are alternatives
Comma
Allows you to define the size of a font used for a particular element
font-size property
FONT-SIZE can be defined as one of the following:
Absolute
Relative
Length
Percentage
CSS font-size include:
xx-small
x-small
small
medium
large
x-large
xx-large
Identical size to the current font-size of the parent element.
Relative font-size
Relative font-size has two values:
larger
smaller
Length font-size has four values:
___ and ___ refer to the computed format of current element
What values are not allowed:
pt, px, em, ex
em and ex
Negative
Percentage font-size are increased/decreased by:
What values are not allowed:
%
negative
Allows you to select between normal, italic, and oblique faces with a font family
font-style property
The font-style VALUE can be defined as one of the following:
Normal
Italic
Oblique
Allows you to control the style within a font-family.
Font-variant property
The font-variant property allows you to specify __________ within a font family
small-caps
The lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.
Small-caps
In small-caps the first _______ of the first ________ is slightly larger then all other characters in the sentence.
Character
Word
The font-variant value in a FONT-FAMILY can be defined as one of the following:
normal
small-caps
Allows you to select the weight of the font.
Font-weight property
The font-weight value can be defined as one of the following:
-Normal
-Bold
-Bolder or lighter
-Values 100, 200, 300 all the way to 900 where number indicates a weight that is at least as dark as it predecessor
Six positioning properties for an html element
Position
Top
Left
Bottom
Right
Z-index
properties allow you to position documents content anywhere within the users agents window
The six positioning properties
The six positioning properties are _________ of normal ________ flow!!!
Outside
in-line
The position property can take on any of the following three VALUES:
Static
Relative
Absolute
When the value is ________, the content is laid according to the normal flow. Meaning, the content is not separated from the structure of other content in the block element in which it is defined.
Static
I’m ________ the top,right,bottom, and left properties do not apply. It is the default.
Static
When the value is _________ the content is offset to its normal position.
It’s position is specified with properties top, bottom, left, and right.
Relative
True or false
For position property you can define top and bottom together aswell as left and right
False
When the value is _________ the content is offset from the containing block.
Is specified with the properties top,bottom,left, and right.
Absolute
content is TAKEN OUT OF NORMAL FLOW
Absolute
content is laid out according to THE NORMAL FLOW
static
Content is OFFSET TO ITS NORMAL POSITION.
Relative
When the POSITION is RELATIVE, the TOP/BOTTOM property will specify how far a contents top edge is:
Of the contents containing block.
relative offset above or below the contents containing block
When the POSITION is RELATIVE, the LEFT/RIGHT property will specify how far a contents top edge is:
Of the contents containing block.
relative offset to the right or left the contents containing
When the POSITION is ABSOLUTE, the TOP/BOTTOM property will specify how far a contents top edge is:
Of the contents containing block.
relative offset above or below the bottom edge
When the POSITION is ABSOLUTE, the LEFT/RIGHT property will specify how far a contents top edge is:
Of the contents containing block.
relative offset to the right or left the bottom edge
Property specifies the stack level of the content in the current stacking context.
The assigned value is an integer represents the contents overall position.
Z-index
In z-index property
The content with the ______ integer is ____________ of the “z” stack and this displayed in the FORGROUND
The content with the ______ integer is ____________ of the “z” stack and this displayed in the BACKGROUND
- Largest/at the top
- Smallest/at the bottom
Are grouping elements. They only “group” content. They do not format not structure the content they group.
<span> and <div></span>
Element allows you to define content that is structurally “INLINE” with other content
<span></span>
Element allows you to define that is structurally on a separate line from other content.
<div>
</div>
<span> and <div>can’t provide format and structure, on their own but can provide formatting using:</span>
CSS style properties
Defines CSS styles that can be applied to any HTML element using the HTML elements class attribute
CSS style class
Allow authors to specify the background of an element which be be colors and images.
CSS background property
Background properties allow authors to ____________, ____________, and ___________
Position a background image
Repeat it
declare it fixed or scrolled
Five CSS background properties
Background-color
Background-image
Background-repeat
Background-position
Background-attachment
Sets the background image of an element. Allows setting image and setting a color if image is not available.
Background-image
For a background-image, when an image is available it is rendered in the ____ of the background color.
Thus the color in the transparent parts of the image.
Top
Specifies whether the image is repeated/tiled, and how:
Background-repeat
On INLINE elements is undefined.
All ______ covers the content, padding and border areas of the content box.
Tiling and positioning
Tiling
Four possible background-repeat values:
Repeat
No-repeat
Repeat-x
repeat-y
If a background image has been specified, then the ____________ property specifies its initial position.
Background-position
Seven possible background-position values
top
Bottom
Left
Right
Center
Length
Percentage
Specifies whether it is fixed with regard to the viewport (fixed) or scrolls along with the containing block (scroll)
Only one viewport per view.
Background-attachment
Two possible background-attachment values:
Background doesn’t movie with the element:
Background moves with the element:
Scroll and fixed
Fixed
Scroll
Allows a web developer to control the visual presentation of characters, spaces, words, and paragraphs within a web page.
CSS text flow
Seven text flow properties:
Width
Height
Overflow
Float
Text-align
Text-indent
Text-decoration
Specifies the width of content generated by block-level elements:
Specifies the height of the content generated by block-level elements:
Both do not apply to inline-level elements
Width
Height
Specifies whether content of a block-level is clipped when it overcasts the elements box
Overflow
Overflows possible values:
Visible
Hidden
Scroll
Specifies whether a box should move to the left, right, or not at all
May be set for any element but only applied to elements that generate boxes that are not absolutely positioned.
Float
Float possible values:
Left
Right
None
Controls how the content within an inline block is aligned.
Text-align
Text-align possible values include:
Left
Right
Center
Justify
Specifies the Indention of the first line of text in a block.
Text-flow
Text-flow is indented with respect to the ________________. This indentation should be rendered as BLANK SPACE.
It’s possible text-indent values:
edge of the line box
Length and percentage
Describes the decorations that can be added to the text associated with an element
Text-decoration property
Text-decoration possible values:
None
Underline
Over line
Line-through
All content exists inside a:
Box
Three property families can be used to format the box in which content resides:
Border family
Padding family
Margin family
Border family is comprised of the following styles:
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
You must _____________ if you plan to use any of the other border-* family of properties!!!
DEFINE A border-style*
Rules for multiple border style values
- If only 1 value, it applies to all sides
- If 2 values, top/bottom is set to the first value, right/left is set to the second.
- If 3 values, top is set to first, left/right is set to second, bottom is set to third
- If 4, they apple to top, right, bottom and left respectively
Possible border-style* include:
None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
CSS border family is comprised of the following color proportions:
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
Rules for multiple border colors, border width values, padding, and margin:
Apply to the same as the border style
Border-color* include any previously discussed colors as specified by either __________ or ________
Hex code or name
The CSS border family is comprised of the following width properties:
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
The possible values for border-width* include:
thin,thick,medium, or length
The CSS padding family is comprised of the following properties:
padding
padding-top
padding-bottom
padding-left
padding-right
The possible values for padding* AND margin*:
in
em
cm
px
pt
%
The CSS margins family is comprised of the following properties:
margin
margin-top
margin-bottom
margin-left
margin-right
