CSS:
- {background-image:url(top.png);} (Note: image will repeat itself until fills the whole space)
- {background-size:cover;} (Note: background will be filled with a single image)
- Center the container class by specifying{margin:0 auto;} and{width: 300px;}
- {opacity: 0.0;} makes entire element transparent (0.0 being most transparent and 1.0 being most opaque)
- {background-color: rgba(73,201,192, 0.5);} (Note: only background becomes transparent)
- {letter-spacing: 10px;}
- Creating buttons using <a> tags which is an inline element. {display: block;}
- div:hover{background-color: red;} is used to change background upon hover.
- {border-radius: 10px;} is used to round the corners of elements such as a button
- {text-align: left;} aligns inline and inline-block elements left.
- {margin: 0 auto;} and {text-align: center;} can center elements, but margin is for block level elements like containers and text-align is for inline/inline-block elements like buttons and text.
- {transition; all 1s;} (Note: Transition is used to add animations; The target can be a property, like color, but we often just specify all so it applies to all properties.)
- {line-height: 10px;} (Note: to vertically center the text by specifying the same value for the height and the line-height)
- {font-weight: bold;} (Normal or bold to change thickness of text)
- {width: 50%;} (Specifying size with % instead of px, can calculate width based on parent width. Same for height).
- Overlapping elements {position: absolute;} then position relative to the top-left corner of the webpage using {top: 50px; left: 50px;} properties, or specifying {position: relative;} to its ancestor element.
Using Icons on Webpage:
- Copy the entire font-awesome directory into your project
- In the <head> of your html, reference the location to your font-awesome.min.css. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
- Check out the examples to start using Font Awesome!
- Add a <span> tag with the classes fa and fa-<icon name>
