Web 2 CSS Flashcards
internal stylesheet code
Defined inside the element, inside the < section of an HTML page
id #
firstname { background-color: yellow; }
class .
.intro { background-color: yellow; }
contextual selectors
example footer H1
ID #
Used 1 time per page
Class .
Used multiple times per page
a:link
Unvisited link
a:visited
Visited link
a:active
Selected Link
a:hover
Selects links on mouse over
Layout
The position property specifies the type of positioning method used for an element (relative, fixed, or absolute)
width, height, auto
To format the page
float
Positioning on the page
absolute positioning
The element is positioned realtive to its first positioned (not static) ancestor element
relative positioning
The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position
fixed positioning
The element is positioned relatice to the browser window
understand static positioning
Browser defaults
align
The text-align property is used to set the horizontal alignment of text. A text can be left or right aligned, centered, or justified.
margin
Margin properties are used to create space around elements, outside of any defined border.
padding
Padding properties are used to generate space around an element’s content, inside of any defined borders.
buttons
shape that is created using CSS that the includes interactivity (User Driven Events)
rounded corners
border-radius - A shorthand property for setting all the four borders
colored button
.Example: button1 {background-color: #4CAF50;} /* Green */
Navigation using CSS
list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
