| Code | Description |
|---|---|
| <link href="style.css" rel="stylesheet"> | Attach this code inside the head to link to your CSS file.
rel describes the relationship. |
| <p style='color: blue;'>Hello</p> | inline styles you can add directly to html |
| Codecademy CSS resource 1
Codecademy Set up a workspace Codecademy CSS cheatsheet |
Resources for CSS |
| CSS code | target in html | Description |
|---|---|---|
| * | targets everything | Universal |
| .green | class | targets elements with class |
| [href] | href | targets elements with href |
| type[attribute*=value] | img and media files | img src='/images/seasons/cold/winter.jpg'
img[src*='winter'] |
| h1.special | the class of h1 | If h1 has a class called special you can do this. |
| .main-list li | <ul class='main-list'> <li> |
The element below the class. |
| CSS code | target in html | Description |
|---|---|---|
| p:hover | p | on hover |
| :focus | anchor tags | targets elements with a |
| :visited | a | targets elements with a |
| :disabled | a | targets elements with a | :active | a | targets elements with a |
| CSS code | target in html | Description |
|---|---|---|
| font-family: 'Courier New'; | font | If font name has a space then use '' |
| font-weight: bold or 18px; | fonts | can use bold or px or normal |
| opacity: 0.5; | transparency | until 1.0 |
| background-image: url('') | background image | Just add URL | color: blue !important; | !important | will override other css |
| CSS code | target in html | Description |
|---|---|---|
| border: 3px solid coral; | Width: thich medium thick
Style: solid none dotted |
width style color |
| border-radius: 5px or 50%; | border curvature | can use px or percent |
| padding: 6px 11px 4px 9px; | clockwise | top right bottom left can be used for margin |
| margin: 0 auto; | will center the div in its containing element | instructs the browser to adjust the left and right margins until centered. | min-width: 300px; max-width: 600px; min-height: 150px; max-height: 300px; |
will ensure min and max value | irregardless of web size |
| overflow: scroll; | can be hidden or visible instead of scroll | irregardless of web size |
| visibility: hidden; | can be visible or collapse | irregardless of web size |
| margin: 0; padding: 0; |
resetting defaults | resets the default of most browsers |
| box-sizing: border-box; or content-box; |
browser default is the content box | we can reset it to border box, added to * |
| Code | Description |
|---|---|
| position | relative static fixed absolute sticky |
| z-index: 1; | how far forward or backward |
| display: block inline inline-block; | block: A float that takes up the whole street width. After it passes, the next float comes.
inline: People walking in the parade. They just flow, side by side. inline-block: People walking in boxes. They flow side by side, but each person has a box (with set dimensions) around them. |
| float: right; | moves it as far right as possible |
| clear: right; | how elements should behave when they bump into each other on the page. |
| Links |
|---|
| Box Model> |
| Colors Cheatsheet |
| Named Colors> |