In my following Classes, we will be starting to use CSS along with our HTML.
Now, you may still feel that this is a large task, but I assure you, this is all very easy.
Now, CSS has a ton of attributes, and memorizing them all won't be easy at first, so here's a reference sheet. I've memorized them all though, so if you have any questions, just ask!
As we learn new attributes, I will add them to this post.
Generic style attributes:
padding: 0px 0px 0px 0px;/* The order goes "top, right, bottom, left" */
/* Padding causes there to be padding within a div, etc */
margin: 0px 0px 0px 0px;/* The order is the same for padding */
/* Margin causes there to be a "padding: on the outside of a div, image, etc */
/* Margins can use negative numbers */
width: 600px; /* Can also be a percentage, like "80%" */
/* This attribute simply sets the width of something */
height: 200px;/* This attribute simply sets the height of something */
Background style attributes:
background-color: #FFFFFF;/* Adds a background color to a div, etc */
/* In this case, we used a hex code (white), but use of RBG is allowed */
background-image: url(image.png);/* Adds a background image to a div, etc */
background-repeat: no-repeat;/* This will make the background repeat, or not */
/* You can use the following: no-repeat, repeat, repeat-x, repeat-y */
background-position: top;/* If you choose not to repeat an image, you can choose where it should go */
/* You can use the following: center, top, right, bottom, left */
Text style attributes:
color: #FFFFFF;/* Defines the font color */
/* In this case, we used a hex code (white), but use of RBG is allowed */
font-family: Verdana, Geneva, sans-serif;/* Defines the fonts to be used */
/* Best to stick with web safe fonts */
font-size: 12px;/* Simply defines the size of the font */
text-align: left;/* Formats the alignment of the text */
/* You can use the following: center, left, right, justify */
Border style attributes:
border-color: #FFFFFF;/* Defines the border color */
/* In this case, we used a hex code (white), but use of RBG is allowed */
border-width: 2px;/* Defines the width of the border */
/* you may also set different widths to each side: 2px 1px 3px 0px (top right bottom left) */
border-style: solid;/* Sets the border style, obviously */
/* You may use the following: dashed, dotted, double, groove, inset, none, outset, ridge, solid */
As soon as we learn more in further lessons, I will add them.
Session 3 coming real soon, most likely i will finish it today.