Last active
December 11, 2015 12:18
-
-
Save Elbone/4600079 to your computer and use it in GitHub Desktop.
Some html tips for Shillington web students
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| BOX MODEL | |
| ========= | |
| Changes default box model behaviour so that padding is INSIDE the box dimensions. Add this under your reset. | |
| */ | |
| *, *::after, *::before { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* | |
| SMOOTH FONTS | |
| ============ | |
| Helps render fonts a little nicer in webkit browsers (Chrome, Safari) | |
| */ | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* | |
| CLEAR FIX | |
| ========= | |
| Apply the "clearfix" class to any parent element that has floats inside | |
| */ | |
| .clearfix::after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| /* | |
| DISABLE DECLARATION | |
| =================== | |
| If you want to disable a css declaration without deleting it you can do one of the following | |
| */ | |
| /* "Correct" method */ | |
| .example-1 { | |
| /* color: red; */ | |
| } | |
| /* "Dodgy" method */ | |
| .example-2 { | |
| //color: red; | |
| } | |
| /* | |
| SELECTION COLOURS | |
| ================= | |
| Change color of text selection | |
| */ | |
| /* Custom text-selection colors */ | |
| ::-moz-selection { | |
| background: #fff; | |
| color: #000000; | |
| text-shadow: none; | |
| } | |
| ::selection { | |
| background: #fff; | |
| color: #000000; | |
| text-shadow: none; | |
| } | |
| /* | |
| HORIZONTAL RULES | |
| ================ | |
| A better looking default horizontal rule | |
| */ | |
| hr { | |
| display: block; | |
| height: 1px; | |
| border: 0; | |
| border-top: 1px solid #ccc; | |
| margin: 1em 0; | |
| padding: 0; | |
| } | |
| /* | |
| IMAGES | |
| ====== | |
| Remove the gap between images and the bottom of their containers: h5bp.com/i/440 | |
| */ | |
| img { | |
| vertical-align: middle; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- Enforce utf-8 characterset so you can sue special characters --> | |
| <meta charset="utf-8"> | |
| <!-- Suggest users install Chrome Frame [http://www.google.com/chromeframe] --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <!-- Describe the page (SEO) --> | |
| <meta name="description" content="The description of the site"> | |
| <!-- Set the website zoom to actual size --> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment