I – Referencing CSS
A - External CSS
1 – Link tag
<head>
<link rel=’’stylesheet’’ href=’’css/styles.css’’>
</head>
2 – Import
In ccs file
@import url(‘/styles/layout.css’) ;
@import url(‘/styles/typography.css’) ;
@import url(‘/styles/buttons.css’) ;
Index.html
<head>
<style>
@import url(‘’css/styles.css’’) ;
</style>
</head>
Downside of using umport : Slowing down your page speed.
Import does not allow for parallel downloads meaning the page need to load the entire
stylesheed before it load the res of the page.
Import is style commonly used in CSS Preprocessors such as SASS or LESS or
when CSS files are compiled into one file before loading it into the page.
3 – Inline CSS
<p style=’’color:red ;’’> Red paragraph.</p>
Downside : Hard to read and potential duplicated code
4 – Internal CSS
<head>
<style>
H1{
color:green;
}
H2{
color:blue;
}
</style>
</head>
Downside : multiple html document will need to copy the css into each file.
II – Approach
Before adding css. put your content , is better to have as much content as possible because it gives
you context.
III – Images
https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips
Retina Display
- Trademarked term by apple
- Retina = high pixel density
- over 300 pixel humain can’t make difference
- retina display = 326 pixels per inch
High pixel density screen
- Refers to the number of pixels within a space
- Measured in pixels per inch (PPI) or dots per inch (DPI)
IV – Values and units
Absolute
- Fixed unit, always the same size
- Not affected by values in related elements
- Example : px, cm , mm, pt
Relative
- Relational sizing, not fixed
- Dependent upon values declared in parent and ancestor elements
- Example : em,rem,vm,vh
Unitless Values
- Some numeric values do not require a unit
line-height: 1.25;
margin: 0px 2px;
* same as *
margin: 0 2px;
Selectors
Type selectors
- The most basic kind of selector, sumple matching pattern
Matches to ALL <h1> elements
H1 {...}
Universal Selector
Apllies a border to all elements
*{
Border: 1px solid black;
}
Class selector
ID selector
Nested Elements and the DOM
Grouping Selectors
Inheritance
All property are not inherited. Check W3C property list to check out which one does.
Specificity and Precedent
1. Universal (*)
2. type (p)
3. class (.example)
4. id (#example)
Pseudo-class selectors and links
a:visited {
/* color: gray; */
}
a:focus {
outline: 1px solid black;
}
a:hover {
background: gray;
}
a:active {
/* color: white; */
}
HTML Elements
2 types of HTML elements: inline and block-level
Inline
- Takes up the same space as their content
- Elements are displayed in a line, from the left
- Elements will only wrap when items cannot fit
Block
- Same height as content, same width as container
- Always starts on a new line
The Box Model
Padding
Border
Margin
Line return
Content Wrapper
Typography
Times New Roman : Legal document
Comic Sans: Casual Font childlike
5 categories of typefaces
Script, Decorative, Monospace, Serif, Sans-serif
Scripts
Hand lettered look, greeting cards, in web headlines or small decorative text details
Decorative
Ornamental, headings and decorative details
Monospace
Each character uses the same amount of horizontal space, often used for displaying code
Serif
Distinguished by small decorative lines, tend to be viewed as traditional and formal
Sans-serif
Do no have decorative lines, contemporary and modern
font-family
font-weight
- normal is equal to 44 and is also the default for body text*
- bold is equal to 700 and is the default for headings
@font-face
font-size
text-decoration
Flexbox and Grid
flex-
direction
flex-direction
flex-wrap
flex-grow
flex-shrink
flex-alignment
css grid
- When using the value of grid the items will span the width of its container.
- When using the value of inline-grid the items will span the width of its content.
Grid Lines
Grid Cell
Gid tracks and gutters
The fraction Unit : fr
Adding Gutters with gap
Explicit vs Implicit grid
Defining the grid structure
Positioning grid-items
Advanced selectors
Descendant Selectors
Child combinator
Sibling Combinators
Adjacent Sibling combinators
General sibling combinator
first-child and last-child
first-of-type and last-of-type
Responsive
Images
