HTML ~ CSS


Stuff I learned making this website

<p style="color: red;">
paragraph
</p>
To style just a word you can use the span keyword which as no fonctionality.
Une phrase avec un 
<span style="color:red;"> mot </span> 
rouge
une phrase avec un mot rouge

px (Pixels):

  • px is an absolute unit of measurement.
  • It represents a single dot on a computer screen and is the same size regardless of the screen's resolution.
  • It's not typically affected by the user's settings, such as font size preferences.
  • Often used for precise control over element sizes and positioning.

em:

  • em is a relative unit of measurement.
  • It is based on the font size of the nearest parent element with a font size defined.
  • If no parent element has a defined font size, em is based on the browser's default font size.
  • 1em is equal to the font size of the element itself. For example, if an element's font size is 16px, 1em is 16px.

% (Percentage):

  • % units are relative to the parent element's size.
  • For example, if you set an element's width to 50%, it will be half the width of its parent element.

vw and vh (Viewport Width and Viewport Height):

  • vw represents a percentage of the viewport width, while vh represents a percentage of the viewport height.
  • These units are used for responsive design, where elements scale based on the size of the viewport.

rem (Root em):

  • rem is similar to em but is based on the font size of the root (<html>) element rather than the parent element.
  • This makes it more predictable and easier to control in complex layouts because it's not affected by nesting.

cm, mm, in, pt, pc (Absolute Length Units):

  • These are absolute units of measurement, often used for print stylesheets or when you need precise physical measurements.
  • cm represents centimeters, mm millimeters, in inches, pt points, and pc picas.

In general, it's a good practice to use relative units (em, rem, %, vw, vh) for most layout and sizing purposes, especially in responsive web design. They adapt well to different screen sizes and are more accessible for users who might adjust their default font sizes for readability. Absolute units like px and physical units (cm, mm, in, pt, pc) are often used for specific design elements where precise control is required, such as print stylesheets or when working with fixed-sized elements.

CSS

.ex3 .hide3 {
    width: 100%;
    display: table;
    overflow: hidden;
    overflow-x: auto;
    height: auto;
    transition: 0.7s ease;
    background-color: #00000016;
    border-radius: 10px;
    padding-left: 2em; 
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    box-sizing: border-box;
}

  
.ex3 input[type="checkbox"]:checked + .hide3 {
      height: 0;
      opacity: 0;
      display: block;
      padding: 0; 
      border-radius: 0; 
      margin: 0; 
}

HTML

                

<div class="ex3">
<label for="newname">
~ Drop Down Menu
</label>
<input type="checkbox" name="one" 
id="newname" checked = "true">
<div class="hide3">
Stuff Goes here ...
</div>
</div>
Install cli tool for converting text files
brew install pandoc
 Convert file to html and put it in the clipboard (on macos)
pandoc "filename.md" -t html | pbcopy
Some people use svg background but it is way easier to use the unicode up arrow. (Warning, if your font doesn't define the up arrow, you might get emojis on some browser) 
a[href^="http"]::after,
a[href^="https://"]::after {
    content: "↗";
    margin-left: 4px;
    display: inline-block;
}
This let you set variable for your dark and light theme, you then need to use them accordingly in your code. 
@media (prefers-color-scheme: light){
    :root{
        --color-default:  #322e2d;
        --color-bg: #b8b1a9;
        --color-dim: #606060;
    }
}

@media (prefers-color-scheme: dark){
    :root{
        --color-default: #BAB6B1;
        --color-bg: #322e2d;
        --color-dim:#7f7f7f;
    }
}
I use it to reduce padding on phone, but you can do whatever css you want in it. It works by checking the size of the screen 
@media only screen and (max-width: 400px) 
{
    html { padding: 0.5rem;}
}
I tend to regularly post very low res images, were pixelation is an intended part of the visual. But browser will add blur to ease the eye. To force raw image rendering you can use a CSS style :
image-rendering: pixelated;
- home -