Please enable JavaScript.
Coggle requires JavaScript to display documents.
Week 3 Adding style with CSS (CSS properties (Common CSS properties (text…
Week 3 Adding style with CSS
Basic Syntax
Best practice:
one line per property
Comments:
/
comment format
/
CSS properties
list of CSS properties
Link Title
Common CSS properties
line-height
text-align
often not useful on "inline" tags
text-decoration:
can re-use
underline
overline
line-through
none
font-weight
bold
font-size
font-style:
i
talic
font-family
Margin and color
margin
from its immediate neighbors (in HTML) or the edge of its parent
color
transparent
rgb/rgba and Hex code
Units
rem
derives its size to the
root
:!!:the difference between
em
and
rem
%
relative to parent dimension in both horizontal and vertical
:!:if parent has no explicit height and width, its child & shows 0
em
maps to the height of one capital letter in the
parent context
vh/vw
it is percentage of the screen(aka viewpoint)
px
Accessible typography
Lists and selectors
p { font-size: 12px; }
selectors (p) and declaration {}
properties (font) and Values (12px)
Styling lists
list-style-position
list-style-image
list-style-type
Selectors
id selector
class selector
Tag selector
p { }
combining selectors
specialized selectors
descendant selectors
direct descendant selectors
everything selector
Cascading
inheritance
precedence
id selector is the most specific
class selector is more specific than a tag selector
Most specific rule
rules that come later override those come earlier
!important
p { color: orange !important;}
<style> and <link>
<style>
<link rel="stylesheet" href="---.css">