Specifies the font for an element.
-
family-name- The name of a font-family, like "times", "arial", etc. -
generic-family- The name of a generic-family, like "serif", "sans-serif".
Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
:root {
--font-family: 'PT Sans', sans-serif;
--monospace-font-family: 'Source Code Pro', Consolas, monospace;
}.ff { font-family: var(--font-family); }
.ff-m { font-family: var(--monospace-font-family); }<body class="ff">
hidden
</body>Specifies the font style for a text.
-
normal- The browser displays a normal font style. This is default. -
italic- The browser displays an italic font style. -
oblique- The browser displays an oblique font style.
.fs-n { font-style: normal; }
.fs-i { font-style: italic; }
.fs-o { font-style: oblique; }<i class="fs-i">Italics</i>Specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
-
normal- The browser displays a normal font. This is default. -
small-caps- The browser displays a small-caps font.
.fv-n { font-variant: normal; }
.fv-sc { font-variant: small-caps; }<h3 class="h3 fv-sc">Small caps heading</h3>Sets how thick or thin characters in text should be displayed.
-
normal- Defines normal characters. This is default. -
bold- Defines thick characters. -
bolder- Defines thicker characters. -
lighter- Defines lighter characters. -
number- Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
.fw-n { font-weight: normal; }
.fw-b { font-weight: bold; }
.fw-br { font-weight: bolder; }
.fw-lr { font-weight: lighter; }<strong class="fw-b">Bold text</strong>Sets the size of a font.
length - Sets the font-size to a fixed size in px, cm, etc.
% - Sets the font-size to a percent of the parent element's font size.
:root {
--h1: 2rem;
--h2: 1.5rem;
--h3: 1.25rem;
--h4: 1rem;
--h5: .875rem;
--h6: .75rem;
}.h0 { font-size: calc(var(--h2) * 2); }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.h4 { font-size: var(--h4); }
.h5 { font-size: var(--h5); }
.h6 { font-size: var(--h6); }<h1 class="h0">Heading</h1>Sets all the list properties in one declaration.
-
list-style-type- Specifies the type of list-item marker. -
list-style-position- Specifies where to place the list-item marker. -
list-style-image- Specifies the type of list-item marker.
Note: If one of the values above are missing, e.g. list-style: circle inside; the default value for the missing property will be inserted, if any.
.lis-n { list-style: none; }<ul class="lis-n">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Specifies if the list-item markers should appear inside or outside the content flow.
-
inside- Indents the marker and the text. The bullets appear inside. -
outside- Default. Keeps the marker to the left of the text.
.lisp-i { list-style-position: inside; }
.lisp-o { list-style-position: outside; }<ul class="lisp-i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Specifies the type of list-item marker in a list.
-
disc- Default value. The marker is a filled circle. -
armenian- The marker is traditional Armenian numbering. -
circle- The marker is a circle. -
cjk-ideographic- The marker is plain ideographic numbers. -
decimal- The marker is a number. -
decimal-leading-zero- The marker is a number with leading zeros (01, 02, 03). -
georgian- The marker is traditional Georgian numbering. -
hebrew- The marker is traditional Hebrew numbering. -
hiragana- The marker is traditional Hiragana numbering. -
hiragana-iroha- The marker is traditional Hiragana iroha numbering. -
katakana- The marker is traditional Katakana numbering. -
katakana-iroha- The marker is traditional Katakana iroha numbering. -
lower-alpha- The marker is lower-alpha (a, b, c, d, e, etc.). -
lower-greek- The marker is lower-greek. -
lower-latin- The marker is lower-latin (a, b, c, d, e, etc.). -
lower-roman- The marker is lower-roman (i, ii, iii, iv, v, etc.). -
none- No marker is shown. -
square- The marker is a square. -
upper-alpha- The marker is upper-alpha (A, B, C, D, E, etc.). -
upper-latin- The marker is upper-latin (A, B, C, D, E, etc.). -
upper-roman- The marker is upper-roman (I, II, III, IV, V, etc.).
.list-n { list-style-type: none; }
.list-d { list-style-type: disc; }
.list-c { list-style-type: circle; }
.list-s { list-style-type: square; }
.list-dc { list-style-type: decimal; }
.list-dclz { list-style-type: decimal-leading-zero; }
.list-lr { list-style-type: lower-roman; }
.list-ur { list-style-type: upper-roman; }<ul class="lisp-i list-c">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Replaces the list-item marker with an image.
-
none- Default. No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered. -
url- The path to the image to be used as a list-item marker.
Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.
:root {
--list-style-image-1: url(http://placehold.it/20/ffffff/000000);
--list-style-image-2: url(http://placehold.it/20/ffffff/000000);
--list-style-image-3: url(http://placehold.it/20/ffffff/000000);
--list-style-image-4: url(http://placehold.it/20/ffffff/000000);
}.lisi-n { list-style-image: none; }
.lisi-1 { list-style-image: var(--list-style-image-1); }
.lisi-2 { list-style-image: var(--list-style-image-2); }
.lisi-3 { list-style-image: var(--list-style-image-3); }
.lisi-4 { list-style-image: var(--list-style-image-4); }<ul class="lisp-i lisi-1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Specifies the horizontal alignment of text in an element.
-
left- Aligns the text to the left. -
right- Aligns the text to the right. -
center- Centers the text. -
justify- Stretches the lines so that each line has equal width.
.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-j { text-align: justify; }<div class="ta-c">
Centred text
</div>Specifies the decoration added to text.
-
none- Defines a normal text. This is default. -
underline- Defines a line below the text. -
overline- Defines a line above the text. -
line-through- Defines a line through the text.
Note: In CSS3, the text-decoration property is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this is currently not supported in any of the major browsers. Note: In CSS3 you can use the text-decoration-color property to change the color of the decoration, otherwise the color is the same as the color of the text.
.td-n { text-decoration: none; }
.td-u { text-decoration: underline; }
.td-o { text-decoration: overline; }
.td-l { text-decoration: line-through; }<a class="td-n">Hyperlink without an underline</a>Controls the capitalization of text.
-
none- No capitalization. The text renders as it is. This is default. -
capitalize- Transforms the first character of each word to uppercase. -
uppercase- Transforms all characters to uppercase. -
lowercase- Transforms all characters to lowercase.
.tt-n { text-transform: none; }
.tt-c { text-transform: capitalize; }
.tt-u { text-transform: uppercase; }
.tt-l { text-transform: lowercase; }<h3 class="h3 tt-u">Uppercase heading</h3>Specifies the indentation of the first line in a text-block.
-
length- Defines a fixed indentation in px, pt, cm, em, etc. Default is 0. -
%- Defines the indentation in % of the width of the parent element.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
.ti-- { text-indent: -9999px; }Specifies how overflowed content that is not displayed should be signaled to the user.
-
clip- Default value. Clips the text. -
ellipsis- Render an ellipsis ("...") to represent clipped text. -
string- Render the given string to represent clipped text.
.tov-e { text-overflow: ellipsis; }<ul>
<li class="tov-e ov-h whs-nw">
This example uses other nuclear modules to clip text
</li>
</ul>Adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.
-
h-shadow- Required. The position of the horizontal shadow. -
v-shadow- Required. The position of the vertical shadow. -
blur-radius- Optional. The blur radius. Default value is 0. -
color- Optional. The color of the shadow. -
none- Default value. No shadow.
Note: Negative values are allowed for h-shadow and v-shadow
:root {
--h-shadow: 0;
--v-shadow: 0;
--blur-radius: 0;
--colour: rgba(0, 0, 0, .5);
--text-shadow: var(--h-shadow) var(--v-shadow) var(--blur-radius) var(--colour);
}.tsh { text-shadow: var(--text-shadow); }
.tsh-n { text-shadow: none; }Increases or decreases the space between characters in a text.
-
normal- No extra space between characters. This is default. -
length- Defines an extra space between characters. Negative values allowed.
:root {
--letter-spacing-1: .1em;
--letter-spacing-2: .2em;
--letter-spacing-3: .3em;
--letter-spacing-4: .4em;
}.lts-n { letter-spacing: normal; }
.lts-1 { letter-spacing: var(--letter-spacing-1); }
.lts-2 { letter-spacing: var(--letter-spacing-2); }
.lts-3 { letter-spacing: var(--letter-spacing-3); }
.lts-4 { letter-spacing: var(--letter-spacing-4); }Specifies the line height.
-
normal- A normal line height. This is default. -
number- A number that will be multiplied with the current font size. -
length- A fixed line height in px, pt, cm, etc. -
%- A line height in percent of the current font size.
Note: Negative values are not allowed.
:root {
--line-height-1: .75;
--line-height-2: 1;
--line-height-3: 1.25;
--line-height-4: 1.5;
}.lh-1 { line-height: var(--line-height-1); }
.lh-2 { line-height: var(--line-height-2); }
.lh-3 { line-height: var(--line-height-3); }
.lh-4 { line-height: var(--line-height-4); }Increases or decreases the white space between words.
-
normal- Defines normal space between words (0.25em). This is default. -
length- Defines an additional space between words (in px, pt, cm, em, etc).
Note: Negative values are allowed.
:root {
--word-spacing-1: .1em;
--word-spacing-2: .2em;
--word-spacing-3: .3em;
--word-spacing-4: .4em;
}.wos-1 { word-spacing: var(--word-spacing-1); }
.wos-2 { word-spacing: var(--word-spacing-2); }
.wos-3 { word-spacing: var(--word-spacing-3); }
.wos-4 { word-spacing: var(--word-spacing-4); }Specifies how white-space inside an element is handled.
-
normal- Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default. -
nowrap- Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a<br>tag is encountered. -
pre- Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the<pre>tag in HTML. -
pre-line- Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks. -
pre-wrap- Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.
.whs-n { white-space: normal; }
.whs-nw { white-space: nowrap; }
.whs-p { white-space: pre; }Specifies line breaking rules for non-CJK scripts.
-
normal- Default value. Break words according to their usual rules. -
break-all- Lines may break between any two letters. -
keep-all- Breaks are prohibited between pairs of letters.
Tip: CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.
.wob-k { word-break: keep-all; }