Display and Positioning, Colors, and Text Flashcards
position property
The default position of an element can be changed by setting its position property.
Values are:
static
relative
absolute
fixed
position: relative
allows you to position an element relative to its default static position on the web page.
This allows you to use the following offset properties:
top - moves the element down.
bottom - moves the element up.
left - moves the element right.
right - moves the element left.
position: absolute
When an element’s position is set to absolute all other elements on the page will ignore the element and act like it is not present on the page. The element will be positioned relative to its closest positioned parent element.
position: fixed
We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed.
z-index
The z-index property controls how far “back” or how far “forward” an element should appear on the web page when elements overlap.
the z-index property does not work on static elements.
higher numbers are shown higher on stack
display: inline
Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element.
The height and width of these elements cannot be specified in the CSS document.
display: block
Block-level elements are not displayed in the same line as the content around them.
These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content.
display: inline-block
Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties.
float
The float property can be set to one of two values:
left - this value will move, or float, elements as far left as possible.
right - this value will move elements as far right as possible.
This works for static and relative positioned elements.
Floated elements must have a width specified. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.
clear
The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values:
left — the left side of the element will not touch any other element within the same containing element.
right — the right side of the element will not touch any other element within the same containing element.
both — neither side of the element will touch any other element within the same containing element.
none — the element can touch either side.
What are the ways to specify a color in CSS?
Predefined color keywords – blue
Hexadecimal – #FF230A
Red, Green, Blue — rgb(120, 130, 175)
Hue, Saturation, Lightness — hsl(135, 40%, 50%)
Specifying opacity on rgb and hsl —
rgba(120, 130, 175, 0.5)
hsla(135, 40%, 50%, 0.6)
font-family
Specifies the typeface.
font-family: “Arial”;
font-weight
Used to specify the thickness of the text
in addition to values of “normal” and “bold” you can specify a number in the range 100 to 900 (multiples of 100 only)
text-transform
Can be given values of “uppercase” and “lowercase” to change case of text
text-align
The text-align property can be set to one of the following three values:
left - aligns text to the left hand side of the browser.
center - centers text.
right - aligns text to the right hand side of the browser.
