{"id":16902735,"url":"https://github.com/csabapalfi/basic-html-css","last_synced_at":"2025-09-15T07:06:38.437Z","repository":{"id":17344373,"uuid":"20115754","full_name":"csabapalfi/basic-html-css","owner":"csabapalfi","description":"💅 Basic HTML \u0026 CSS refresher","archived":false,"fork":false,"pushed_at":"2018-09-21T22:52:37.000Z","size":2178,"stargazers_count":18,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T14:42:06.469Z","etag":null,"topics":["css","html","notes"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csabapalfi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-23T22:17:22.000Z","updated_at":"2025-02-23T22:15:33.000Z","dependencies_parsed_at":"2022-09-10T13:41:35.717Z","dependency_job_id":null,"html_url":"https://github.com/csabapalfi/basic-html-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/csabapalfi/basic-html-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csabapalfi%2Fbasic-html-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csabapalfi%2Fbasic-html-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csabapalfi%2Fbasic-html-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csabapalfi%2Fbasic-html-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csabapalfi","download_url":"https://codeload.github.com/csabapalfi/basic-html-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csabapalfi%2Fbasic-html-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275219812,"owners_count":25425948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","notes"],"created_at":"2024-10-13T18:07:38.786Z","updated_at":"2025-09-15T07:06:38.414Z","avatar_url":"https://github.com/csabapalfi.png","language":null,"readme":"# Basic HTML \u0026 CSS refresher\n\nSome notes [HTML \u0026 CSS lessons from here](http://learn.shayhowe.com/html-css/)\n\n- [Basic HTML \u0026 CSS refresher](#basic-html--css-refresher)\n  * [Lessons](#lessons)\n  * [1. Introduction](#1-introduction)\n    + [HTML terms](#html-terms)\n    + [self closing tags](#self-closing-tags)\n    + [structure: `\u003cdoctype\u003e`, `\u003chead\u003e`, `\u003cbody\u003e`](#structure-doctype-head-body)\n    + [HTML and CSS validation](#html-and-css-validation)\n    + [CSS terms](#css-terms)\n    + [referencing CSS](#referencing-css)\n    + [CSS resets](#css-resets)\n  * [2. Basic HTML](#2-basic-html)\n    + [semantics - using the proper element](#semantics---using-the-proper-element)\n    + [block](#block)\n    + [inline](#inline)\n    + [divs, spans](#divs-spans)\n    + [headings](#headings)\n    + [paragraphs](#paragraphs)\n    + [`\u003cb\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`](#b-strong-em)\n    + [building structure](#building-structure)\n    + [head vs header vs h1-h6](#head-vs-header-vs-h1-h6)\n    + [div vs article vs section](#div-vs-article-vs-section)\n    + [HMTL entities](#hmtl-entities)\n    + [hyperlinks](#hyperlinks)\n  * [3. Basic CSS](#3-basic-css)\n    + [the cascade](#the-cascade)\n    + [specificity](#specificity)\n    + [combining selectors](#combining-selectors)\n    + [layering styles](#layering-styles)\n    + [colors](#colors)\n    + [lengths](#lengths)\n  * [4. The box model](#4-the-box-model)\n    + [`display`](#display)\n    + [the box model concept](#the-box-model-concept)\n    + [width and height](#width-and-height)\n    + [margin and padding](#margin-and-padding)\n    + [margin](#margin)\n    + [padding](#padding)\n    + [margin and padding declaration](#margin-and-padding-declaration)\n    + [margin and padding colors](#margin-and-padding-colors)\n    + [borders](#borders)\n    + [border-radius](#border-radius)\n    + [box-sizing](#box-sizing)\n    + [vendor prefixes](#vendor-prefixes)\n    + [developer tools](#developer-tools)\n    + [universal selector](#universal-selector)\n  * [5. Positioning content](#5-positioning-content)\n    + [positioning with floats](#positioning-with-floats)\n    + [floating in practice](#floating-in-practice)\n    + [clearing \u0026 containing floats](#clearing--containing-floats)\n    + [clearing floats](#clearing-floats)\n    + [containing floats (clearfix)](#containing-floats-clearfix)\n    + [keep track of float and always clear/contain them](#keep-track-of-float-and-always-clearcontain-them)\n    + [positioning with inline-block](#positioning-with-inline-block)\n    + [inline block vs spaces](#inline-block-vs-spaces)\n    + [creating a reusable layout](#creating-a-reusable-layout)\n    + [uniquely positioning elements](#uniquely-positioning-elements)\n    + [`position: relative`](#position-relative)\n    + [`position: absolute`](#position-absolute)\n  * [6. Typography](#6-typography)\n    + [adding color to text](#adding-color-to-text)\n    + [font-family](#font-family)\n    + [font-size](#font-size)\n    + [font-style](#font-style)\n    + [font-variant](#font-variant)\n    + [font-weight](#font-weight)\n    + [line-height](#line-height)\n    + [font shorthand](#font-shorthand)\n    + [`:hover`](#hover)\n    + [text-align](#text-align)\n    + [text-decoration](#text-decoration)\n    + [text-indent](#text-indent)\n    + [text-shadow](#text-shadow)\n    + [text-transform](#text-transform)\n    + [letter-spacing](#letter-spacing)\n    + [word-spacing](#word-spacing)\n    + [web safe fonts](#web-safe-fonts)\n    + [embedding web fonts](#embedding-web-fonts)\n    + [quotes, citations](#quotes-citations)\n  * [7. Backgrounds](#7-backgrounds)\n    + [setting background color](#setting-background-color)\n    + [setting background image](#setting-background-image)\n    + [background repeat](#background-repeat)\n    + [background position](#background-position)\n    + [CSS3: Gradient backgrounds](#css3-gradient-backgrounds)\n    + [CSS3: linear gradient](#css3-linear-gradient)\n    + [CSS3: radial gradient](#css3-radial-gradient)\n    + [CSS3: gradient color stops](#css3-gradient-color-stops)\n    + [CSS3: multiple background images](#css3-multiple-background-images)\n    + [CSS3: background size](#css3-background-size)\n    + [CSS3: background clip and origin](#css3-background-clip-and-origin)\n  * [8. Lists](#8-lists)\n    + [unordered lists](#unordered-lists)\n    + [ordered lists](#ordered-lists)\n    + [description lists](#description-lists)\n    + [nesting lists](#nesting-lists)\n    + [list style type](#list-style-type)\n    + [image as a list item marker](#image-as-a-list-item-marker)\n    + [list-style-position](#list-style-position)\n    + [list-style shorthand](#list-style-shorthand)\n    + [horizontally displaying a list](#horizontally-displaying-a-list)\n    + [floating list](#floating-list)\n  * [9. Adding Media](#9-adding-media)\n    + [adding images](#adding-images)\n    + [image formats](#image-formats)\n    + [image sizing](#image-sizing)\n    + [positioning images](#positioning-images)\n    + [image element vs background image](#image-element-vs-background-image)\n    + [adding audio](#adding-audio)\n    + [audio types, fallbacks](#audio-types-fallbacks)\n    + [adding video](#adding-video)\n    + [custom audio and video controls](#custom-audio-and-video-controls)\n    + [adding inline frames](#adding-inline-frames)\n    + [seamless iframes](#seamless-iframes)\n    + [figures](#figures)\n    + [figure caption](#figure-caption)\n  * [10. Forms](#10-forms)\n    + [initializing a form](#initializing-a-form)\n    + [text fields](#text-fields)\n    + [textarea](#textarea)\n    + [radio buttons](#radio-buttons)\n    + [checkboxes](#checkboxes)\n    + [dropdown lists](#dropdown-lists)\n    + [submit input](#submit-input)\n    + [submit button](#submit-button)\n    + [hidden input](#hidden-input)\n    + [file input](#file-input)\n    + [labels](#labels)\n    + [fieldsets](#fieldsets)\n    + [legend](#legend)\n    + [`disabled` attribute](#disabled-attribute)\n    + [`placeholder` attribute](#placeholder-attribute)\n    + [`required` attribute](#required-attribute)\n    + [additional attributes](#additional-attributes)\n  * [11. Tables](#11-tables)\n    + [table, table rows and cells](#table-table-rows-and-cells)\n    + [table heading](#table-heading)\n    + [table caption](#table-caption)\n    + [table head, body and foot](#table-head-body-and-foot)\n    + [combining multiple cells](#combining-multiple-cells)\n    + [`border-collapse`](#border-collapse)\n    + [border-spacing](#border-spacing)\n    + [adding borders to rows](#adding-borders-to-rows)\n    + [striping tables](#striping-tables)\n    + [aligning text in table cells](#aligning-text-in-table-cells)\n  * [12. Best Practices](#12-best-practices)\n    + [HTML best practices](#html-best-practices)\n    + [CSS best practices](#css-best-practices)\n    + [additional resources](#additional-resources)\n      - [HTML \u0026 CSS](#html--css)\n      - [design inspiration](#design-inspiration)\n      - [frameworks \u0026 style guides](#frameworks--style-guides)\n      - [icons](#icons)\n      - [miscellaneous](#miscellaneous)\n\n## 1. Introduction\n\n### HTML terms\n\n* element: `a`\n* tag: `\u003ca\u003e..\u003c/a\u003e`\n* attribute: e.g. href `\u003ca href=\"http://shayhowe.com/\"\u003eShay Howe\u003c/a\u003e`\n\n### self closing tags\n\n```html\n\u003cbr\u003e \u003cembed\u003e \u003chr\u003e \u003cimg\u003e \u003cinput\u003e \u003clink\u003e \u003cmeta\u003e \u003cparam\u003e \u003csource\u003e \u003cwbr\u003e\n```\n\n### structure: `\u003c!DOCTYPE\u003e`, `\u003chead\u003e`, `\u003cbody\u003e`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\u003c/head\u003e\n  \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### HTML and CSS validation\n\ndo it\n\n### CSS terms\n\n* selector: `p` (type selector), `.class`, `#id`\n* property: `p { font-size: ...; }`\n* value: `p { font-size: 16px; }`\n\n### referencing CSS\n\npreferably single file, in head\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"main.css\"\u003e\n\u003c/head\u003e\n```\n\n### CSS resets\n\n* reset browser defaults\n* has to come at the top of your CSS file\n* popular: [Eric Meyer’s reset](http://meyerweb.com/eric/tools/css/reset/)\n* Normalize.css - more advanced\n\n## 2. Basic HTML\n\n### semantics - using the proper element\n\n* read [this post](http://boagworld.com/dev/semantic-code-what-why-how/)\n* screen readers, seo, shorter code, easier styling\n\n### block\n\n* block-level elements begin on a new line\n* stacking one on top of the other\n* occupy any available width\n* may be nested inside one another and may wrap inline-level elements\n* larger pieces of content, such as paragraphs\n\n### inline\n\n* inline-level elements do not begin on a new line\n* they fall into the normal flow of a document, lining up one after the other\n* only maintain the width of their content\n* inline-level elements may be nested inside one another\n* however, they cannot wrap block-level elements\n* smaller pieces of content, such as a few words\n\n### divs, spans\n\n* solely for styling, no semantic value\n* with class or id for layout, styling\n* class or id value should not conatin styling references but meaning (e.g orange vs social)\n* `div` block element, large groupings of content\n* `span` inline element, smaller groupings of text\n* HTML comments start with `\u003c!-- and end with --\u003e`\n* CSS comments start with `/* and end with */`\n\n### headings\n\n* block-level elements\n* six different rankings, `\u003ch1\u003e` through `\u003ch6\u003e`\n* break up content and establish hierarchy\n* not to increase font size (your CSS reset prevents that anyways)\n\n### paragraphs\n\n* block level\n* pretty self explanatory\n\n### `\u003cb\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`\n\n* `\u003cstrong\u003e` - strong importance\n* `\u003cb\u003e` - stylistically offset\n* `\u003cem\u003e` - italicise text, thereby placing emphasis on it\n\n### building structure\n\n* `div`s have no semantic value, but HTML introduces structural elements\n* `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003carticle\u003e`,\n* `\u003csection\u003e`, `\u003caside\u003e`, and `\u003cfooter\u003e`\n\n### head vs header vs h1-h6\n\n* header - structural element, outlines the heading of a segment of a page\n* header could include a heading, introductory text, maybe even nav\n* head - not displayed on a page, outlines metadata\n* h1-h6 - multiple levels of text heading throughout the page\n\n### div vs article vs section\n\n* div - solely styling, no value to the outline of the document\n* article - content could stand on it's own, can be redistributed independently\n* section - thematic grouping of content\n\n### HMTL entities\n\n* begin with an ampersand `\u0026` and end with a semicolon `;`\n* name or numeric code between\n* [copypastecharacter.com](http://copypastecharacter.com/)\n\n### hyperlinks\n\n* `a` - anchor, link from one web page or resource to another\n* inline element - but the only one which can wrap a block element (HTML5)\n* href (hyperlink reference) attribute, required, specifies destination\n* relative path vs absolute urls\n* mailto: links, with subject, body, cc\n* `target=\"_blank\"` opens link a new window\n* link to part of the same page: id attribute on element, then `\u003ca\u003e` with `href=id-value`\n\n## 3. Basic CSS\n\n### the cascade\n\n* styles cascade from the top of a style sheet to the bottom\n* styles are added or overwritten, latter takes precedence\n\n### specificity\n\n* calculated using **specificity point** values\n* id selectors - class selectors - type selectors\n* type selector: lowest 0-0-1\n* class selector: medium 0-1-0\n* id selector: highest 1-0-0\n* three columns for selector counts\n* higher specificity wins even if it appears earlier in the stylesheet\n\n### combining selectors\n\n* multiple selectors can be specified\n* **key selector** - rightmost, straight before the `{`\n* **prequalifiers** - all the other left to the key selector\n* no space between selectors - e.g type.class not best practice (type element with class) - just use class\n* specificity weights added up per selector type\n\n### layering styles\n\n* use multiple classes (space separated in HTML)\n* helps keeping specificity weights low\n\n### colors\n\n* defined in the sRGB color space\n* 4 ways to represent them: keywords, hexadecimal, RGB and HSL\n* keywords mapped to rgb values (e.g. `black` is `rgb(0, 0, 0)`)\n* hexa: six character notation - 2 chars for r, g, b respectively, 0 black, f white\n* [Adobe Kuler](https://kuler.adobe.com/)\n* rgb() function: with 3 params 0-255, 0 black, 255 white\n* rgba() function: rgb + alpha 0-1 with decimal, 0 transparent, 1 opaque\n* hexa was really popular, now rgba gaining popularity\n* hsl() function: 3 params, not all browsers support it\n* hue: 0-360, color wheel degree\n* saturation: 0-100%, 0 greyscale, 100 fully saturated\n* lightness: 0-100%, 0 black, 100 white\n* hsla() function: HSL + alpha\n\n### lengths\n\n* absolute or relative with different units\n* pixels: `px`, absolute, 96 pixels in an inch but exact measurement may vary\n* relative: rely on the length of another measurement\n* percentages: `%`, relative, defined in relation to the length of another object, e.g. parent element\n* `em`: calculated based on an element’s font size, 1 em = element's font size pixels\n* when a font size is not explicitly stated for an element, the `em` unit will be relative to the font size of the closest parent element with a stated font size\n\n## 4. The box model\n\n### `display`\n\n* determines how elements are displayed (block, inline and more)\n* every element has a default display property value which can be overwritten\n* common values are block, inline, inline-block, and none\n* `inline-block`: allow an element to behave as a block-level element (accepting all box model properties) but displayed inline with other elements\n* `none` completely hides an element and render the page as if that element and nested elements doesn’t exist\n\n### the box model concept\n\n* every element on a page is a rectangular box and may have width, height, padding, borders, and margins\n* the core of the box is defined by the width and height of an element\n* the width and height of an element may be determined by the display property, by the contents of the element, or by specified width and height properties\n* padding and then border expand the dimensions of the box outward from the element’s width and height.\n* any margin we have specified will follow the border.\n* each part of the box model corresponds to a CSS property: width, height, padding, border, and margin.\n* total width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left\n* total height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom\n\n### width and height\n\n* every element has default width and height (might be 0px)\n* `width` and `height` may be specified - **but only for non-inline elements**\n* **block width**: block-level elements have a default width of 100%, consuming the entire horizontal space available\n* **inline width**: inline and inline-block elements expand and contract horizontally to accommodate their content\n* **height**: all elements expand and contract vertically to accommodate their content\n* inline-level elements cannot have a fixed size, (no width and height is accepted)\n\n### margin and padding\n\n* browsers have their own default margin and padding\n* a CSS reset tones the default down to zero and build up our own margin and padding\n\n### margin\n\n* `margin`: set the amount of space that surrounds an element\n* the margin outside of any border and are completely transparent in color\n* vertical margins, top and bottom, are not accepted by inline-level elements\n* margins work like normal for block and inline-block elements\n\n### padding\n\n* provide spacing directly within an element\n* falls inside of an element’s border\n* padding works vertically on inline-level elements\n* inline vertical padding may blend into the line above or below the given element\n* padding works like normal for block and inline-block elements\n\n### margin and padding declaration\n\n* shorthand with 1 value: setting it on all four sides\n* shorthand with 2 values: top and bottom first, then left and right\n* shorthand with 4 values: top, right, bottom, and left, moving clockwise\n* longhand: e.g margin-top, padding-left\n* use longhand for 1 or 2 values\n* use shorthand for 3 or more\n\n### margin and padding colors\n\n* they are completely transparent and don't accept any color values\n* they show the background colors of relative elements (since they're transparent)\n* margins - background color of the parent element\n* padding - background color of the element the padding is applied to\n\n### borders\n\n* fall between the padding and margin, outline around the element\n* has width, style, and color (shorthand order or border-width, etc)\n* width, color: standard length and color values\n* style: solid, double, dashed, dotted, and none\n* individual borders and properties can also be specified: border-top, border-left-width\n\n### border-radius\n\n* enables rounded corners\n* accepts length units: radius by which the corners of an element are to be rounded\n* one value shorthand: all corners\n* two values shorthand: top-left/bottom-right and top-right/bottom-left\n* four values shorthand: clockwise, starting from top-left\n* longhand: e.g border-top-right-radius\n\n### box-sizing\n\n* additive by default\n* CSS3 introduces `box-sizing`\n* values: content-box, padding-box, and border-box\n* content-box: actual width, height: element width, any margin, padding border added on top\n* padding-box: actual width, height: element width + padding (width 400 + 20 padding will be 400 px wide)\n* border-box: actual width, height: element width + padding + border (width 400 + 20 padding + 5 px border will be 400 px wide)\n* use border-box to make maths simpler (also helps when mixing percentages with px)\n* drawback of using box-sizing: older browser don't support it\n\n\n### vendor prefixes\n\n* browsers gradually began to support different CSS3 properties and values by the way of vendor prefixes (e.g `-webkit-box-sizing`)\n* as parts of the CSS3 specification are finalized and new browser versions are released, these vendor prefixes become less and less relevant\n* Mozilla Firefox: -moz-\n* Microsoft Internet Explorer: -ms-\n* Webkit (Google Chrome and Apple Safari): -webkit-\n\n### developer tools\n\n- Chrome: Alt+Cmd+I\n\n### universal selector\n\n* universal selector: *  - catch-all to select all elements\n* :before and :after pseudo-elements: dynamically generated with CSS\n\n## 5. Positioning content\n\n### positioning with floats\n\n* the float property allows us to take an element, remove it from the normal flow of a page\n* and position it to the left or right of its parent element\n* all other elements on the page will then flow around the floated element\n* used on multiple elements: creating a layout by floating elements directly next to or opposite each other\n* multi-column layouts can be created\n\n### floating in practice\n\n* common float values are: `left` and `right`\n* floated elements will float all the way to the edge of its parent element\n* no parent: floated element floats to the edge of the page\n* floated element width defaults to the width of the content within it\n* use the `width` property to specify width\n* use `margin` to prevent elements touching each other\n* floated inline elements change their display value to block and accept width, height\n\n### clearing \u0026 containing floats\n\n* floats have pitfalls, originally for wrapping content around images and not layout\n* styles next to a parent of a floated element might break\n* margin and padding can blend into a floated element\n* unwanted content can wrap around floated content\n\n### clearing floats\n* to prevent unwanted content from wrapping around floated elements, we need to clear, or contain, those floats\n* clearing floats returns the page to its normal flow\n* `clear` property, values: `left`, `right`, `both`\n* left clear left floats, right clear right floats, both clears both sides\n* clear property applied on an element after floated elements to return the page to it's normal flow\n\n### containing floats (clearfix)\n\n* effects similar to clearing (return to normal flow) but also makes sure styles are rendered correctly\n* to contain floats, the floated elements must have a parent (container)\n* the flow of the document will remain unaffected outside of the container\n* containing everything within element with class `group`:\n\n```css\n.group:before,\n.group:after {\n  content: \"\";\n  display: table;\n}\n.group:after {\n  clear: both;\n}\n.group {\n  clear: both;\n  *zoom: 1;\n}\n```\n* :before and :after pseudo-elements\n* dynamically generated elements above and below the element with the class of group\n* with no content but styles to clear floats\n* also known as clearfix but the class group better represents the content\n\n### keep track of float and always clear/contain them\n\n### positioning with inline-block\n\n* `display: inline-block`: placing elements next to one another within a line\n* but also accepts width, height, padding, border, margin (as opposed to inline)\n* taking full advantage of the box model without having to worry about clearing any floats\n\n\n### inline block vs spaces\n\n* inline-block elements are displayed on the same line, they also include a single space between them\n* low tech, simple solution: no space between start and end tags\n* another low tech solution: s tart HTML comment after end tag, close comment before start tag\n\n### creating a reusable layout\n\n* best to write modular styles that may be reused elsewhere\n* floats vs inline-block is open to debate\n* one approach:  inline-block elements to create the grid—or layout—of\n* and float to wrap around content (as originally intended)\n* new CSS specs: watch out for `flex-` and `grid-` based properties—that\n\n### uniquely positioning elements\n\n* precisely positioning elements: floats or inline-block might not do the job\n* typically, most positioning can be handled without this\n* can use the `position` property with box offset properties\n* position: how an element is positioned on a page, if it appears in the normal flow of the document\n* box offset properties moving elements to `top right bottom` or  `left`\n* default position value is `static`\n* `static` means the element appears in the normal flow and doesn't accept box offset properties\n* other position values are: relative and absolute\n\n### `position: relative`\n\n* element appears within the normal flow a page\n* leaving space for an element as intended\n* also allows an element’s display position to be modified with the box offset properties\n* box offset properties identify where an element will be moved from given its original position\n* e.g. left: 20px - pushes element to the right by 20px\n\n### `position: absolute`\n\n* element does not appear within the normal flow a page\n* original space and position of the element is not preserved\n* elements are moved in relation to their closest relatively positioned parent element\n* should a relatively positioned parent element not exist, the element will be positioned in relation to the \u003cbody\u003e element\n\n## 6. Typography\n\n* embedded fonts allow using any font you like but important to learn about typography\n* typeface is what we see, how text looks, feels, and reads, the artistic value\n* font: the file containing a typeface, method of delivering artistic value\n\n### adding color to text\n\n* `color` property\n* add it to body element to set the color for all text on the page\n\n### font-family\n\n* which font to use\n* comma separated font names, left to right fallback\n* font names with multiple word to be wrapped in double quotes\n* last font should be a keyword, system default font for e.g. either `sans-serif` or `serif`\n\n### font-size\n\n* can be set using common length values\n\n### font-style\n\n* normal, italic, oblique, and inherit\n\n### font-variant\n\n* normal, small-caps, and inherit\n\n### font-weight\n\n* how bold is our text\n* keyword values: normal, bold, bolder, lighter, and inherit\n* or numeric values: 100, 200, ... 900 (from thinnest to thickest)\n* normal = 400, bold = 700\n* check that the font comes with a specific weight before using a value, otherwise falls back to closest\n\n### line-height\n\n* the distance between two lines of text (leading)\n* typically just set it to 1.5 times font-size, using value 1.5 or 150%\n* or if using a baseline grid might want to specify in pixels\n* may also be used to vertically center text within an element (buttons, alerts, other single line text)\n\n### font shorthand\n\n* `font: font-style font-variant font-weight font-size/line-height font-family, font-family`\n* everything optional apart from font-size and font-family\n\n### `:hover`\n\n* pseudo-selector\n* maybe added at the end of a selector to style when an element is in a specific state\n* `:hover` pseudo-class styles an element when a user hovers over that\n\n### text-align\n\n* five values: left, right, center, justify, and inherit\n\n### text-decoration\n\n* none, underline, overline, line-through, and inherit\n* multiple values may be specified with space separation\n\n### text-indent\n\n* indent first line of text\n* accepts length values\n* positive value indents inwards, negative outwards\n\n### text-shadow\n\n* params: the shadow’s horizontal offset, vertical offset, blur radius, color (opacity as well, e.g rgba)\n* positive offsets right and bottom,  negative offsets left and top\n* multiple shadow can be specified as comma separated\n* `box-shadow` accepts same values plus optional fourth length: spread, + optional first value: inset\n\n### text-transform\n\n* changes text inline without the need for typeface variant (not like font-variant)\n* values: none, capitalize, uppercase, lowercase, and inherit\n* capitalize makes first letter uppercase\n\n### letter-spacing\n\n* adjust the space (or tracking) between the letters on the page\n* positive - further apart, negative - closer\n* use relative value to ensure it works across different font sizes\n\n### word-spacing\n\n* spacing between words\n\n### web safe fonts\n\n* few fonts pre-installed on every device\n* Arial\n* Courier New, Courier\n* Garamond\n* Georgia\n* Lucida Sans, Lucida Grande, Lucida\n* Palatino Linotype\n* Tahoma\n* Times New Roman, Times\n* Trebuchet\n* Verdana\n\n### embedding web fonts\n\n* upload fonts to a server (check font lincence!)\n* include them on a website via the CSS `@font-face` at-rule\n* surround embedded font-family name with quotation marks within any CSS reference\n* [Google Fonts](https://www.google.com/fonts)\n\n```css\n@font-face {\n  font-family: \"Lobster\";\n  src: local(\"Lobster\"), url(\"lobster.woff\") format(\"woff\");\n}\n```\n\n### quotes, citations\n\n* `\u003ccite\u003e` - reference a creative work, author, or resource (typically title, author, URL)\n* `\u003cq\u003e` -  short, inline quotations, inline\n* `\u003cblockquote\u003e` -  longer external quotations, block\n* q, blockquote: the browser will insert the proper quotation marks (it even respects the global lang attribute)\n* q, blockquote: optional cite attribute - doesn't change appearance\n* blockquote can usually include citation: both cite attrubite and cite element\n\n## 7. Backgrounds\n\n* Backgrounds can be a solid color, an image, a gradient, or these combined.\n* `background` - shorthand for setting background properties\n\n### setting background color\n\n* background-color: accepts color values (or use background shorthand)\n* transparent backgrounds (hsla, rgba) - might not be supported by all browsers, specify two background-color props, a safe fallback color first\n\n### setting background image\n\n* background-image: (or background shorthand) - accepts image source identified by url() function (usual href rules, needs to be quouted)\n\n### background repeat\n\n* a background image repeated indefinitely, both vertically and horizontally to fill up the element (if image is smaller)\n* `background-repeat property`: repeat, repeat-x, repeat-y, and no-repeat\n\n### background position\n\n* background images are positioned in the top-left corner by default\n* `background position`: horizontal offset vertical offset\n* shorthand: use one value and it'll apply both vertically and horizontally\n* can also use percentages and `top, right, bottom, left` keywords\n* 0 0 is the same as top left, 100% 0 is top right, 100% 100% is bottom right\n* advantage of percentages: 50% - centering\n* `background:` shorthand: color, image, position, repeat values - space separated\n\n### CSS3: Gradient backgrounds\n\n* CSS3, supported by all modern browsers\n* most browser no longer require vendor prefixes for this but worth adding them just in case\n\n### CSS3: linear gradient\n\n* linear-gradient() function within the background or background-image property\n* linear-gradient() function accepts two values: start and end color, browser takes care of transition\n*  -webkit-linear-gradient() -moz-linear-gradient()\n* always specify a solid fallback color before the gradient (in a separate property)\n* also supports direction as first argument (degree (0-360) e.g. 45deg, or keyword e.g. `to right bottom`)\n\n### CSS3: radial gradient\n\n* radial-gradient() function\n* from inside to outside of an element\n* paramaters include location, size, radius, and so on\n* there are a number of CSS3 gradient generators to help out\n\n### CSS3: gradient color stops\n\n* gradient functions are like varargs\n* multiple colors comma separeted at the end\n* by default color stops are at equal distance but it can also be specified: color distance-in-percentage, next-color distance\n\n### CSS3: multiple background images\n\n* since CSS3 background or background-image accepts multiple comma separated bacgkround images\n* first image comes foremost, last in the background\n\n### CSS3: background size\n\n*  `background-size` property - accepts two lengths\n* `auto` keyword value for one of the parameters to keep aspect ratio\n* percentage values are in relation to the element's size and not the image\n* `cover` keyword value: resize background image to cover element (might be cut off)\n* ``contain` keyword value: resize to fit into the element (might not occupy the full element)\n\n### CSS3: background clip and origin\n\n* `background-clip` - surface area a background image will cover\n* `background-origin` - where the background-position should originate\n* border-box, padding-box, and content-box keyword values may be used for both of these\n* background-clip: border-box by default, background image can extend into any border\n* background-origin: padding-box by default, beginning of a background image can extend into the padding\n\n## 8. Lists\n\nHTML has 3 types of lists: unordered, ordered, and description lists\n\n### unordered lists\n\n* `\u003cul\u003e` unordered list block-level element\n* `\u003cli\u003e` list items\n* by default most browsers add a solid dot list item marker and margin and padding\n\n### ordered lists\n\n* `\u003col\u003e` ordered list element\n* works pretty much similarly to `\u003cul\u003e` but order matters\n* by default most browser use numbers as list item markers\n* `start` attribute on `\u003col\u003e` element tells where to start counting from (e.g paginated list)\n* `start` attribute only accepts integers\n* `reversed` boolean attribute (no value required, present=true) tells if the numbers should be in reverse order\n* `value` attribute on an individual `\u003cli\u003e` within an `\u003col\u003e` changes its value within the list\n* any item appearing after the one with the value is calculated accordingly\n\n### description lists\n\n* description lists are used to outline multiple terms and their descriptions (e.g. glossary)\n* description list block-level element, `\u003cdl\u003e`\n* an item consists of one or more description terms `\u003cdt\u003e` followed by one or more descriptions `\u003cdd\u003e`\n* in most browsers by default, the \u003cdl\u003e element will include vertical margins and the \u003cdd\u003e element includes a left margin\n\n### nesting lists\n\n* always start the new list within an li and should be fine\n\n### list style type\n\n* the `list-style-type` property sets the content of a list item marker\n* can change both unordedered and ordered list to anything you like\n* common values: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha / lower-latin, upper-alpha / upper-latin\n\n### image as a list item marker\n\n* set list-style-type to none\n* add small backround image (0 50% no-repeat)\n* add padding-left to push content right\n\n### list-style-position\n\n* list-style-position property can have values: inside, outside, inherit\n* default is outside - no content is wrapped around the marked\n\n\n### list-style shorthand\n\n* list-style-type followed by list-style-position - space separated\n\n### horizontally displaying a list\n\n* make `\u003cli\u003e`s inline-block\n* marker is automatically set to none\n* single spaces can be removed by adding comment between lis\n* inline-block is better than inline as allows specifying margins, paddings\n\n### floating list\n\n* changing to inline-block or inline removes the marker\n* floating keeps to marker\n* need to add margin or padding to prevent markers overlapping content\n* always clear or contain floats\n\n## 9. Adding Media\n\n### adding images\n\n* `\u003cimg\u003e` inline element\n* img element is a self-containing or empty element, single, doesn't wrap around any content\n* src attribute and value must exist with a valid URL\n* alt (alternative text) attribute, which describes the contents of an image\n* alt text is picked up by search engines, assistive technologies and also displayed if the image can't be\n\n### image formats\n\n* most commonly supported formats are gif, jpg, and png\n* jpg format provides quality images with high color counts but still decent file size (e.g photos)\n* png format is great for images with transparencies or low color counts (e.g. icons)\n\n### image sizing\n\n* important to tell the browser the size of the image evene before it's loaded - so it can reserve space for it and render faster\n* img tag accepts width and height attributes in HTML\n* CSS width and height overrides inline width and height\n* setting only width or height automatically adjusts the image size preserving aspect ratio\n* setting both works as well, might distort the image\n* setting width and height in HTML might have some semantic value but images usually resized in CSS\n\n### positioning images\n\n* by default appears in the same line as the content surrounding it (inline)\n* increases the height of the line it appears to match image height\n* when set to `display: block` then in it;s own line (as usual)\n* or flush left or right (by floating - it's original purpose)\n* usually need margin around a floated image (can also create a frame with background, padding)\n\n### image element vs background image\n\n* use `\u003cimg\u003e` if image holds semantic value and relevant to the content of the page\n* use background image when image is part of design or UI and not directly relevant\n\n### adding audio\n\n* src attribute sepcifying source URL\n* requires a closing tag\n* several other attributes like autoplay, controls, loop (all boolean, no value just key required, attribute names self-explanatory)\n* if controls attribute is not present nothing is displayed\n* preload attribute - values: none, auto (default, all data preloaded), metadata (any metadata, e.g length)\n\n### audio types, fallbacks\n\n* different browsers support different formats\n* we can get rid of the src attribute and wrap a number of `\u003csource\u003e` elements with an audio tag\n* source element have `src` and `type` (e.g. audio/ogg, audio/mpeg) attributes\n* browser picks the one it recognizes\n* as last fallback arbitrary HTML can be added\n* media.io, mirovideoconverter for conversion\n\n### adding video\n\n* pretty similar to audio but with the video element\n* same src, autoplay, controls, loop, preload and fallback mechanism\n* displayed, even if controls is not present\n* size to be specified in CSS (using width and height properties)\n* poster attribute accepts an image URL to be shown before the video is played\n* an additional fallback option miht be a Youtube or Vimeo iframe\n\n### custom audio and video controls\n\n* by default controls are browser specific\n* custom look and feel can be added with javascript\n\n### adding inline frames\n\n* embedding another HTML page in the current one\n* iframe element, src attribute specifies the URL, may be relative to current page\n\n### seamless iframes\n\n* iframe contents don't inherit styles from the page including them\n* links are opened within the frame\n* `seamless` boolean attribute changes above behaviour (but not supported by older browsers)\n\n### figures\n\n* `\u003cfigure\u003e`, block-level, identify and wrap self-contained content, often media\n* may surround image, video, etc, or multiple of those (if they form a group)\n* if the figure element is moved it shouldn't disrupt the content of the page\n\n### figure caption\n\n* `\u003cfigcaption\u003e` element adds caption within a figure element\n* may appear before or after media, or anywhere within figure but only once\n* serves as caption for all content within the figure element\n* may also be used to replace img elements alt attribute\n\n## 10. Forms\n\n* forms aquire user input\n* different elements are used to capture different types of data\n\n### initializing a form\n\n* `\u003cform\u003e` element wraps all the elements included in the form\n* `action` attribute: URL where the form should be sent to\n* `method` attribute: HTTP method used for submitting the form\n\n### text fields\n\n* `\u003cinput\u003e` element with `type` attribute value `text`\n* `name` attribute is used as the name of the control and also sent to the server\n* input element is self contained\n* originally the only type attribute values were text and password\n* HTML5 adds the following for semantic clarity: color, date, datetime, email, month, number, range, search, tel, time, url, week\n* iOS might make user input for some of these easier\n\n### textarea\n\n* `\u003ctextarea\u003e` element, capture multiline text input\n* no `type` attribute as it only supports text\n* `name` attribute is similar to input element\n* two sizing attributes (`cols` and `rows`) but use CSS width and height instead\n\n### radio buttons\n\n* allow user to make quick choice from a small list of options\n* only one option can be choosen\n* `\u003cinput\u003e` element with `type=\"radio\"`\n* `value` attribute specifies to value sent to the server\n* `name` attribute should be the same for all checkboxes in a group\n* `checked` boolean atrribute can be used to pre-select an option\n* input is still self-closing, value seen by user is outside it: `\u003cinput type=\"radio\" name=\"day\" value=\"Friday\" checked\u003e Friday`\n\n### checkboxes\n\n* really similar to radio buttons, but\n* allows multiple choice, all values are sent to the server\n* `\u003cinput\u003e` with `type=\"checkbox\"`\n\n### dropdown lists\n\n* when you have a longer list of options\n* a `\u003cselect\u003e` element wraps all of the options marked up by `\u003coption\u003e` elements\n* the `name` attribute is on the select element\n* the `value` attribute is on the option element\n* the option element wraps the user visible text\n* selected boolean attribute marks the selected options\n* boolean attribute `multiple` on select element allows multiple selection\n* size of select element can be controlled via CSS\n\n### submit input\n\n* submit button can be added using input with `type=\"submit\"`\n* value attribute specifies button text\n\n### submit button\n\n* submit input is self contained, can't wrap more content\n* button element performs the same but not self-closing like input\n* can wrap button text (no value attrubite needed)\n\n### hidden input\n\n* input with `\"type=\"hidden\"` is not shown on the page but still submitted\n* can obviously still be viewed in page source, so not for secure stuff\n\n### file input\n\n* input with `\"type=\"file\"` can be used to attach files to a form\n* each browser comes with default styles for this, which can't be overriden CSS, JS help here\n\n### labels\n\n* provide caption or headings for from controls\n* using `\u003clabel\u003e` element with `for` attribute matching the `id` attribute of the form element\n* clicking the label brings the linked form element into focus\n* label may also wrap input elements and in this case the `for` and `id` atrributes may be omitted\n\n### fieldsets\n\n* group related form controls and label by wrapping them with `\u003cfieldset\u003e`\n* block level element, default CSS has a border\n\n### legend\n\n* `\u003clegend\u003e` element provides caption or heading for `fieldset` element\n* should be the first element after the opening `fieldset` tag\n* appears on the top left of the fieldset border\n\n### `disabled` attribute\n\n* turns of element of control so that it's not interactive and values are not sent to the server\n* can be applied to input or fieldset (form?)\n* if input has type hidden and the disabled attribute as well then hidden is ignored\n\n### `placeholder` attribute\n\n* HTML 5 attribute, provides hint\n* disappears as soon as the control is clicked or gains focus (hence different from `value`)\n* `value` for prepopulating data and `placeholder` for suggestions\n\n### `required` attribute\n\n* boolean attribute introduced in HTML5\n* enforces that form control contains a value before submitting\n* error message is shown if no value but currently the browsers control the error message styling\n* invalid elements and form controls can be styled using `:optional` and `:required` pseudo classes\n* validation also respect input types (e.g. `type=\"email\"` should be a valid email)\n\n### additional attributes\n\n```\naccept autocomplete autofocus formaction formenctype formmethod formnovalidate formtarget max maxlength min pattern readonly selectionDirection step\n```\n\n## 11. Tables\n\n* to mark up structured, tabular data\n* was abused back when didn't all support CSS\n\n### table, table rows and cells\n\n* table content is wrapped in a `\u003ctable\u003e` element\n* a table may contain many rows that are marked up with the `\u003ctr\u003e` element\n* table cells are added into rows using the `\u003ctd\u003e` element\n\n### table heading\n\n* using the `\u003cth\u003e` element instead of td marks a cell as a table header\n* table header adds semantic value to the content\n* `scope` atribute on a th specifies the what the header relates to\n* potential scope values are `col`, `row`, `colgroup`, and `rowgroup`\n* the headers attribute may be used to associate a cell to a header\n* above is done by specifying the linked `\u003cth\u003e`'s id attribute in the cell's (td or th) headers attribute\n\n### table caption\n\n* provides a title for the table using the `\u003ccaption\u003e` element\n* the caption element has to be the first element after the opening table tag\n\n### table head, body and foot\n\n* content of a table maybe broken to groups: head, body and foot\n* `\u003cthead\u003e` element wraps the heading row(s) of the table and comes after any caption and before any tbody elements\n* `\u003ctbody\u003e` element wraps the primary data rows\n* `\u003ctfoot\u003e` element wraps the rows outlining the table\n* before HTML5 tfoot had to come directly after thead\n\n### combining multiple cells\n\n* td or th can have a `colspan` or `rowspan` attribute\n* colspan specifies how many columns the cell should span across (default is one)\n* rowspan is the same as colspan but for rows\n\n### `border-collapse`\n\n* adding border to table-cell can cause borders stacking up (on the inside)\n* `border-collapse` property for tables have 3 values: collapse, separate, and inherit\n* collapse collapses/condenses the borders to one border, separate stack them up against each other\n\n\n### border-spacing\n\n* when using `border-collapse: separate` (or wasn't defined) you can specify the space between borders\n* use this instead of a margin to avoid more space between cells than on the sides\n* accepts a length value and separates borders by that length\n* when two lengths are specified the first is horizontal, second is vertical spacing\n\n### adding borders to rows\n\n* make sure border-collapse is collapse\n* add border bottom to th and tr\n* set no border to `th:last-child`\n\n### striping tables\n\n* use `tr:nth-child(even)` to set color\n* make sure `border-collapse: separate;` and `border-spacing: 0;` is set on the table to avoid issue because td includes a border by default but th doesn't\n* only set right and bottom borders since border-collapse is separate\n* `td:first-child` gets a left border\n\n### aligning text in table cells\n\n* moving text around horizontally - `text-align` property as seen in typography\n* moving text around vertically - `vertical-align` property\n* `vertical-align` only works on display inline and table-cell elements\n* most used `vertical-align` values are `top`, `middle`, and `bottom`\n* `vertical-align` positions text in relation to the table cell, for table-cell elements\n* or to the closest parent element, for inline-level elements\n\n## 12. Best Practices\n\n### HTML best practices\n\n* Write Standards-Compliant Markup\n* Make Use of Semantic Elements\n* Use the Proper Document Structure - html, head, body\n* Keep the Syntax Organized\n    * Use lowercase letters within element names, attributes, and values\n    * Indent nested elements\n    * Strictly use double quotes, not single or completely omitted quotes\n    * Remove the forward slash at the end of self-closing elements\n    * Omit the values on Boolean attributes\n* Use Practical ID \u0026 Class Values (with no reference to styling)\n* Use the Alternative Text Attribute on Images (unless they're of no relevalnce to the content, then use background images)\n* Separate Content from Style (no inline styles ever)\n* Avoid a Case of “Divitis” (use HTML5 structural elements and keep the number of elements to the minimum anyways)\n* Continually Refactor Code\n\n### CSS best practices\n\n* Organize Code with Comments (maybe even TOC at the top of the file)\n* Write CSS Using Multiple Lines \u0026 Spaces (readibilty, version control)\n* Use Proper Class Names (modular, semantic, all lowercase with hyphens)\n* Build Proficient Selectors (low specificity, no ids)\n* Use Specific Classes When Necessary (instead of lot of nested selectors)\n* Use Shorthand Properties \u0026 Values (unless setting only one property)\n* Use Shorthand Hexadecimal Color Values (and lowercase characters)\n* Drop Units from Zero Values\n* Group \u0026 Align Vendor Prefixes (and place an unprefixed version of our property and value last)\n* Modularize Styles for Reuse\n\n### additional resources\n\n#### HTML \u0026 CSS\n\n*   [Mozilla Developer Network](https://developer.mozilla.org/en-US/)\n*   [Opera.Dev](http://dev.opera.com/)\n*   [HMTL5 doctor](http://html5doctor.com/)\n*   [DevDocs - instant docs search](http://devdocs.io/)\n*   [Pears - common patterns of markup and style](http://pea.rs/)\n*   [HTML Dog](http://www.htmldog.com/)\n*   [WTF HMTL CSS](http://wtfhtmlcss.com/)\n\n#### design inspiration\n\n*   [Dribbble](http://dribbble.com/)\n*   [Pattern Tap](http://patterntap.com/)\n*   [Premium Pixels](http://www.premiumpixels.com/)\n\n#### frameworks \u0026 style guides\n\n*   [Web Style Guide](http://webstyleguide.com/wsg3/index.html)\n*   [Bootstrap](http://twitter.github.com/bootstrap/)\n*   [Foundation](http://foundation.zurb.com/)\n*   [Skeleton Framework](http://getskeleton.com/)\n*   [Google HTML/CSS Style Guide](https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml)\n*   [GitHub Styleguide](https://github.com/styleguide/)\n*   [Google Web Fundamentals](https://developers.google.com/web/fundamentals/)\n\n#### icons\n\n*   [Helveticons](http://hlvticons.ch/)\n*   [Ion Icons](http://ionicons.com/)\n*   [Social Network Icon Pack](http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/)\n*   [Fugue Icons](http://p.yusukekamiyamane.com/)\n*   [famfamfam Icons](http://www.famfamfam.com/lab/icons/silk/)\n*   [Pictos](http://pictos.cc/)\n*   [Picons](http://picons.me/)\n*   [The Noun Project](http://thenounproject.com/)\n\n#### miscellaneous\n\n*   [COLOURlovers - color trends palettes](http://www.colourlovers.com/)\n*   [ColorHexa - color encyplopedia](http://www.colorhexa.com/)\n*   [Modernizr](http://modernizr.com/)\n*   [jQuery](http://jquery.com/)\n*   [Google Hosted Libraries](https://developers.google.com/speed/libraries/devguide)\n*   [Copy Paste Character](http://copypastecharacter.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsabapalfi%2Fbasic-html-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsabapalfi%2Fbasic-html-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsabapalfi%2Fbasic-html-css/lists"}