CSS Default Browser Values for HTML Elements

Element	Default CSS Value
a:link	color: (internal value); text-decoration: underline; cursor: auto;
a:visited	color: (internal value); text-decoration: underline; cursor: auto;
a:link:active	color: (internal value);
a:visited:active	color: (internal value);
abbr	None.
address	display: block; font-style: italic;
area	display: none;
article	display: block;
aside	display: block;
audio	None.
b	font-weight: bold;
base	None.
bdi	None.
bdo	unicode-bidi: bidi-override;
blockquote	display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px;
body	display: block; margin: 8px;
body:focus	outline: none;
br	None.
button	None
canvas	None.
caption	display: table-caption; text-align: center;
cite	font-style: italic;
code	font-family: monospace;
col	display: table-column;
colgroup	display: table-column-group
datalist	display: none;
dd	display: block; margin-left: 40px;
del	text-decoration: line-through;
details	display: block;
dfn	font-style: italic;
dialog	None.
div	display: block;
dl	display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;
dt	display: block;
em	font-style: italic;
embed:focus	outline: none;
fieldset	display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value);
figcaption	display: block;
figure	display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px;
footer	display: block;
form	display: block; margin-top: 0em;
h1	display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold;
h2	display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold;
h3	display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold;
h4	display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold;
h5	display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold;
h6	display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold;
head	display: none;
header	display: block;
hr	display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;
html	display: block;
html:focus	outline: none;
i	font-style: italic;
iframe:focus	outline: none;
iframe[seamless]	display: block;
img	display: inline-block;
input	None.
ins	text-decoration: underline;
kbd	font-family: monospace;
label	cursor: default;
legend	display: block; padding-left: 2px; padding-right: 2px; border: none;
li	display: list-item;
link	display: none;
main	None.
map	display: inline;
mark	background-color: yellow; color: black;
menu	display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px;
menuitem	None.
meta	None.
meter	None.
nav	display: block;
noscript	None.
object:focus	outline: none;
ol	display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px;
optgroup	None.
option	None.
output	display: inline;
p	display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;
param	display: none;
picture	None.
pre	display: block; font-family: monospace; white-space: pre; margin: 1em 0;
progress	None.
q	display: inline;
q::before	content: open-quote;
q::after	content: close-quote;
rp	None.
rt	line-height: normal;
ruby	None.
s	text-decoration: line-through;
samp	font-family: monospace;
script	display: none;
section	display: block;
select	None.
small	font-size: smaller;
source	None.
span	None.
strike	text-decoration: line-through;
strong	font-weight: bold;
style	display: none;
sub	vertical-align: sub; font-size: smaller;
summary	display: block;
sup	vertical-align: super; font-size: smaller;
table	display: table; border-collapse: separate; border-spacing: 2px; border-color: gray;
tbody	display: table-row-group; vertical-align: middle; border-color: inherit;
td	display: table-cell; vertical-align: inherit;
template	None.
textarea	None.
tfoot	display: table-footer-group; vertical-align: middle; border-color: inherit;
th	display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center;
thead	display: table-header-group; vertical-align: middle; border-color: inherit;
time	None.
title	display: none;
tr	display: table-row; vertical-align: inherit; border-color: inherit;
track	None.
u	text-decoration: underline;
ul	display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;
var	font-style: italic;
video	None.
wbr	None.
html	display: block;
html:focus	outline: none;
i	font-style: italic;
iframe:focus	outline: none;
iframe[seamless]	display: block;
img	display: inline-block;
input	None.
ins	text-decoration: underline;
kbd	font-family: monospace;
label	cursor: default;
legend	display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
li	display: list-item;
link	display: none;
main	None.
map	display: inline;
mark	background-color: yellow;
color: black;
menu	display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
menuitem	None.
meta	None.
meter	None.
nav	display: block;
noscript	None.
object:focus	outline: none;
ol	display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
optgroup	None.
option	None.
output	display: inline;
p	display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
param	display: none;
picture	None.
pre	display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
progress	None.
q	display: inline;
q::before	content: open-quote;
q::after	content: close-quote;
rp	None.
rt	line-height: normal;
ruby	None.
s	text-decoration: line-through;
samp	font-family: monospace;
script	display: none;
section	display: block;
select	None.
small	font-size: smaller;
source	None.
span	None.
strike	text-decoration: line-through;
strong	font-weight: bold;
style	display: none;
sub	vertical-align: sub;
font-size: smaller;
summary	display: block;
sup	vertical-align: super;
font-size: smaller;
table	display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
tbody	display: table-row-group;
vertical-align: middle;
border-color: inherit;
td	display: table-cell;
vertical-align: inherit;
template	None.
textarea	None.
tfoot	display: table-footer-group;
vertical-align: middle;
border-color: inherit;
th	display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
thead	display: table-header-group;
vertical-align: middle;
border-color: inherit;
time	None.
title	display: none;
tr	display: table-row;
vertical-align: inherit;
border-color: inherit;
track	None.
u	text-decoration: underline;
ul	display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
var	font-style: italic;
video	None.
wbr	None.

