31848249
Description
Flashcards by Justina Sadikova, updated more than 1 year ago
|
|
Created by Justina Sadikova
over 3 years ago
|
|
| Question | Answer |
| serif | fonts that have small stroke at edge of each letter, formal, elegant |
| sans-serif | fonts have clean-lines, modern, minimalistic |
| monospace | font where all letters have same fixed width, mechanical |
| cursive | fonts that imitate human handwriting |
| fantasy | fonts that are decorative/playful |
| font-family (property) | specifies font of a text .p1 { font-family: "Times New Roman", Times, serif } |
| web safe font | universally installed across all browsers and devices |
| fallback font | list of similar "backup fonts", in the font-family property |
| font-style (property) | mostly used to specify italic text p.italic { font-style: italic: } |
| font-weight (property) | specifies weight of font p.thick { font-weight: bold; } |
| font-variant (property) | specifies whether text displayed in small-caps font p.small { font-variant: small-caps; } |
| font-size (property) | sets size of text h1 { font-size: 40px } |
| link styling | a: link a: visited a: hover a: active |
| text-decoration (property) | removes underlines from links a: link { text-decoration: none; } |
| list-style-type (property) | specifies type of list (circle, square, upper-roman, lower-alpha) ul.a { list-style-type: circle; } |
| list-style-image (property) | specifies an image as the list item marker ul { list-style-image: url('sqpurple.gif'); } |
| list-style-position (property) | specifies the position of the list-item markers ul.a { list-style-position: outside; } |
| display (property) | specifies if/how an element is displayed default: block, inline |
| block-level element | always starts on new line, and takes up full width available Examples: <div>, <h1>-<h6>, <p>, <form>, <header>, <footer>.<section> |
| inline element | does not start on new line, takes up only necessary width examples: <span>, <a>, <img> |
| max-width (property) | prevents used value of width property from becoming larger than value specified by max width div.ex1 { max-width: 500px; margin: auto; border: 3px solid #73AD21 |
| border-style (property) | specifies what kind of border to display examples: (dotted, dashed, solid, double, groove) |
| border-width (property) | specifies width of four borders p.one { border-style: solid; border-width: 5px; } |
| border-color (property) | specifies color of border, 1-4 values p.one { border-style: solid; border-color: red green blue yellow; } |
| border (property) | shorthand property for border-width, border-style (required), and border-color p { border: px solid red; } |
| border-radius (property) | used to add round corners to an element p { border: 2px solid red; border-radius: 5px } |
| margin (properties) | used to create space around elements, top, right, bottom, left values: auto, length, %, inherit p { margin-top: 100px margin-bottom: 100px; margin-right: 150 px; margin-left: 80 px; } |
| margin (single property) | shorthand for top, right, bottom, left p { margin: 25x 50px 75px 100px } |
| padding (property) | used to create space around an element's content, inside any predefined borders values: top right bottom left div {padding: 25 px 50px; } |
| height/width (property) | used to set height and width of element (not including padding, border, or margins) values: auto, length, %, initial, inherit div { height: 200px; width: 50% background-color: powderblue; } |
| CSS Box Model | All HTML elements can be considered as boxes Path: content, padding, border, margin div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } |
| outline | line drawn outside the element's border |
| outline-style (property) | specifies the style of an outline, values: (dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden) p.dotted {outline-style: dotted;} |
| outline-width (property) | specifies width of outline, values: (thin, medium, thick, px) p.ex1 { border: 1px solid black; outline-style: solid outline-color: red; outline-width: thin; } |
| outline-color (property) | used to set color of outline, by name, HEX, RGB, HSL, Invert p.ex3 { border: 2px solid black; outline-style: offset; outline-color: grey; } |
| outline *shorthand* (property) | sets following individual outline properties: outline-width, outline-style (required), outline-color p.ex4 { outline: thick ridge pink; } |
| outline-offset (property) | adds space between outline and edge/border of element, space between transparent p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; } |
| color (property) | used to specify color of text by name, HEX, RGB body { color: lightblue; } |
| text-align (property) | used to set horizontal alignment of text (left, centered, right, justified) h1 {text-align: center; } h2 { text-align: left;} |
| text-transform (property) | specifies uppercase and lowercase letters in text (uppercase, lowercase, capitalize) p.capitalize {text-transform: capitalize;} |
| text-indent (property) | specifies indentation of first line of text p {text-indent: 50px} |
| letter-spacing (property) | specifies space between characters in text h1 {letter-spacing: 3px;} h2 {letter-spacing: -3px} |
| line-height (property) | specifies space between lines p.small {line-height: 0.8;} |
| word-spacing (property) | specifies space between words in text h1 {word-spacing: 10px;} |
| text-shadow (property) | adds shadow to text h1 {text-shadow: 2px 2px;} |
| opacity (property) | specifies opacity/transparency of element, 0.0-1.0 img { opacity: 0.5; } |
| :hover (selector) | used to select elements when you mouse over them img :hover {opacity: 1.0;} |
| gradient (properties) | display smooth transitions between two or more specified colors #grad { background-image: linear-gradient(red, yellow) } |
| radial gradient (property) | defined by center #grad { background-image: radial-gradient(red, yellow, green) } |
| box-shadow (property) | applies shadow to elements div { box-shadow: 10px 10px; } |
Want to create your own Flashcards for free with GoConqr? Learn more.