CSS Cheatsheet

selector{
property: value;
property2: value2;
}
                    

<link rel="stylesheet" type="text/css" href="/style.css" />
                    

.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
                    

div            all div tags
div,p          all divs and paragraphs
div p           paragraphs inside divs
div < pall p tags,             one level deep in div
div + p           p tags immediately after div
div ~p            p tags preceded by div
.classname      all elements with class
#idname         element with ID
div.classname             divs with certain classname
div #idname             div with certain ID
#idname*          all elements inside #idname
                    

@media not|only mediatype and (media feature) {
CSS Code }
Link external file:
<link rel="stylesheet" media=mediatype and|not|only (media feature href="mystylesheet.css">
                    

@media screen and (max-width: 480px) { }
                    

@media screen and (max-width: 600px), (max-height: 500px) {}
                    

 @media print { ... }
                    

@media (prefers-color-scheme: dark) { ... }
                    

all, print, screen, speech
                    

background: url();
                    

background-color: ;
                    

border: 2px solid black;