HTML Flashcards
Sizes for font-size
font-size: px / in / or cm;
text-decoration:
none, underline, line-through, overline
a : hover { color: green; }
Styles link when the user hovers over.
a : visited { color: red; }
Styles visited links
Adjust Font Weight
font-weight: normal or bold;
Font Shorthand
font: weight / size / family
font: normal 28px Impact, fantasy;
Image Sizing
HTML: attribute within the img tag. height=”100” width=”100”
CSS: img { width: 100 px; } needs pixel
*if both are set, CSS overrides HTML
Image border-styles
solid, dotted, dashed, double, groove, ridge, inset, outset, and none.
border-width
Sets the width of the border.
border-width:20px;
border-color
Need to set a border style before assigning a color.
border-color: gold;
Border shorthand
border: 4px dotted green;
width-style-color (can be put in any order)
Margin property
Used to add space around HTML elements.
margin or margin-top, -right, -bottom, -left
Margin shorthand
margin: top right bottom left px;
margin: 10px; (sets all 4 sides)
Centering with auto margin
(1) Set width or container i.e. html { width:320px; }
(2) set margin as margin:0 auto;
box-shadow
box-shadow: 5px 15px;
box-shadow: left-right / up-down
box-shadow color
Default is set as the same color as page text.
box-shadow: 5px 5px red;
Blur & Spread
box-shadow: x y blur spread;
text-shadow
Same values as box shadow, but no spread value.
text-shadow: 3px 3px 5px blue;
(x y shadow position) (size & color of shadow)
Multiple Shadows
Add more than 1 text-shadow with lists separated by a comma.
text-shadow: -3px 0 red, 3px 0 cyan;
Background-Image Property
background-image: url( ) ;
Transparent Background Images
background-color: red;
background-image: url( );
*Red color will show up if image is semi-transparent
Background Shorthand
Combines color and image.
background: hotPink url( );
* Order doesn’t matter
List-Style-Type
Styles the bullet
list-style-type: disk/square/circle/none;
List-Style-Image
Replaces bullet with an image.
list-style-image: url ( );
Header/Footer/Section
Used to separate page into semantic sections.
Text-Align
text-align: center/left/right/justify;
Doctype
(!doctype html)
Put at the start of your code to tell the web browser your page uses HTML.
Stylesheet Link
(link rel=”stylesheet” href=””)
Rel: Attribute sets the type of link it is.
Href: Attribute sets the link location.
Comment Out Code
Surround elements with <!--this markup--> to hide, but easily bring back later.
TODO Comments
Add reminders todo things later. Google Style Guide: <!--TODO: Put task here-->
CSS Comments
/This is a CSS Comment/
Margin
Adds space around the outside of an element.