04.02.26.md (2616B)
1 # 04/02/26 2 3 ## CSS 4 5 CSS is in the following format 6 ``` 7 TAG { 8 ATTR: VALUE; 9 ATTR: VALUE; 10 ATTR: VALUE; 11 ... 12 } 13 /* C style long comments only */ 14 ``` 15 16 - you can define a tag to have a class like so `<tag class="name">...</tag>`, 17 then in the CSS you can replace the tag with `TAG.CLASS`, or `.CLASS`, which can be used 18 across multiple tags, this should be used to make multiple consistent styles 19 20 - you can also define ID's just like classes `<tag id="ID">...</tag>` 21 then in the CSS, you can replace the tag with `#ID` 22 this should be used to make single styles for unique tags 23 24 - you can use the `em` tag inside blocks to style individual words in blocks like `p` or `hN`, 25 `em` refers to emphasis, other tags such as `strong` exist too, which do similar things 26 27 - for nested tags you can declare the CSS tag like so `TAG1 TAG2`, which in HTML would refer to, 28 `<p><em>hello</em> world</p>`, with `TAG1` being `p` and `TAG2` being `em`, this can be used to 29 style nested tags, you can also infer the order of nesting with `>` and `+`, with `>` referring to 30 the idea that the tag on the right is a direct child of the tag on the left (not nested), and `+` 31 refers to when the tags are next to each other, with nothing between them 32 33 - some HTML tags have built in classes (pseudo classes), for example the `a` tag (links), in CSS 34 they look like so `TAG:CLASS`, an example would be 35 ``` 36 a:link { color: red }; 37 a:visited { color: red }; 38 a:hover { color: red }; 39 a:active { color: red }; 40 ``` 41 42 - `div` can be used in HTML to apply CSS to arbitrary chunks of HTML, the `header` `menu`, 43 `footer` and `artical` tags should be used when applicable, as they work identically, however provide more 44 information to someone reading the tags, they are called semantic tags 45 46 ## layout 47 48 - pages can be separated using the following methods 49 - table 50 - frame 51 - div 52 - semantic tags 53 54 - tables can be made like so, they are made with `thead` which is a header, and `tbody` which is 55 a body, `tr` is a new row and `th` is a column 56 ``` 57 <table> 58 <thead> 59 <tr> 60 <th>info</th> 61 <tr> 62 </thead> 63 <tbody> 64 <tr> 65 <th>info</th> 66 <tr> 67 </tbody> 68 </table> 69 ``` 70 71 - frames are newer, they work like miniboxes in latex, they can be written like so 72 ``` 73 <framset cols="*,*"> 74 <frame src="1.html"/> 75 <frame src="2.html"/> 76 </framset> 77 ``` 78 79 - a final way to layout pages is CSS grids, they seem the niceset overall, but apparently not well supported 80 81 - the following tags can be used for nested data `img`, `iframe` (nested html without frames), `audio` and `video`