CSS Flashcards
CSS
Cascading Style Sheets
Describes the presentation of web pages
inline styles
Duplicate code
Internal Style Sheets
Go in the head section and are defined within the style tag
Establishes link between webpages and external resources
Link tag
If there are conflicting styles
Last-read style will be used
The rules of style sheets consist of
Selectors and declarations
Selectors
Can select HTML elements based on Types IDs Classes And more
declaration blocks
Enclosed in braces
Consist of declarations that are separated by semicolon
Last declaration in a block does not have to end with semicolon
Declaration
Consists of
Property
Colon
Value
Type selectors
Find html elements based on tag
Also called element selector
With id attribute
Can create a unique identifier for an HTML element
Create ID selector
With # symbol
And ID name
Have multiple HTML element; want to select bunch of particular elements
Class attribute
Great way to apply style to multiple elements regardless of their type
An HTML element can have multiple classes
Create class selector
Full stop with class name
Link tag attributes
Type=”text/css”
Rel=”stylesheet”
Href=”path to css file”
Property values have data types
Font-size : keywords, length, percentage
Pixels
Small but visible dot on the screen
Pixels are absolute units - they work whenever we want things to have a particular size, rather than be proportional to other things
Relative length units that depend on the default font size
Em
Great on smartphone screen as they leave the question of exactly how big to make something to the web browser
set weight or thickness of the font
Font-weight
Keywords: normal, bold
Nine numeric values: 100-900
Backup font family
.headline{
Font-family:”font1”,”font2”,””;
}
Short hand properties
Font: bold italic 0.5em “font” Serief;
Border: 2px dotted red;
Hexadecimal colors
Start with #
Have 3 or 6 digits
Represents the amount or R G B
Inline elements
Display:inline;
Don’t have width and height.
They take up exactly as much space as the content need
Inline-block elements
Like inline elements
Can have widths and heights
Hide elements
Visibility:hidden; - element is hidden still takes up space
Display:none; - the webpage is displayed as if the element did not exist
Margins
The outermost part of the box model.
Creating white space around an element and outside of its border that separates it from its neighbors
Can use short hand property
Margin property uses clockwise sequence
Padding
Innermost part of an element
Creating white space around an element’s content and inside element’s margins and borders
