- Development
- Snippets
- center a table
- center an image
- ensures padding and borders are included in width/heights definitions
- global reset / clean slate
- center an image
- style first column of table
- style first cell in table header of tables
- target last row of table
- Custom properties (--*): CSS variables
- Bulletproof @font-face Syntax
- Considerations for styling the pre tag
- Create A Simple Responsive HTML Table Using Pure CSS
- Repeating lines / stripes
- Divs
- Learning resources
- change colour of selection highlights
- Responsive Tables
- Resources
13 Jul 2022
Development
10 Sep 2022
Took me a while to figure out, and tried a couple solutions (eg Whisk on macOS) before, but it seems it's easiest to develop/test straight in Chrome.
The CSS of the (live) HTML page can be found under Inspect
> Sources
> select the relevant .css
file.
Changes are reflected in real-time, so no caching and/or publish time issues like with other approaches.
also, you can hide whole elements (eg for tests) with:
display: none;
Snippets
center a table
.center {
margin-left: auto;
margin-right: auto;
}
center an image
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ensures padding and borders are included in width/heights definitions
to be included in all CSS files
*,
::after,
::before {
box-sizing: border-box;
}
global reset / clean slate
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0;
padding: 0;
}
center an image
Needs all 3 properties:
.book {
width: 60%;
margin: auto;
display: block;
}
style first column of table
eg to avoid whitespace wrapping
tbody > tr:first-child > td:first-child {
white-space: nowrap;
}
style first cell in table header of tables
eg to remove formatting on table intersection with no content.
.rec_table thead th:first-child {
background-color: white;
}
target last row of table
eg to have a border bottom at end of table
tr:last-child{ /*this will select last tr*/
border: 2px solid black;
background-color: yellow;
}
Custom properties (--*): CSS variables
Property names that are prefixed with --
, like --example-name
, represent custom properties that contain a value that can be used in other declarations using the var()
function.
Syntax
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
Bulletproof @font-face Syntax
https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Considerations for styling the pre
tag
https://css-tricks/considerations-styling-pre-tag/
Create A Simple Responsive HTML Table Using Pure CSS
with collapsed rows
https://www.exeideas.com/2020/10/simple-responsive-html-table.html
Repeating lines / stripes
.wip {
background: repeating-linear-gradient(
135deg,
#fff000,
#fff000 10px,
#000 10px,
#000 20px
);
}
Divs
How to divide a div in 2 halves:
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/stackoverflow.png)
#yellow {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgb(214, 196, 0);
order: 2;
width: 100%;
}
#yellowL {
position: relative;
float: left;
width: 50%;
margin: auto;
order: 1;
}
#yellowR {
position: relative;
float: right;
width: 50%;
margin: auto;
order: 2;
}
Learning resources
A Basic Walkthrough of the CSS Box Model
https://blog.hubspot.com/website/css-box-model
A Complete Guide to Flexbox
https://css-tricks/snippets/css/a-guide-to-flexbox/
Example - centering:
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
11 Sep 2022
em vs rem
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/digitalocean.png)
em
compounds with each child, taking its parent element as reference.
rem
is always relative to default font-size (set in CSS or browser default of 16px
)
manage multiple fonts in same family
Choose your font on Google Fonts:
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/google.png)
Select which weights you need and you can copy/paste the import code on the right:
At the top of the CSS file, import family:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
and use them in CSS as:
font-weight: 900;
change colour of selection highlights
::selection {
background: #da2222;
text-shadow: none;
}
get CSS element that starts with
for element name
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/stackoverflow.png)
[id^=product]
^=
indicates "starts with".
$=
indicates "ends with".
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/stackoverflow.png)
more here:
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/w3.png)
for value within element
Q: how to target hyperlinks starting with /..
, so only internal links get styled, not all?
20 Sep 2022 to be tested:
[id^=product]{property:value}
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/w3.png)
Responsive Tables
to collapse rows, add display: block;
to th
and td
.
my preferred solution
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/codepen.png)
resources
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/css-tricks.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/css-tricks.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/dbushell.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/cloudfour.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/css-tricks.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/codyhouse.png)
Resources
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/google.png)
![logo](https://ik.imagekit.io/vhucnsp9j1u/images/logos/w3schools.png)
"The aim of web design is not to use all available screen space. It is legibility. Text is most legible with no more than 70 characters per line."
- Paul Graham
(note: 120 characters here!)