TOPIC 3 (MIDTERM) Flashcards
are used to define the background effects for elements.
CSS Backgrounds
specifies the background color of an element.
background-color property
specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. repeats an image both horizontally and vertically. If the image is repeated only horizontally
background-image property
Showing the background image only once is also specified by the ________
background-repeat property
To specify that the background image should be fixed (will not scroll with the rest of the page), use the _________
background-attachment property
its specify the position of the background image, so that it does not disturb the text too much
background-position property
To make the background fit into the screen you can use percentage in the value of ________
background-size property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a ____
shorthand property
allow you to specify the style, width, and color of an element’s border.
CSS Borders
specifies what kind of border to display.
Border Style
what kind of border to display Defines a dotted border.
dotted
what kind of border to display Defines a dashed border.
dashed
what kind of border Defines a solid border.
solid
What kind of border defines a double border
double
What kind of border Defines a 3D grooved border. The effect depends on the border-color value.
groove
What kind of border Defines a 3D ridged border. The effect depends on the border-color value.
ridge
What kind of border Defines a 3D inset border. The effect depends on the border-color value.
inset
What kind of border Defines a 3D outset border. The effect depends on the border-color value.
outset
What kind of border Defines no border.
none
What kind of border Defines a hidden border.
hidden
specifies the width of the four borders. The ________ can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three predefined values: thin, medium, or thick
CSS BORDER WIDTH
can have from one to four values (for the top border, right border, bottom border, and the left border)
CSS Border Color
is used to add rounded borders to an element
The border-radius property
allows you to specify an image to be used instead of the normal border around an element.
border-image property
takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify. Note: For border-image to work, the element also needs the border property set!
border-image property
are used to set the height and width of an element.
height and width properties
What value of height and width property is default. The browser calculates the height and width
auto
What value of height and width Defines the height/width in px, cm, etc.
length
What value of height and width Defines the height/width in percent of the containing block
%
What value of height and width Sets the height/width to its default value
Initital
What value of height and width The height/width will be inherited from its parent value
Inherit
is used to set the maximum width of an element.
max-width property
can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
max-width property
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. in this situation, will improve the browser’s handling of small windows.
CSS Max-Width
specifies how an element should float.
float property
specifies what elements can float beside the cleared element and on which side
CSS clear property
is used for positioning and formatting content e.g. let an image float left to the text in a container.
float property
What float value that makes the element floats to the left of its container
left
What float value that makes The element floats to the right of its container
right
What float value that makes The element does not float (will be displayed just where it occurs in the text). This is default
none
What float value that makes The element inherits the float value of its parent
inherit
In its simplest use, the ________ can be used to wrap text around images
the float property
specifies what should happen with the element that is next to a floating element.
clear property
What value of the clear property makes The element is not pushed below left or right floated elements. This is default
none
What value of the clear property makes The element is pushed below left floated elements
left
What value of the clear property makes The element is pushed below right floated elements
right
What value of the clear property makes The element is pushed below both left and right floated elements
both
What value of the clear property makes The element inherits the clear value from its parent
inherit
When clearing floats, you should match the clear to the _________ If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
float:
specifies the type of positioning method used for an element.
position property
HTML elements are positioned static by default.
Position: static;
These elements are not affected by the top, bottom, left, and right properties.
Position: static;
An element with ________ is not positioned in any special way; it is always positioned according to the normal flow of the page
Position: static;
An element with_______ is positioned relative to its normal position.
Position: relative;
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Position: relative;
is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Position: fixed;
is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Position: absolute;
A fixed element does not leave a gap in the page where it would normally have been located.
Position: fixed;
if it has an element that has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Position: absolute;
These elements are removed from the normal flow, and can overlap elements.
Absolute Positioned/ Position: absolute;
specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
overflow property
Default. The overflow is not clipped. The content renders outside the element’s box
visible
The overflow is clipped, and the rest of the content will be invisible
hidden
The overflow is clipped, and a scrollbar is added to see the rest of the content
scroll
Similar to scroll, but it adds scrollbars only when necessary
auto
meaning that it is not clipped and it renders outside the element’s box
Overflow: visible;
the overflow is clipped, and the rest of the content is hidden
Overflow: hidden;
the overflow is clipped and a scrollbar is added to scroll inside the box.
Overflow: scroll;
this will add a scrollbar both horizontally and vertically (even if you do not need it
Overflow: scroll;
is similar to scroll, but it adds scrollbars only when necessary
Overflow: auto;
specifies whether to change the overflow of content just horizontally or vertically
overflow-x and overflow-y properties
specifies what to do with the left/right edges of the content.
overflow-x
specifies what to do with the top/bottom edges of the content.
overflow-y
