Embed Size (px)
Citation preview
CSS BasicsGuide
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
How CSS Is Written
CSS code is where you ‘select’ an element on a page and ‘declare’ what you want to do with it.
The declaration you make will consist of a ‘property’ and a ‘value’.
Text
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Font Color
Amelia Briscoe - @amelia_briscoe
#wpmelb
Font Size
1em is relative to the default browser font size, usually 16px.1em = 16px2em = 32px
Amelia Briscoe - @amelia_briscoe
#wpmelb
Font Weight
If the font has more than one version, you can use the number values. Otherwise it will choose the closest keyword.
Amelia Briscoe - @amelia_briscoe
#wpmelb
Font FamilyThree Ways:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Oswald);
WordPress Enqueue: https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Amelia Briscoe - @amelia_briscoe
#wpmelb
Font Family
Amelia Briscoe - @amelia_briscoe
#wpmelb
Text Align
Background
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Background Color
Amelia Briscoe - @amelia_briscoe
#wpmelb
Background Images
Links
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Link Color
Amelia Briscoe - @amelia_briscoe
#wpmelb
Link Color :hover
Amelia Briscoe - @amelia_briscoe
#wpmelb
Link Underline
Border
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Borders
Spacing
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Margin
Margin is the space between elements on a page
Amelia Briscoe - @amelia_briscoe
#wpmelb
Padding
Padding is the space between the element and it’s container
Media Queries
Presented by Amelia Briscoe@amelia_briscoe
Amelia Briscoe - @amelia_briscoe
#wpmelb
Amelia Briscoe - @amelia_briscoe
#wpmelb
Handy LinksWordPress Enqueue Styles in the functions.php file:https://codex.wordpress.org/Function_Reference/wp_enqueue_style
WordPress CSS Plugin: https://wordpress.org/plugins/simple-custom-css
CSS Best Practices: http://codeguide.co/#css
Amelia Briscoe - @amelia_briscoe
http://ameliabriscoe.comhttp://
member.ameliabriscoe.com
#wpmelb
Questions???
