Css

Front 1

CSS selector

Back 1

used to select what item is to be styled
selector{styling:value;}

Front 2

CSS font

Back 2

color:fontcolour;
eg.
body{
color:white;
}

Front 3

CSS font families

Back 3

Sans serif - without lines at the end of characters
serif - with lines
monospace - all letters are same width

Front 4

CSS class

Back 4

allows classes constructed in html to be styled as a group
a.class {color:blue}
.class {color:blue}

Front 5

CSS links

Back 5

a:link {color:blue}
a:visited {color:green}

link and visited are psuedo classes. They follow the selector or selector.class

Front 6

Psuedo element

Back 6

similar to psuedo classes, they follow selectors and classes. They use two colons however
p::first-line
this finds the first line in a paragraph

Front 7

CSS Borders

Back 7

border: 10px solid black

border: width type colour

Front 8

CSS Margins

Back 8

clears the area outside border of the element (makes element bigger with invisible space)

margin-left:10px;

margin-position:size px;

Front 9

CSS padding

Back 9

clears area inside the border of an element making it bigger. Padding has background colour of element

Front 10

CSS dimensions

Back 10

setting the size of an element
height:10px
max-height:100px
min-height:10px

same can be done with width

Front 11

CSS Display

Back 11

Changes layout of items and visibility
hide = h1 {visibility:hidden;} - still takes up space
h1 {display:none} - doesnt take up space

display:
inline - horizontal list
block - vertical list

Front 12

CSS Positioning

Back 12

relative - positioned relative to normal position
absolute positioning - positioned relative to the parent element that has a position

Front 13

CSS Floating

Back 13

Moving an element left or right. The element will go as left/right as possible.
float:left;

Front 14

CSS Block elements

Back 14

Elements which take up all horizontal space possible

Front 15

CSS Horizontal Align

Back 15

Arranges block elements to the left right or center.
Items should be aligned and then set a width. Can be done using float or (in the case of aligning right):
position:absolute;
right:0px;
width:100px;

Front 16

CSS Combinators - Descendant

Back 16

to select elements within elements the following is done inside the selector
div p {...}
this selects all p elements inside div

Front 17

CSS Combinators - Child Selector

Back 17

div > p {...}
selects all p which are immediate children of div

Front 18

CSS Combinators - Adjacent Sibling Selector

Back 18

div + p {...}
selects all elements that adjacent siblings of the specified element

Front 19

CSS Combinators - Sibling Selector

Back 19

div ~ p
selects all siblings of an element