CSS and HTML notes on css from w3 https://www.w3schools.com/css/ - Introduction: css is cascading style sheeps, describes how html is displayed - Syntax: `h1 {color:blue; font-size:12px}`: selector followed by a series of declarations, each declaration is a property-value pair. Comments: `/* comment here */` - Selectors: element selector like `p`, id selector: `#id-name`, class selector: `.class-name`. can also do `p.class-name` so only p elements get selected. annotate an element with more than one class by putting space between the class names. Universal selector: `*`. can group selectors by putting comma between them. - How To: 3 ways: External, Internal and Inline CSS. Inline has the highest priority. `rel` in the `link` stands for the relationship between the files. Whatever is defined after styles the html. - Colors: colors have names, and other formats (see html page for more details in colors). we can color: background, text, border. - Backgrounds: we can set the background color of an element. using `background-color`. set a backg image using `background-image: url("paper.gif");`. By default the background image repeats can set `background-repeat` property to `repeat-x` (repeat horizontally), `repeat-y` (repeat vertically) or `no-repeat`. `background-position` can be set to `right top`. `background-attachment` when set to `fixed` makes the image scroll with te page. all background properties can be set using the `background` property. - Borders: There are various `border-style`s like `dotted`, `dashed`, etc. `border-width` is available as `5px`, `medium` and even pixel specification for all four sides: `2px 10px 4px 20px`. `border-color` also has 4 spec available, and different style can be specified using `border-top-style`, `border-left-style`, etc. Order `top, right bottom left` for the properties. shorthand is just `border:` with width, style and color specification. - Margins: can be specified on each side of an element using: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`. (or shorthand: `margin:` followed by properties). an element is automatically centered within its container using `auto` flag. `inherit` inherits from the parent's class. impt!: top-bottom margins between elements is collapsed to the bigger element's margin (does not apply left-right). - Padding: padding is similar, except inside the element, padding-top, .. right, etc also exists. shorthand is just padding. adding padding changes width of an element. to keep the width despite padding add: `box-sizing: border-box;` - Height/Width: `height` and `width` have auto (browser calculated) value, length in unit or percentage, initial (default) or inherit (fromm parent). height/width does not include padding, borders, or margins, it's inside of them. max/min-width/height sets the max. - Box Model: in to out: content, padding, border, margin. - Outline: an outline is a line drawn around elements (ouside the border). outline-style/color/width can be configured. `outline-offset` adds space - Text: `color`, `text-align` - center, left, right, justify. `text-decoration: none;` removed underlines from links. Other such: `overline`, `line-through` and `underline`. `text-transform` specifies `uppercase`, `lowercase` and `capitalized`. `text-indent` can indent a para. `letter-spacing` needs to be an integer (+ or -). others like `line-height`, `text-direction`, `word-spacing`, `text-shadow` (with horiz shadow position, vertical shadow position and shadow color). - Fonts: more than one `font-family` can be specifies as comma separated. `for-style` with `normal`, `italic`, or `oblique`. Font size `font-size` with px or `em`s. 16px = 1em. Can use a combination too. `font-weight` can be `normal`, `bold`. Responsive font size using `font-size:10vw` viewport. `font-variant` can be set to `small-caps` font. - Icons: link an online library and specify class in an inline element. - Links: can use `color`, `font-family` and `background`. links also have states: `a:link` - a normal, unvisited link, `a:visited` - a link the user has visited, `a:hover` - a link when the user mouses over it, `a:active` - a link the moment it is clicked todo: Lists, Tables, Display, Max-width, Position, Overflow, Float, Inline-block, Align, Combinators, Pseudo-class, Pseudo-element, Opacity, Navigation Bar, Dropdowns, Image Gallery, Image Sprites, Attr Selectors, Forms, Counters, Website Layout, Units, Specificity HTML My notes on html from w3 https://www.w3schools.com/html/ HTML - hyper text markup language - structure of a web page. Tags are not displayed they are rendered. `` says the document is HTML5. `` tag is the root of the doc. defines the whole document. `` has meta info about the document. ``, `<body>`, `<h1>` (is heading), `<p>` (is paragraph). syntax of tags: `<tag> content </tag>`. Web browsers essentially display html. Html 5 come out in 2014. The visible part is the body. Headings range from h1 to h6 (decreasing in size). Paragraphs come in `<p>` tags. The syntax for links: `<a href="https://atharvashukla.com"> This is a link </a>`. Note: `href` is an attribute. Syntax for images is as follows: `<img src="image.png" alt="alternative text" width="100" height="12">`. Buttons `<button> click me </button>`. HTML lists: unordered: `<ul>`, ordered: `<ol>` and list item: `<li>`. `<br>` is an empty html element - it's a line break. NOTE: html is not case sentitive. Use lowercase tags. Attributes. `href` specifies the link in `a` tag, `src` specifies the file of the image. Width and height specifies the measurements. `alt` is the text if the image cannot be displayed. `style` attribute specifies the color, font, size etc. example: `<p style="colo:red"> This is a paragraph </p>`. The `lang="en-US"` attribute in the `html` is (again) for screen readers. `title` attribute in a paragraph would be like a tooltip. tips: use lowercase for attributes, use quotes in their values. `id` specifies a unique id for the element. Html headings are important for search engines and users. headings are from `h1` to `h6`, but `syle` attribute can be used to change the `font-size` (property). `<hr>` is a horizontal line. html is `<head>` is not displayed, it is for metadata, ex: ` <meta charset="UTF-8">`. note that html removes extra lines and spaces in content. `<pre>` element is for preformatted text. syntax for `style` attribute: `<tagname style="css-property1:css-value1;">`. Some such css properties and values are: `background-color:powderblue`, `color:blue`, `font-family:verdana`, `font-size:300%`, `text-align:center`. Some html elements are for formatting: `<b>` for Bold text, `<strong>` for Important text, `<i>` for Italic text, `<em>` for Emphasized text, `<mark>` for highlighted (marked) text, `<small>` for Small text, `<del>` for striked out (deleted) text, `<ins>` for underlined (inserted) text, `<sub>` for Subscript text, `<sup>` for Superscript text. Browsers display `<strong>` as `<b>`, and `<em>` as `<i>`. `<q>` for short quotations, `<blockquote>` for quoting from another source, there's even a `cite` attribute. marking abbreviations (or acronyms) - `<abbr>` - gives useful info to browsers. There's also an `<address>` tag for street address and a `<cite>` tag displayed in italic. A weird one: `<bdo dir="rtl"> dammit im mad </bdo>` is a bidirectional override. Comments: `<!-- comment -->`. In html, colors can be specified using color names like: DodgerBlue and MediumSeaGreen, or rgb like `rgb(255, 99, 71)` or hex: `#ff6347` or `hsl` or `rgba` or `hsla`. Color can be put in a heading/text stype, as a value for the `color` property, in a border like: `border:2px solid color-name` or as a `background-color`. In rgba, the alpha param is for transparency. hex is same as rgb but the values are from 00 to ff instead of 0 - 255 are are appended together. hsl is hue (color wheel), saturation (grayness/intensity), lightness (brightness). hsla also has alpha. CSS is cascading style sheets. 3 methods to add css: inline as attribute, `<style>` tag and lastly: in a `.css` file. Internal css: put tagname follored by prop:val in brackets in a `style` element. external css can be linked as `<link rel="stylesheet" href="styles.css">`. Both kinds of css styling is added in the `head` section. for text use: `color`, `font-family`, and `font-size`. there is a `border` property for border around an html element. `padding` for space between text and border. `margin` for margin space outside the border. id can be referenced using `#`-prefix in css. `class` attribute can be added to elements. to reference them as `elem.class` in css. Example: `<p class="error">I am different</p>` and `p.error {color: red;}` in css. in the `link` eleme, the `href` can refer to a url. links syntax is: `<a href="url"> text </a>`. `href` is the destination. `target` specifies where to open the link. `_blank` opens in a new window/tab, `_self` in the same page (default), there are others like: `_parent` and `_top`. Images can be links. `title` tooltips can be added to links. Links can be colored in various ways, the `a` element has classes like `link`, `visited`, `hover` and `active` that have various properties like `color`, `background-color` and `text-decoration` (placed within the `{}`) which can be altered in the css. adding padding and background, hover info, etc makes them look like buttons. We can define bookmarks by referencing ids using `#`. Can also add link to a bookmark on another page: `href="something.html#bookmark"`. Image sizes can be altered using `style` attribute and by specifying `width` and `height` properties. width and heigh can be directly specified but it's better to use the style element (not attribute). relative path can be specified in src attribute, even links can be specified there. gifs can also be added in the same manner as images. put `float:right` or left in style to make the image more fluid wrt the text. Didn't know about this. image maps let you click on parts of image and have functionality (link) attached to that. following add `usemap="#workmap"` to an image. Then specify a `map` which has a series of `area` tags with `shape`, `coords`, `alt`, and `href` properties. Background images can be attached to an element using the `background-image: url('image.png');`. For putting a backg image on the full page, use body. by default it repeats, put `background-repeat: no-repeat;`. `background-size: cover;` makes an image cover the whole element. To keep it that way despite resizes use: `background-attachment: fixed;`. To make it stretch with resizes, use: `background-size: 100% 100%;`. The `<picture>` elements have a series of source tags, each source tag has a `media` and a `srcset` attribute. `media` can describe something like: `"(min-width: 650px)"` so this gives flexibility across device sizes. and `srcset` can be various sources for each `source`. the last element is simply an `img` element for browsers that don't support this html5 feature, or if none of the src tags are matched. This is also good for bandwidth and format support. The first `source` element that matches is used. Done: HTML. Introduction, Editors, Basic, Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments, Colors: Colors (RGB, HEX, HSL), CSS, Links: Links (Link Colors, Link Bookmarks), Images: Images (Image Map, Background Images, The Picture Element). --- Todo: Tables, Lists, Blocks, Classes, Id, Iframes, JavaScript, File Paths, Head, Layout, Responsive, Computercode, Entities, Symbols, Charset, URL Encode Tables are defined using `<table>` tag. `<tr>` stands for row which is a sequence of header - `<th>` - or a sequence of cell data - `<td>`. Can add border by using `border: 1px solid black;`. For collapsed borders add: `border-collapse: collapse;` to add more border space add: `border-spacing: 5px;`. To add cell padding, add: `padding: 15px;`. to align to the left, add: `text-align: left;`. add `colspan="2"` or `rowspan="2"` attribute (to a `th` for example) to make it span over multiple cells. Use the `<caption>` tag to add a caption. Start an unordered list with `<ul>`, an ordered list with `<ol>`. Have a sequence of `<li>`s spliced in. Style attribute with a `list-style-type:` can be added with values: `disk`, `circle`, `square`, or `none` can be added. `type=` attribute with either `"1"`, `"A"`, `"a"`, `"I"`, `"i"`. Description Lists are `<dl>` with the "term" `<dt>` and then "description" `<dd>`. html lists can also be nested. the list counting can be controlled using a `start` attribute. lists can be styled horizontally to mimic a navbar, use `float:left` and `display:inline`. block elements: `<address>`, `<article>`, `<aside>`, `<blockquote>`, `<canvas>`, `<dd>`, `<div>`, `<dl>`, `<dt>`, `<fieldset>`, `<figcaption>`, `<figure>`, `<footer>`, `<form>`, `<h1>`-`<h6>`, `<header>`, `<hr>`, `<li>`, `<main>`, `<nav>`, `<noscript>`, `<ol>`, `<p>`, `<pre>`, `<section>`, `<table>`, `<tfoot>`, `<ul>`, `<video>`. inline element: `<a>`, `<abbr>`, `<acronym>`, `<b>`, `<bdo>`, `<big>`, `<br>`, `<button>`, `<cite>`, `<code>`, `<dfn>`, `<em>`, `<i>`, `<img>`, `<input>`, `<kbd>`, `<label>`, `<map>`, `<object>`, `<output>`, `<q>`, `<samp>`, `<script>`, `<select>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<textarea>`, `<time>`, `<tt>`, `<var>`. `<div>` is a container for html elements. `<span>` is a container for text. `class="class-name"` attribute is for styles. use `.class-name` to style. "field access" : `element.class-name` for accessing class id in inline elements. `class="city main"` can access `.city` and `.main`. In JS: `document.getElementsByClassName("city")`. `id` attributes are unique. accessor: `#id-name`. id can be used as bookmarks. In JS: `getElementById("id-name").innerHTML`. iframe is a webpage within a webpage. `<iframe src="URL"></iframe>`, height and width can be set, border can be edited, can be used as a target for a link, "target" in link should be the "name" of the iframe. Javascript should be in script tag, noscript is when js is not allowed. Paths: `pic.jpg` pic is located in the same dir, `images/pic. jpg` in subfolder, `/images/pic.jpg` in images dir in root, `../pic.jpg` - outer folder. `<head>` stored metadata, following tags describe metadata: `<title>, <style>, <meta>, <link>, <script>,` and `<base>`. title goes in the tab. style is for styling, link is for linking style sheets. Meta is for meta info, viewport is for scaling: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. base specifies the base url for all relative paths. Html layout: `<header>`: header for a document or a section,`<nav>`: container for navigation links,`<section>`: section in a document, `<article>`: an independent self-contained article,`<aside>`: content aside from the content (like a sidebar),`<footer>`: footer for a document or a section,`<details>`: additional details,`<summary>`: heading for the `<details>` element. Do not use tables for layout. can use css frameworks: w3. css, bootstrap or use css floats. Css flexbox and Css grids are also options. computercode: `<code>`is programming code,`<kbd>`is keyboard input , `<samp>`is computer output,`<var>`is a variable,`<pre>`is preformatted text. For some characters we have to use `&entity_name;` OR `&#entity_number;`. ` ` non-breaking-space: ` `` `, `<` less than `<`, `<`, `>` greater than `>`, `>`, `&` ampersand `&`, `&`, `"` double quotation mark `"`, `"`,`'` single quotation mark (apostrophe) `'`, `'`. Glyphs can also be added to letters like: `à`. There's also support for symbols like for-all using: `∀` or `∀`. Character encoding: `<meta charset="UTF-8">`, and in css: `@charset "UTF-8"; `. URL encoding. XHTML is stricter. --- Beyond the tutorial = Forms: Forms, Form Elements, Input Types, Input Attributes. HTML5: HTML5 Intro, HTML5 Support, HTML5 New Elements, HTML5 Semantics, HTML5 Migration, HTML5 Style Guide.Graphics: Canvas, SVG.Media: Media, Video, Audio, Plug-ins, YouTube. APIs: Geolocation, Drag/Drop, Web Storage, Web Workers, SSE.