***** 

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
.class1.class2	.name1.name2	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	.name1 .name2	Selects all elements with name2 that is a descendant of an element with name1
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element.class	p.intro	Selects all <p> elements with class="intro"
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that is placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that is preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target="_blank"]	Selects all elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects all elements with a title attribute containing the word "flower"
[attribute|=value]	[lang|="en"]	Selects all elements with a lang attribute value equal to "en" or starting with "en-"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:default	input:default	Selects the default <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:fullscreen	:fullscreen	Selects the element that is in full-screen mode
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:indeterminate	input:indeterminate	Selects input elements that are in an indeterminate state
:invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
::marker	::marker	Selects the markers of list items
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	input::placeholder	Selects input elements with the "placeholder" attribute specified
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

 ******

All CSS Combinator Selectors

Selector	Example	Example description
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

 

Custom Styling Radio Input Dark Theme

<style>
div {
  background: black;
  opacity: 0.8;
}
input[type="radio"] {
    position: absolute;
    opacity: 0;
}

input[type="radio"] + .radio {
    border: 1px solid cyan;
    border-radius: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
}

input[type="radio"]:checked + .radio {
    background: cyan;
}
span.whitetext {
  color:white;
}
</style>

<div>
<label for="male">
    <input id="male" type="radio" name="gender" value="male" />
    <span class="radio"></span>
    <span class="whitetext">Male</span>
</label>

<label for="female">
    <input id="female" type="radio" name="gender" value="female" checked />
    <span class="radio"></span>
    <span class="whitetext">Female</span>
</label>
</div>

 

Emoji in the Browser

HTML

The most straightforward way. You can paste the previously chosen Emoji.

<p>🔥</p>

Your other option is to use the codepoint of the Emoji and replacing U+ with &#x.

<p>&#x1F525</p>

CSS

In CSS you need to use the ::before or ::after pseudo-element coupled with the content property where you paste the Emoji as the value.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "🔥";
}

The same way, you can use codepoint replacing U+ with \0.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "\01F525";
}

JavaScript

In JavaScript you need to specify the innerHTML by pasting the Emoji.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";

Similarly, you can use the String method fromCodePoint mixed with the codepoint value where you replace U+ with 0x.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);

****

<style> 

body {
  font-family: Arial, sans-serif;
}

.css-1::before {
  content: "🔥";
}

.css-2::before {
  /* replace U+ with \0 */
  content: "\01F525";
}

p {
  
}

.fire {
  font-size: 24px;
}

</style> 

  <h1>Emoji's in the Web</h1>

<p><span class="fire html-1">🔥</span> Insert in HTML by copy pasting</p>

<!-- replace U+ with &#x -->
<p><span class="fire html-2">&#x1F525</span> Insert in HTML with its codepoint (replace U+ with &#x)</p>

<p><span class="fire css-1"></span> Insert in CSS by copy pasting</p>

<!-- replace U+ with \0 -->
<p><span class="fire css-2"></span> Insert in CSS with its codepoint (replace U+ with \0)</p>

<p><span class="fire js-1"></span> Insert in JS by copy pasting</p>

<!-- replace U+ with 0x -->
<p><span class="fire js-2"></span> Insert in JS with its codepoint (replace U+ with 0x)</p>


<p><a href="https://emojipedia.org/" target="_blank">Find your Emoji's</a></p>

<script>

document.querySelector(".js-1").innerHTML = "🔥";

// replace U+ with 0x
document.querySelector(".js-2").innerHTML = String.fromCodePoint(0x1F525);   

</script> 

https://css-tricks.com/the-checkbox-hack/ 

Toggle Visibility of a SelectBox with a CheckBox without JavaScript, only with CSS

<!DOCTYPE html>
<html>
<body>
<style>
  select {
    display: none;
  }
  .toggleselectbox:checked + .selectpivot {
    display: inline;
  }
</style>
<fieldset>
<legend>Display select box when the checkbox is checked:</legend>
<div class="custom-select" style="width:400px;">
<label for="toggleselectbox">Toggle pivot language</label>
<input type="checkbox" id="toggleselectbox" class="toggleselectbox" name="toggleselectbox" value="Toggle">
<select class="selectpivot" id="selectpivot">
    <option value="0" disabled>Select pivot language:</option>
    <option value="DE">DE</option>
    <option value="EN" selected>EN</option>
    <option value="RO">RO</option>
    <option value="IT">IT</option>
    <option value="SP">SP</option>
  </select>
</fieldset>
</div>
</body>
</html>

Display select box when the checkbox is checked:

Toggle pivot language Select pivot language: DE EN RO IT SP