Le Nom Des Fleurs

~ Inline CSS


                            <p style="color: red; font-size: 20px;">
                            
paragraph
                            
</p>

To style just a word you can use the span keyword which as no fonctionality.

            Une phrase avec un 
            <stan style="color:red; Font-size: 20px;"> mot </stan> 
            rouge

une phrase avec un mot rouge

~ HTML Units

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.

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.

% (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.

~ Drop Down Menu

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>

~ MarkDown To HTML

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

~ Adding Arrow to external link

Some people use svg background but it is way easier to use the unicode up arrow

a[href^="http"]::after,
a[href^="https://"]::after {
    content: "↗";
    margin-left: 4px;
    display: inline-block;
}

~ Auto Theme

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;
    }
}

~ Phone CSS

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;}
  }

References

- home -