color-new-tab-page-attribution-foreground: rgba(232, 234, 237, 1.00);
--color-new-tab-page-most-visited-foreground: rgba(232, 234, 237, 1.00);
--ntp-logo-color: rgba(255, 255, 255, 1.00);
}
<style>
#content {
align-items: center;
display: flex;
flex-direction: column;
height: calc(100vh - var(--ntp-one-google-bar-height));
min-width: fit-content;
padding-top: var(--ntp-one-google-bar-height);
position: relative;
z-index: 1;
}
user agent stylesheet
div {
display: block;
}
<style>
:host {
--cr-focus-outline-color: var(--color-new-tab-page-focus-ring);
--ntp-theme-text-shadow: none;
--ntp-one-google-bar-height: 56px;
--ntp-search-box-width: 337px;
--ntp-menu-shadow: var(--color-new-tab-page-menu-inner-shadow) 0 1px 2px 0,var(--color-new-tab-page-menu-outer-shadow) 0 2px 6px 2px;
--ntp-module-width: var(--ntp-search-box-width);
--ntp-module-layout-width: var(--ntp-search-box-width);
--ntp-module-border-radius: 5px;
--ntp-protected-icon-background-color: transparent;
--ntp-protected-icon-background-color-hovered: rgba(255, 255, 255, .1);
}
@media (prefers-color-scheme: dark)
<style>
:host, html {
--scrollable-border-color: var(--google-grey-700);
}
<style>
:host, html {
--scrollable-border-color: var(--google-grey-300);
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: 81.25%;
}
html:not(#z) {
--color-ref-primary0: #000000ff;
--color-ref-primary10: #041e49ff;
--color-ref-primary20: #062e6fff;
--color-ref-primary25: #073888ff;
--color-ref-primary30: #0842a0ff;
--color-ref-primary40: #0b57d0ff;
--color-ref-primary50: #1b6ef3ff;
--color-ref-primary60: #4c8df6ff;
--color-ref-primary70: #7cacf8ff;
--color-ref-primary80: #a8c7faff;
--color-ref-primary90: #d3e3fdff;
--color-ref-primary95: #ecf3feff;
--color-ref-primary99: #fafbffff;
--color-ref-primary100: #ffffffff;
--color-ref-secondary0: #000000ff;
--color-ref-secondary10: #001d35ff;
--color-ref-secondary12: #002238ff;
--color-ref-secondary15: #002845ff;
--color-ref-secondary20: #003355ff;
--color-ref-secondary25: #003f66ff;
--color-ref-secondary30: #004a77ff;
--color-ref-secondary35: #005789ff;
--color-ref-secondary40: #00639bff;
--color-ref-secondary50: #047db7ff;
--color-ref-secondary60: #3998d3ff;
--color-ref-secondary70: #5ab3f0ff;
--color-ref-secondary80: #7fcfffff;
--color-ref-secondary90: #c2e7ffff;
--color-ref-secondary95: #dff3ffff;
--color-ref-secondary99: #f7fcffff;
--color-ref-secondary100: #ffffffff;
--color-ref-tertiary0: #000000ff;
--color-ref-tertiary10: #072711ff;
--color-ref-tertiary20: #0a3818ff;
--color-ref-tertiary30: #0f5223ff;
--color-ref-tertiary40: #146c2eff;
--color-ref-tertiary50: #198639ff;
--color-ref-tertiary60: #1ea446ff;
--color-ref-tertiary70: #37be5fff;
--color-ref-tertiary80: #6dd58cff;
--color-ref-tertiary90: #c4eed0ff;
--color-ref-tertiary95: #e7f8edff;
--color-ref-tertiary99: #f2ffeeff;
--color-ref-tertiary100: #ffffffff;
--color-ref-error0: #000000ff;
--color-ref-error10: #410e0bff;
--color-ref-error20: #601410ff;
--color-ref-error30: #8c1d18ff;
--color-ref-error40: #b3261eff;
--color-ref-error50: #dc362eff;
Show All Properties (1046 more)
}
html {
--google-grey-850-rgb: 48, 49, 52;
--google-grey-850: rgb(var(--google-grey-850-rgb));
--google-red-50-rgb: 252, 232, 230;
--google-red-50: rgb(var(--google-red-50-rgb));
--google-red-800-rgb: 179, 20, 18;
--google-red-800: rgb(var(--google-red-800-rgb));
--ntp-focus-shadow: 0 0 0 2px var(--color-new-tab-page-focus-ring);
--ntp-module-item-border-radius: 4px;
--ntp-module-text-size: 13px;
}
<style>
html {
--card-max-width: 960px;
--card-min-width: 550px;
--card-padding-between: 16px;
--card-padding-side: 24px;
--first-card-padding-top: 24px;
--cluster-max-width: var(--card-max-width);
--cluster-min-width: var(--card-min-width);
--cluster-padding-horizontal: var(--card-padding-side);
--cluster-padding-vertical: var(--card-padding-between);
--favicon-margin: 16px;
--favicon-size: 16px;
--first-cluster-padding-top: var(--first-card-padding-top);
--pill-height: 34px;
--pill-padding-icon: 12px;
--pill-padding-text: 16px;
--top-visit-favicon-size: 24px;
}
@media (prefers-color-scheme: dark)
<style>
html {
--annotation-background-color: var(--google-green-300);
--annotation-text-color: var(--google-grey-900);
--border-color: var(--google-grey-700);
--entity-image-background-color: var(--google-grey-800);
--icon-color: white;
--url-color: var(--google-blue-300);
--side-panel-url-color: var(--google-grey-500);
}
<style>
html {
--annotation-background-color: var(--google-green-50);
--annotation-text-color: var(--google-green-600);
--border-color: var(--google-grey-300);
--entity-image-background-color: var(--google-grey-50);
--icon-color: var(--google-grey-600);
--url-color: var(--google-blue-600);
--side-panel-url-color: var(--google-grey-700);
}
<style>
html {
--cr-button-edge-spacing: 12px;
--cr-button-height: 32px;
--cr-controlled-by-spacing: 24px;
--cr-default-input-max-width: 264px;
--cr-icon-ripple-size: 36px;
--cr-icon-ripple-padding: 8px;
--cr-icon-size: 20px;
--cr-icon-button-margin-start: 16px;
--cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);
--cr-section-min-height: 48px;
--cr-section-two-line-min-height: 64px;
--cr-section-padding: 20px;
--cr-section-vertical-padding: 12px;
--cr-section-indent-width: 40px;
--cr-section-indent-padding: calc( var(--cr-section-padding) + var(--cr-section-indent-width));
--cr-section-vertical-margin: 21px;
--cr-centered-card-max-width: 680px;
--cr-centered-card-width-percentage: 0.96;
--cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14);
--cr-separator-height: 1px;
--cr-separator-line: var(--cr-separator-height) solid var(--cr-separator-color);
--cr-toolbar-overlay-animation-duration: 150ms;
--cr-toolbar-height: 56px;
--cr-container-shadow-height: 6px;
--cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));
--cr-container-shadow-max-opacity: 1;
--cr-card-border-radius: 8px;
--cr-disabled-opacity: .38;
--cr-form-field-bottom-spacing: 16px;
--cr-form-field-label-font-size: .625rem;
--cr-form-field-label-height: 1em;
--cr-form-field-label-line-height: 1;
}
@media (prefers-color-scheme: dark)
<style>
html {
--cr-primary-text-color: var(--google-grey-200);
--cr-secondary-text-color: var(--google-grey-500);
--cr-card-background-color: var(--google-grey-900-white-4-percent);
--cr-card-shadow-color-rgb: 0,0,0;
--cr-checked-color: var(--google-blue-300);
--cr-focused-item-color: var(--google-grey-800);
--cr-form-field-label-color: var(--dark-secondary-color);
--cr-hairline-rgb: 255,255,255;
--cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1);
--cr-link-color: var(--google-blue-300);
--cr-menu-background-color: var(--google-grey-900);
--cr-menu-background-focus-color: var(--google-grey-700);
--cr-menu-background-sheen: rgba(255, 255, 255, .06);
--cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,rgba(0, 0, 0, .15) 0 3px 6px 2px;
--cr-separator-color: rgba(255, 255, 255, .1);
--cr-title-text-color: var(--cr-primary-text-color);
--cr-toolbar-background-color: var(--google-grey-900-white-4-percent);
--cr-hover-background-color: rgba(255, 255, 255, .1);
--cr-active-background-color: rgba(var(--google-grey-200-rgb), .16);
--cr-focus-outline-color: rgba(var(--google-blue-300-rgb), .4);
}
<style>
html {
--google-blue-50-rgb: 232,240,254;
--google-blue-50: rgb(var(--google-blue-50-rgb));
--google-blue-100-rgb: 210,227,252;
--google-blue-100: rgb(var(--google-blue-100-rgb));
--google-blue-200-rgb: 174,203,250;
--google-blue-200: rgb(var(--google-blue-200-rgb));
--google-blue-300-rgb: 138,180,248;
--google-blue-300: rgb(var(--google-blue-300-rgb));
--google-blue-400-rgb: 102,157,246;
--google-blue-400: rgb(var(--google-blue-400-rgb));
--google-blue-500-rgb: 66,133,244;
--google-blue-500: rgb(var(--google-blue-500-rgb));
--google-blue-600-rgb: 26,115,232;
--google-blue-600: rgb(var(--google-blue-600-rgb));
--google-blue-700-rgb: 25,103,210;
--google-blue-700: rgb(var(--google-blue-700-rgb));
--google-blue-800-rgb: 24,90,188;
--google-blue-800: rgb(var(--google-blue-800-rgb));
--google-blue-900-rgb: 23,78,166;
--google-blue-900: rgb(var(--google-blue-900-rgb));
--google-green-50-rgb: 230,244,234;
--google-green-50: rgb(var(--google-green-50-rgb));
--google-green-200-rgb: 168,218,181;
--google-green-200: rgb(var(--google-green-200-rgb));
--google-green-300-rgb: 129,201,149;
--google-green-300: rgb(var(--google-green-300-rgb));
--google-green-400-rgb: 91,185,116;
--google-green-400: rgb(var(--google-green-400-rgb));
--google-green-500-rgb: 52,168,83;
--google-green-500: rgb(var(--google-green-500-rgb));
--google-green-600-rgb: 30,142,62;
--google-green-600: rgb(var(--google-green-600-rgb));
--google-green-700-rgb: 24,128,56;
--google-green-700: rgb(var(--google-green-700-rgb));
--google-green-800-rgb: 19,115,51;
--google-green-800: rgb(var(--google-green-800-rgb));
--google-green-900-rgb: 13,101,45;
--google-green-900: rgb(var(--google-green-900-rgb));
--google-grey-50-rgb: 248,249,250;
--google-grey-50: rgb(var(--google-grey-50-rgb));
--google-grey-100-rgb: 241,243,244;
--google-grey-100: rgb(var(--google-grey-100-rgb));
--google-grey-200-rgb: 232,234,237;
--google-grey-200: rgb(var(--google-grey-200-rgb));
--google-grey-300-rgb: 218,220,224;
--google-grey-300: rgb(var(--google-grey-300-rgb));
--google-grey-400-rgb: 189,193,198;
--google-grey-400: rgb(var(--google-grey-400-rgb));
--google-grey-500-rgb: 154,160,166;
--google-grey-500: rgb(var(--google-grey-500-rgb));
Show All Properties (58 more)
}
<style>
html {
--google-red-100-rgb: 244, 199, 195;
--google-red-100: rgb(var(--google-red-100-rgb));
--google-red-300-rgb: 230, 124, 115;
--google-red-300: rgb(var(--google-red-300-rgb));
--google-red-500-rgb: 219, 68, 55;
--google-red-500: rgb(var(--google-red-500-rgb));
--google-red-700-rgb: 197, 57, 41;
--google-red-700: rgb(var(--google-red-700-rgb));
--google-blue-100-rgb: 198, 218, 252;
--google-blue-100: rgb(var(--google-blue-100-rgb));
--google-blue-300-rgb: 123, 170, 247;
--google-blue-300: rgb(var(--google-blue-300-rgb));
--google-blue-500-rgb: 66, 133, 244;
--google-blue-500: rgb(var(--google-blue-500-rgb));
--google-blue-700-rgb: 51, 103, 214;
--google-blue-700: rgb(var(--google-blue-700-rgb));
--google-green-100-rgb: 183, 225, 205;
--google-green-100: rgb(var(--google-green-100-rgb));
--google-green-300-rgb: 87, 187, 138;
--google-green-300: rgb(var(--google-green-300-rgb));
--google-green-500-rgb: 15, 157, 88;
--google-green-500: rgb(var(--google-green-500-rgb));
--google-green-700-rgb: 11, 128, 67;
--google-green-700: rgb(var(--google-green-700-rgb));
--google-yellow-100-rgb: 252, 232, 178;
--google-yellow-100: rgb(var(--google-yellow-100-rgb));
--google-yellow-300-rgb: 247, 203, 77;
--google-yellow-300: rgb(var(--google-yellow-300-rgb));
--google-yellow-500-rgb: 244, 180, 0;
--google-yellow-500: rgb(var(--google-yellow-500-rgb));
--google-yellow-700-rgb: 240, 147, 0;
--google-yellow-700: rgb(var(--google-yellow-700-rgb));
--google-grey-100-rgb: 245, 245, 245;
--google-grey-100: rgb(var(--google-grey-100-rgb));
--google-grey-300-rgb: 224, 224, 224;
--google-grey-300: rgb(var(--google-grey-300-rgb));
--google-grey-500-rgb: 158, 158, 158;
--google-grey-500: rgb(var(--google-grey-500-rgb));
--google-grey-700-rgb: 97, 97, 97;
--google-grey-700: rgb(var(--google-grey-700-rgb));
--paper-red-50: #ffebee;
--paper-red-100: #ffcdd2;
--paper-red-200: #ef9a9a;
--paper-red-300: #e57373;
--paper-red-400: #ef5350;
--paper-red-500: #f44336;
--paper-red-600: #e53935;
--paper-red-700: #d32f2f;
--paper-red-800: #c62828;
--paper-red-900: #b71c1c;
--paper-red-50: #ffebee;
--paper-red-100: #ffcdd2;
--paper-red-200: #ef9a9a;
--paper-red-300: #e57373;
--paper-red-400: #ef5350;
--paper-red-500: #f44336;
--paper-red-600: #e53935;
--paper-red-700: #d32f2f;
--paper-red-800: #c62828;
--paper-red-900: #b71c1c;
--paper-red-a100: #ff8a80;
--paper-red-a200: #ff5252;
--paper-red-a400: #ff1744;
--paper-red-a700: #d50000;
--paper-light-blue-50: #e1f5fe;
--paper-light-blue-100: #b3e5fc;
--paper-light-blue-200: #81d4fa;
--paper-light-blue-300: #4fc3f7;
--paper-light-blue-400: #29b6f6;
--paper-light-blue-500: #03a9f4;
--paper-light-blue-600: #039be5;
--paper-light-blue-700: #0288d1;
--paper-light-blue-800: #0277bd;
--paper-light-blue-900: #01579b;
--paper-light-blue-a100: #80d8ff;
--paper-light-blue-a200: #40c4ff;
--paper-light-blue-a400: #00b0ff;
--paper-light-blue-a700: #0091ea;
--paper-yellow-50: #fffde7;
--paper-yellow-100: #fff9c4;
--paper-yellow-200: #fff59d;
--paper-yellow-300: #fff176;
--paper-yellow-400: #ffee58;
--paper-yellow-500: #ffeb3b;
--paper-yellow-600: #fdd835;
--paper-yellow-700: #fbc02d;
--paper-yellow-800: #f9a825;
--paper-yellow-900: #f57f17;
--paper-yellow-a100: #ffff8d;
--paper-yellow-a200: #ffff00;
--paper-yellow-a400: #ffea00;
--paper-yellow-a700: #ffd600;
--paper-orange-50: #fff3e0;
--paper-orange-100: #ffe0b2;
--paper-orange-200: #ffcc80;
--paper-orange-300: #ffb74d;
--paper-orange-400: #ffa726;
--paper-orange-500: #ff9800;
--paper-orange-600: #fb8c00;
--paper-orange-700: #f57c00;
--paper-orange-800: #ef6c00;
--paper-orange-900: #e65100;
--paper-orange-a100: #ffd180;
--paper-orange-a200: #ffab40;
--paper-orange-a400: #ff9100;
--paper-orange-a700: #ff6500;
--paper-grey-50: #fafafa;
--paper-grey-100: #f5f5f5;
--paper-grey-200: #eeeeee;
--paper-grey-300: #e0e0e0;
--paper-grey-400: #bdbdbd;
--paper-grey-500: #9e9e9e;
--paper-grey-600: #757575;
--paper-grey-700: #616161;
--paper-grey-800: #424242;
--paper-grey-900: #212121;
--paper-blue-grey-50: #eceff1;
--paper-blue-grey-100: #cfd8dc;
--paper-blue-grey-200: #b0bec5;
--paper-blue-grey-300: #90a4ae;
--paper-blue-grey-400: #78909c;
--paper-blue-grey-500: #607d8b;
--paper-blue-grey-600: #546e7a;
--paper-blue-grey-700: #455a64;
--paper-blue-grey-800: #37474f;
--paper-blue-grey-900: #263238;
--dark-divider-opacity: 0.12;
--dark-disabled-opacity: 0.38;
--dark-secondary-opacity: 0.54;
--dark-primary-opacity: 0.87;
--light-divider-opacity: 0.12;
--light-disabled-opacity: 0.3;
--light-secondary-opacity: 0.7;
--light-primary-opacity: 1.0;
}
} Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.
HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.
<!DOCTYPE html><html> and ends with </html><h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.<p>..</p> tag.<a> tag.
<a href="https://onecompiler.com/html">HTML online compiler</a>
<img> tag, where src attribute consists of image name.<button>..</button> tag<ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.<a href="https://onecompiler.com/html">HTML online compiler</a>
CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.
Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.
body{
padding: 25px;
}
.title {
color: #228B22;
font-family: Candara;
}
<table> tag.<tr> tag<th> tag<td> tag<caption> tag<script> is the tag used to write scripts in HTML<script src="script.js"></script>