DRAFT
This is a collection of notes that I took from a 6-hour YouTube tutorial posted by FreeCodeCamp.org. It's based out of Jad Khalili's Udemy Course CSS-From Zero to Hero.
- A language used to style and design to websites
- Goes hand in hand with HTML.
- A standard maintained by W3C
A way to grab part of HTML and manipulate them for styling * element is the simplest * class - add a classname - add to any element (to use in css, prefix . symbol). Use dashes to separate words, short words as per convention. * id selector - give an id name (prefix # symbol to use in css)
The more specific the selector, the more powerful it is. I.e. the more chances of it getting applied
The sequence of specificity is => inline style > id selector > class > element
selector: eg. h2:hover
Some other pseudo-selectors are: hover, first-child, last-child, nth-child(n), only-child, link, visited,
They are lower than pseudoselectors for specificity. Some examples:
- adjacent sibling using + (eg. h2 + a -> all anchor tags after h2)
- general sibling combinator using ~ ( eg. textarea ~ button - > they have to follow each other in same parent)
- child selector using > (eg. ul > li => Every li inside a ul)
using [attr=value]
Use [attr^=value] for 'starts with' (This is like regex)
Another e.g. [attr*=value]
Use quotes if the actual attribute in a tag uses it.
You can add multiple selectors to an html tag.
The element of style that is being manipulated
2 components - actual property itself, and the value
property : value ;
CSS block - A collection of properties
selector {
property1 : value1 ;
property2 : value2 ;
}
hexcode uses - 3 pairs of hexcodes - each pair representing r, g and b ff 255 at the rightmost pair - blue
convention - element selectors should be at the top
background: red; (instead of background-color)
functions in css: some examples: More to follow: rgb, url("")
background: url("link\to\image")
background-color can be used for color and background-img for image but background covers both thus the better choice
background-repeat: no-repeat; (repeat is default, image would be tiled)
background-size: 50px 100px (set to a particular size)
background-size: cover; (Cover the entire element's background so depends on parent element)
background-size: contain; (Use original size and leave the rest empty)
use rgba function which is similar to rgb() function but uses a fourth parameter - opacity (0 - 1) eg. rgba(204, 229, 255, 0.4) for 40% opacity ("a" stands for alpha. It is also known as opacity, transparency)
2 types of gradients - radial and linear radial means outwards (or inwards?) and linear means top-down, left-right, diagonal
background: linear-gradient(to right, red, blue);
background: linear-gradient(to right, rgb(), rgba(0)) <= This is a good option to use in side menus
Some of the options that can be used as the first parameter are: to right, to bottom right, -90deg, 146deg
The radial equivalents are:
radial-gradient(red, blue, green)
radial-gradient(red 20%, blue 40%, green 55%)
radial-gradient(circle, red, blue, green) <= To specify the shape of the gradient itself, use one of circle or ellipse(default) as the first parameter
2 types of units: absolute/relative
relative - dependent on something (like size of parent, size of viewport). eg. percentages. Percentage is good for responsiveness.
font-size: 2em; twice the standard size
vh, vw (view-hieght, view-width) <= percentage of total viewport and not any body part
Example of absolute
font-size: 2cm;
height: 400pt slightly larger than px
height: 400pc signficantly larger than px (12 pt)
Stick to use relative units instead of absolute of pixels, cms, mms
Things you can change no matter the font e.g. underlining, capitalization text-decoration:
text-decoration: none|underline|line-through|overline;
text-transform: uppercase|lowercase|capitalize
text-align: left|right|center|justify
Font-size, bolding, style
font-size:1.25em
font-weight: 0-infinity(bounded by what the font supports)
| makes the text wider or bigger (400 is normal range)
font-style: normal|italic|oblique
A collection of fonts that have similar features 3 families - serifs, san-serifs and monospace
- serifs - small lines at edges, mostly used in academic papers etc; eg. Tomes New Roman, Georgia
- san-serifs - easier to read, most modern websites use it (Calibri, Arial)
- monospace - puts more space (e.g. Courier New) 2 ways to use font-family
font-family: "Times New Roman", serif; <= use std serif font if TNR is not available
Say using fonts.google.com. Customise fonts, but that comes at the cost of load time. Google Fonts provide CSS url to load fonts and the font-family properties
Every element is surrounded by a box, boxes are connected together, box shapes and layers can be modified. More basic layout features compared to flexbox and grid.
The order to keep in mind from innermost to outermost =>
content > padding > border > margin
where:
- padding <= space b/w content and border
- border <= divider b/w content/padding and margin, invisible by default but can be changed
- margin <= space b/w other elements - external space around external elements
Changing content size height and width - use relative units preferably - width more importantly
border: size (1-3px normal) style (solid|dashed|dotted|double) color (name, rgb, color hex); eg. border: 2px solid rgb(204, 229, 255);
padding: 20px <= all sides
padding- for whichever side you want eg. padding-right, -top, -bottom, -left alternatively, use shorthand - padding: 100px 40px 5px 0 order is top, right, bottom, and left
margin is similar to padding but for external space
A common way to use in CSS: margin: 80px 40px <= top-bottom first and left-right second
change how an element floats in a page
e.g. float: right;
display <= to change display property of an element that is default
e.g. div, p are block elements - but can be changed to inline with display OR span is inline element - change to block
display: none; <= hide the entire box
display: inline-block <= inline element with block level spacing
Techniques for advanced website layouts
display: flex <= Add this to a container class to provide multiple properties for layouts for easy arrangement organized into a container element and other items within. flex items are child elements of the container elements underneath fits available width
Some properties available with flex:
flex-direction: column; =< puts items in column. Other options are column-reverse (flips direction), row, and row-reverse.
flex-wrap: wrap|wrap-reverse|nowrap
horizontal alignment
justify-content: center|flex-end|space-between|space-around;
vertical alignment. align-items property default is stretch
align-items: center|flex-start|flex-end|stretch|baseline
Flex Item Order
specify order
order: <n>
Flex Grow and Shrink
flex-grow: 1; <= every item gets the same amount of width. It can be other numbers as well; higher the value, more the space it gets, depending on the other items in the flex container
flex-shrink: 0; <= Do not shrink an item
flex-shrink: 3; <= that value should shrink 3 times
flex-basis: 100px; <= minimum size - put a baseline in aligning items
flex: grow shrink basis <= all the above 3 in the same line - a short form of achieving the same result
eg. flex: 1 1 100px
align-self: flex-start; <= align to the start of a container (align a particular item otherwise similar to align-items for values)
Grid Vs FlexBox Similar in what outcomes both help us achieve but Grid system is much more malleable, a lot more tools. Another difference is that Grid focuses on both width and height unlike Flex which has more control on the width aspect.
Activated using a display property (like Flexbox)
display: grid;
Makes available a whole lot of properties for manipulation
Use template columns and rows to split the container with either pixel values, any other units or auto. Examples:
grid-template-columns: 10px 50px 10px
grid-template-rows: 50px 250px
grid-template-columns: auto auto auto
grid-template-rows: auto auto
Justify and Align Grid
justify-content: end <= justifies the entire container. Other options are: end|start|space-around|space-evenly
align-content: adjust in the height level - up or down
Row and Column gaps
grid-column-gap: 150px;
grid-row-gap: 300px;
grid-gap: <row> <column>;
eg. grid-gap: 300px 150px;
Each column is given a line. This can be used to control the span of elements. For example:
grid-column: 1 / 3; <= Start at line 1 and end at 3
grid-row: 1 / 3; <= have it span rows
you can provide a span value for end point instead of an endpoint
grid-column: 1 / span 2;
Grid Area <= summarizes the above 2 in one line
grid-area: row start/column start row end/column end;
e.g. grid-area 2 / 1 span 2 / span 3;
If properties change on the basis of pseudoselectors, transition can be used to put effects on that. Most commonly, the time for transition. use transition on the base selector
transition: background 2s ease-in-out 1s;
Transition is very good from a effects point of view - eases things - without it gets jarring. Other easing property values are ease|ease-in|ease-out
use 'all' for transition to have the transition for all properties. In above example, use it instead of background if there are more properties.
Transformation Functions* Physical changes, movement, rotation functions
transform: translate(50px, 30px )
translate (x-axis, y-axis)
scale(2.5) scale everything 2.5 times all including
rotate(-45deg)
skewX(45deg)
matrix function summarizes everything into one go Clunky function - don't use it.
Include prefix for browser specific css functionality -webkit-, -moz-, -o-
design your own animation
@keyframes red-to-black {
from {background: red; transform: translate(0px, 0px)}
to {background: black;transform: translate(20px, 0px)}
or use percentages
0% {background: red;}
50% {background: yellow;}
100% {background: black;}
}
In the selector
animation-name: red-to-black;
animation-duration: 4s;
animation-timing-function: ease|linear|ease-in|ease-out|ease-in-out
animation-delay: 2s; When the animation starts after event (page load)
negative delay is possible, the animation starts at a point where it would have to advance to otherwise
animation-iteration-count: 2|infinite
animation-direction: normal|reverse|alternate|alternate-reverse
shorthand property:
animation: red-to-black duration timing-function delay iteration direction;