0% found this document useful (0 votes)

14 views33 pages

Color: Hello World

The document provides an overview of various CSS properties related to typography, including color, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-align, text-decoration, text-indent, text-overflow, text-shadow, text-transform, and white-space. Each property is explained with examples of usage and the effects on text presentation. It serves as a comprehensive guide for styling text in web development.

Uploaded by

Meera Desai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

14 views33 pages

Color: Hello World

Uploaded by

Meera Desai

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 33

#color

Defines the color of the text.

color: transparent;

Applies a transparent color to the text. The text will still take up the space it should.
Hello world
color: red;

You can use one of the 140+ color names.

Hello world
color: #05ffb0;

You can use hexadecimal color codes.

Hello world
color: rgb(50, 115, 220);

You can use rgb() color codes:

 the first value is for red
 the second value is for green
 the third value is for blue
Each of them can have a value between 0 and 255.
Hello world
color: rgba(0, 0, 0, 0.5);

You can use rgba() color codes:

 the first 3 values are for rgb
 the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).
Hello world
color: hsl(14, 100%, 53%);

You can use hsl() color codes:

 the first value is for hue and can go from 0 to 359
 the second value is for saturation and go from 0% to 100%
 the third value is for luminosity and go from 0% to 100%
Hello world
color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

 the first 3 values are for hsl
 the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).
Hello world
In collection: typographyPermalinkShareMDN
#font-family
font-family: "Source Sans Pro", "Arial", sans-serif;

When using multiple values, the font-family list of font families defines the priority in
which the browser should choose the font family.
The browser will look for each family on the user's computer and in any @font-
face resource.
The list is prioritized from left to right: it will use the first value if it's available, or go to the
next one, until the end of the list is reached. The default font family is defined by the browser
preferences.
In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it,
it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.
Hello world
The quick brown fox jumps over the lazy dog
font-family: serif;

The browser will use a serif font family: all characters have stroke endings.
Hello world
The quick brown fox jumps over the lazy dog
font-family: sans-serif;

The browser will use a sans-serif font family: no character has stroke endings.
Hello world
The quick brown fox jumps over the lazy dog
font-family: monospace;

The browser will use a monospace font family: all characters have the same width.
Hello world
The quick brown fox jumps over the lazy dog
font-family: cursive;

The browser will use a cursive font family.

Hello world
The quick brown fox jumps over the lazy dog
font-family: fantasy;

The browser will use a fantasy font family.

Hello world
The quick brown fox jumps over the lazy dog
In collection: typographyPermalinkShareMDN
#font-size
Defines the size of the text.
defaultfont-size: medium;

The text will use the browser's default medium size.

Hello world
The quick brown fox jumps over the lazy dog
font-size: 20px;

You can use pixel values.

Hello world
The quick brown fox jumps over the lazy dog
font-size: 1.2em;

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.
Parent container: 18px
Font-size: 1.2em = 21.6px
Font-size: 1.2em = 25.92px
Font-size: 1.2em = 31.104px
font-size: 1.2rem;

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML
hierarchy, and will reamin context independent.
<html> root element: 18px
Font-size: 1.2rem = 21.6px
Font-size: 1.2rem = 21.6px
Font-size: 1.2rem = 21.6px
font-size: 90%;

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.
Parent container: 18px
Font-size: 90% = 16.2
Font-size: 90% = 14.58px
Font-size: 90% = 13.122px
font-size: smaller;

You can use relative keywords. The value is relative to the parent.
The following are available:
 larger
 smaller
Parent container: 18px
Font-size: smaller
Font-size: smaller
Font-size: smaller
font-size: x-large;

You can use absolute keywords. The value is relative to the root element <html>.
The following are available:
 xx-small
 x-small
 small
 medium
 large
 x-large
 xx-large
<html> root element: 18px
Font-size: x-large
Font-size: x-large
Font-size: x-large
In collection: typographyPermalinkShareMDN
#font-style
Defines how much the text is slanted.
defaultfont-style: normal;

The text is not slanted.

Hello world
font-style: italic;

Use the italic version of the font: the letters are slightly slanted.
Hello world
font-style: oblique;

Use the oblique version of the font: the letters are more slanted than italic.
Hello world
In collection: typographyPermalinkShareMDN
#font-variant
Defines which glyph to use for each letter.
defaultfont-variant: normal;

Each letter uses its normal glyph.

Hello world
font-variant: small-caps;

Each letter uses its small capitalized version.

HELLO WORLD
In collection: typographyPermalinkShareMDN
#font-weight
Defines the weight of the text.
defaultfont-weight: normal;

The text is in normal weight.

Hello world
font-weight: bold;

The text becomes bold.

Hello world
font-weight: 600;

You can use numeric values. They all correspond to a particular named weight:
 100 Thin
 200 Extra Light
 300 Light
 400 Normal
 500 Medium
 600 Semi Bold
 700 Bold
 800 Extra Bold
 900 Ultra Bold
If the font family doesn't provide the requested weight, it will use the closest available one.
Hello world
font-weight: lighter;

You can use relative keywords: lighter or bolder. The browser will use the next available
weight.
Hello world
In collection: typographyPermalinkShareMDN
#font
Shorthand property for font-style font-variant font-weight font-size line-
height and font-family.
In collection: typographyPermalinkShareMDN
#letter-spacing
Defines the spacing between the characters of a block of text.
defaultletter-spacing: normal;

The spacing between the characters is normal.

The quick brown fox jumps over the lazy dog
letter-spacing: 2px;

You can use pixel values.

The quick brown fox jumps over the lazy dog
letter-spacing: 0.1em;

You can use em values: this allows the spacing to remain relative to the font-size.
The quick brown fox jumps over the lazy dog
In collections: box-model typographyPermalinkShareMDN
#line-height
Defines the height of a single line of text.
defaultline-height: normal;

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
line-height: 30px;

You can use pixel values.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus

felis hendrerit sit amet.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font
size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
In collection: typographyPermalinkShareMDN
#text-align
Defines how the text content of the element is horizontally aligned.
text-align: left;
The text content is aligned to the left.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
text-align: right;

The text content is aligned to the right.

The text content is centered.

The text content is justified.

Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
In collection: typographyPermalinkShareMDN
#text-decoration
Defines how the text content of the element is decorated.
defaulttext-decoration: none;

Removes any text decoration.

Hello world
text-decoration: underline;

Underlines the text content.

Hello world
In collection: typographyPermalinkShareMDN
#text-indent
Defines the indentation of the element's first line of text.
defaulttext-indent: 0;

The text is not indented.

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis
blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
luctus felis hendrerit sit amet.
text-indent: -2em;

You can also use negative values.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
In collection: typographyPermalinkShareCan I useMDN
#text-overflow
Defines how the hidden text content behaves if it's overflowing.
defaulttext-overflow: clip;

The text content is clipped and not accessible.

Hello world
text-overflow: ellipsis;

The overflowing content is replaced by an ellipsis: …

Hello world
In collection: typographyPermalinkShareMDN
#text-shadow
Defines the shadow of the text content.
defaulttext-shadow: none;

The text content has no shadow.

You need at least two values:

 the first is the horizontal offset
 the second is the vertical offset
The shadow color will be inherited from the text color.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
text-shadow: 2px 6px red;

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
text-shadow: 2px 4px 10px red;

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
In collection: typographyPermalinkShareMDN
#text-transform
Defines how the text content should be transformed.
defaulttext-transform: none;

Removes any text transformation: the text will appear the same as in the HTML code.
Hello world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
text-transform: capitalize;

Turns the first letter of each word into a capital letter.

Hello world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.
text-transform: uppercase;
Turns all letters into capital letters.
HELLO WORLD!
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. ETIAM SEMPER DIAM AT ERAT
PULVINAR, AT PULVINAR FELIS BLANDIT. VESTIBULUM VOLUTPAT TELLUS DIAM, CONSEQUAT
GRAVIDA LIBERO RHONCUS UT. MAECENAS IMPERDIET FELIS NISI, FRINGILLA LUCTUS FELIS
HENDRERIT SIT AMET.
text-transform: lowercase;

Turns all letters into lowercase letters.

Sequences of spaces are combined into one.

Line breaks are ignored.
The text content is wrapped.
#parent .selector ul li blockquote{ color: red; font-size: 1rem; }
white-space: nowrap;

Sequences of spaces are combined into one.

Line breaks are ignored.
The text content is not wrapped and remains on a single line.
#parent .selector ul li blockquote{ color: red; font-size: 1rem; }
white-space: pre;

The white space is exactly preserved.

 Sequences of spaces are preserved
 Lines break only on new lines and <br>
#parent .selector ul li blockquote{ color: red; font-size: 1rem; }
white-space: pre-wrap;

The white space is mostly preserved.

 Sequences of spaces are preserved
 Lines break on new lines, <br>, but also when reaching the end of the element
#parent .selector ul li blockquote{ color: red; font-size: 1rem; }
white-space: pre-line;

Only new lines are preserved.

 Sequences of spaces are combined into one
 Lines break on new lines, <br>, but also when reaching the end of the element
#parent .selector ul li blockquote{ color: red; font-size: 1rem; }
In collection: typographyPermalinkShareCan I useMDN
#word-break
Defines how words should break when reaching the end of a line.
defaultword-break: normal;

Words with no space will not break. Sequences of uninterrupted characters will be displayed
on a single line.
Thequickbrownfoxjumpsoverthelazydog
word-break: break-all;

Words with no space will break as soon as they reach the end of a line.
Thequickbrownfoxjumpsoverthelazydog
In collection: typographyPermalinkShareMDN
#word-spacing
Defines the spacing between words of a block of text.
defaultword-spacing: normal;

The spacing between the characters is normal.

The quick brown fox jumps over the lazy dog
word-spacing: 5px;

You can use pixel values.

The quick brown fox jumps over the lazy dog
word-spacing: 2em;

You can use em values: this allows the spacing to remain relative to the font-size.
The quick brown fox jumps over the lazy dog

#background-attachment
Defines how the background image will behave when scrolling the page.
defaultbackground-attachment: scroll;

The background image will scroll with the page. It will also position and resize itself
according to the element it's applied to.
Hello world
background-attachment: fixed;

The background image will not scroll with the page, and remain positioned according to the
viewport. It will also position and resize itself according to the viewport. As a result, the
background image will probably only be partially visible.
Hello world
In collection: backgroundsPermalinkShareMDN
#background-clip
Defines how far the background should extend within the element.
defaultbackground-clip: border-box;

The background extends completely throughout the element, even under the border.
Hello world
background-clip: padding-box;

The background only extends to the edge of the border: it includes the padding but not the
border.
Hello world
background-clip: content-box;

The background only extends to the edge of the content: it doesn't include the padding, nor
the border.
Hello world
In collection: backgroundsPermalinkShareMDN
#background-color
Defines the color of the element's background.
defaultbackground-color: transparent;

By default, the background color is transparent, basically meaning that there

is no background color.
Hello World
background-color: red;
You can use one of the 140+ color names.
Hello World
background-color: #05ffb0;

You can use hexadecimal color codes.

Hello World
background-color: rgb(50, 115, 220);

You can use rgb() color codes:

 the first value is for red
 the second value is for green
 the third value is for blue
Each of them can have a value between 0 and 255.
Hello World
background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

 the first 3 values are for rgb
 the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).
Hello World
background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

 the first value is for hue and can go from 0 to 359
 the second value is for saturation and go from 0% to 100%
 the third value is for luminosity and go from 0% to 100%
Hello World
background-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

 the first 3 values are for hsl
 the 4th value is for the alpha channel and defines the opacity of the color
The alpha value can go from zero 0 (transparent) to one 1 (opaque).
Hello World
In collection: backgroundsPermalinkShareMDN
#background-image
Defines an image as the background of the element.
defaultbackground-image: none;

Removes any background image.

Hello world
background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file)
or absolute (like http://cssreference.io/images/jt.png).
Hello world
background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the
bottom.
The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at
the top, ending at the bottom of the element.
Hello world
background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends.
So 0deg means the the top of the element, like 12:00 on a clock.
In this example, 45deg means 2:30, or the top right corner.
Hello world
background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at
the edges.
Hello world
background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).
Hello world
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

Hello world
background-image: radial-gradient(circle closest-side, green 0%, purple 20%,
orange 100%);

You can specify where the gradient should end:

 closest-side
 closest-corner
 farthest-side
 farthest-corner
Hello world
background-image: radial-gradient(circle closest-side at 45px 45px, green 0%,
purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.
Hello world
In collection: backgroundsPermalinkShareMDN
#background-origin
Defines the origin of the background image.
defaultbackground-origin: padding-box;

The background image starts at the edge of the border: within padding but not the border.
Hello world
background-origin: border-box;

The background image starts under the border.

Hello world
background-origin: content-box;

The background image only starts at the edge of the content: it doesn't include the padding,
nor the border.
Hello world
In collection: backgroundsPermalinkShareMDN
#background-position
Defines the position of the background image.
defaultbackground-position: 0% 0%;

The background image will be positioned at 0% on the horizontal axis and 0% on the
vertical axis, which means the top left corner of the element.
Hello world
background-position: bottom right;

You can use a combination of position keywords: center, top, bottom, left and right.
Hello world
background-position: center center;

The background image will be positioned in the center of the element.

Hello world
In collection: backgroundsPermalinkShareMDN
#background-repeat
Defines how the background image repeats itself across the element's background, starting
from the background position.
defaultbackground-repeat: repeat;

The background image will repeat itself both horizontally and vertically.
Hello world
background-repeat: repeat-x;

The background image will only repeat itself horizontally.

Hello world
background-repeat: repeat-y;

The background image will only repeat itself vertically.

Hello world
background-repeat: no-repeat;

The background image will only appear once.

Hello world
In collection: backgroundsPermalinkShareMDN
#background-size
Defines the size of the background image.
defaultbackground-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's
bigger than its container (which is 150px high) and will thus be clipped.
Hello world
background-size: 120px 80px;

You can specify a size in pixels:

 the first value is the horizontal size
 the second is the vertical size
Hello world
background-size: 100% 50%;

In collection: box-modelPermalinkShareCan I useMDN

#box-sizing
Defines how the width and height of the element are calculated: whether they include
the padding and borders or not.
defaultbox-sizing: content-box;

The width and height of the element only apply to the content of the element.
For example, this element has
 border-width: 12px
 padding: 30px
 width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.
Hello world

box-sizing: border-box;

The width and height of the element apply to all parts of the element: the content,
the padding and the borders.
For example, this element has
 border-width: 12px
 padding: 30px
 width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up
being 200px - 60px - 24px = 116px.
Hello world

In collection: box-modelPermalinkShareMDN

#height
Defines the height of the element.
defaultheight: auto;

The element will automatically adjust its height to allow its content to be displayed
correctly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
height: 100px;

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will
handle this overflowing content is defined by the overflow property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
In collections: box-model typographyPermalinkShareMDN

#line-height
Defines the height of a single line of text.
defaultline-height: normal;

Reverts to the default value of the browser.

You can use pixel values.

Removes any margin on the left.

First item

Target

Third item

margin-left: 50px;

You can use pixel values.

First item

Target

Third item

margin-left: 7em;

You can use (r)em values.

The value is relative to the font size:
 em: relative to the element's current font size
 rem: relative to <html> the root element's font size
First item

Target

Third item

margin-left: 30%;

You can use percentage values.

The percentage is based on the width of the container.
First item

Target
Third item

margin-left: auto;

The auto keyword will give the left side a share of the remaining space.
When combined with margin-right: auto, it will center the element, if a fixed width is
defined.
First item

Removes all margins.

First item

Target

Third item

margin: 30px;

The element has no limit in terms of height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
max-height: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no
effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
max-height: 100px;

If the content does not fit within the maximum height, it will overflow. How the container
will handle this overflowing content is defined by the overflow property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
In collection: box-modelPermalinkShareMDN

#max-width
Defines the maximum width the element can be.
defaultmax-width: none;

The element has no limit in terms of width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
max-width: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
max-width: 150px;

If the content does not fit within the maximum width, it will automatically change
the height of the element to accomodate for the wrapping of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
In collection: box-modelPermalinkShareMDN
#min-height
Defines the minimum height of the element.
defaultmin-height: 0;

The element has no minimum height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
min-height: 200px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be
applied.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
min-height: 5px;

If the minimum height is smaller than the element's actual height, the min height has no
effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.
In collection: box-modelPermalinkShareMDN

#min-width
Defines the minimum width of the element.
defaultmin-width: 0;

The element has no minimum width.

Hello world
min-width: 300px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be
applied.
Hello world
min-width: 5px;

If the minimum width is smaller than the element's actual width, the min width has no effect.
Hello world
In collection: box-modelPermalinkShareMDN

#padding-bottom
Defines the space inside the element, on the bottom side.
defaultpadding-bottom: 0;

The percentage is based on the width of the element.
First item

Target

Third item

In collection: box-modelPermalinkShareMDN

#padding-left
Defines the space inside the element, on the left side.
defaultpadding-left: 0;

Removes any padding on the left.

First item

Target

Third item

padding-left: 50px;

You can use pixel values.

First item

Target

Third item

padding-left: 7em;

You can use (r)em values.

The value is relative to the font size:
 em: relative to the element's current font size
 rem: relative to <html> the root element's font size
First item

Target
Third item

padding-left: 30%;

You can use percentage values.

The percentage is based on the width of the element.
First item

Target

Third item

In collection: box-modelPermalinkShareMDN

#padding-right
Defines the space inside the element, on the right side.
defaultpadding-right: 0;

Removes any padding on the right.

First item

Target

Third item

padding-right: 50px;

You can use pixel values.

First item

Target

Third item

padding-right: 7em;

You can use (r)em values.

The value is relative to the font size:
 em: relative to the element's current font size
 rem: relative to <html> the root element's font size
First item

Target

Third item

padding-right: 30%;

You can use percentage values.

The percentage is based on the width of the element.
First item

Target

Third item

In collection: box-modelPermalinkShareMDN

#padding-top
Defines the space inside the element, on the top side.
defaultpadding-top: 0;
Removes any padding on the top.
First item

Target

Third item

padding-top: 50px;

You can use pixel values.

First item

Target

Third item

padding-top: 7em;

You can use (r)em values.

The value is relative to the font size:
 em: relative to the element's current font size
 rem: relative to <html> the root element's font size
First item

Target

Third item

padding-top: 30%;

You can use percentage values.

The percentage is based on the width of the element.
First item

Target

Third item

In collection: box-modelPermalinkShareMDN

#padding
Shorthand property for padding-top padding-right padding-bottom and padding-left.
defaultpadding: 0;

Removes all paddings.

Target

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

Target

padding: 30px 60px;

When using 2 values:

padding: 30px 60px 45px;

When using 3 values:

padding: 30px 60px 45px 85px;

When using 4 values:

 the first value is for top
 the second value is for right
 the third value is for bottom
 the fourth value is for left
To remember the order, start at the top and go clockwise.
Target

In collection: box-modelPermalinkShareMDN

#width
Defines the width of the element.
defaultwidth: auto;

The element will automatically adjust its width to allow its content to be displayed correctly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.

width: 240px;

You can use numeric values like pixels, (r)em, percentages...

width: 50%;

If you use percentages, the value is relative to the container's width.

#align-content
Defines how each line is aligned within a flexbox/grid container. It only applies if flex-
wrap: wrap is present, and if there are multiple lines of flexbox/grid items.
defaultalign-content: stretch;

Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one
who is 100px high.
 The first line is 100px high
 The second line is 50px high
 The remaing space is 150px
This remaining space is distributed equally amongst the two lines:
 The first line is now 175px high
 The second line is now 125px high
1
2
3
4
5
align-content: flex-start;

Each line will only fill the space it needs. They will all move towards the start of the
flexbox/grid container's cross axis.
1
2
3
4
5
align-content: flex-end;

Each line will only fill the space it needs. They will all move towards the end of the
flexbox/grid container's cross axis.
1
2
3
4
5
align-content: center;

Each line will only fill the space it needs. They will all move towards the center of the
flexbox/grid container's cross axis.
1
2
3
4
5
align-content: space-between;

Each line will only fill the space it needs. The remaining space will appear between the lines.
1
2
3
4
5
align-content: space-around;
Each line will only fill the space it needs. The remaining space will be distributed
equally around the lines: before the first line, between the two, and after the last one.
1
2
3
4
5
In collection: flexboxPermalinkShareCan I useMDN

#align-items
Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox
container.
align-items: flex-start;

The flexbox items are aligned at the start of the cross axis.
By default, the cross axis is vertical. This means the flexbox items will be
aligned vertically at the top.
1
2
3
4
5
align-items: flex-end;

The flexbox items are aligned at the end of the cross axis.
By default, the cross axis is vertical. This means the flexbox items will be
aligned vertically at the bottom.
1
2
3
4
5
align-items: center;

The flexbox items are aligned at the center of the cross axis.
By default, the cross axis is vertical. This means the flexbox items will
be centered vertically.
1
2
3
4
5
align-items: baseline;

The flexbox items are aligned at the baseline of the cross axis.
By default, the cross axis is vertical. This means the flexbox items will align themselves in
order to have the baseline of their text align along a horizontal line.
1
2
3
4
5
align-items: stretch;

The flexbox items will stretch across the whole cross axis.
By default, the cross axis is vertical. This means the flexbox items will fill up the whole
vertical space.
1
2
3
4
5
In collection: flexboxPermalinkShareCan I useMDN

#align-self
Works like align-items, but applies only to a single flexbox item, instead of all of them.
defaultalign-self: auto;

The target will use the value of align-items.

1
Target
3
4
5
align-self: flex-start;

If the container has align-items: center and the target has align-self: flex-start, only
the target will be at the start of the cross axis.
By default, this means it will be aligned vertically at the top.
1
Target
3
4
5
align-self: flex-end;

If the container has align-items: center and the target has align-self: flex-end, only
the target will be at the end of the cross axis.
By default, this means it will be aligned vertically at the bottom.
1
Target
3
4
5
align-self: center;

If the container has align-items: flex-start and the target has align-self: center, only
the target will be at the center of the cross axis.
By default, this means it will be vertically centered.
1
Target
3
4
5
align-self: baseline;

If the container has align-items: center and the target has align-self: baseline, only
the target will be at the baseline of the cross axis.
By default, this means it will be aligned along the basline of the text.
1
Target
3
4
5
align-self: stretch;

If the container has align-items: center and the target has align-self: stretch, only the
target will stretch along the whole cross axis.
1
Target
3
4
5
In collection: flexboxPermalinkShareCan I useMDN

#flex-basis
Defines the initial size of a flexbox item.
defaultflex-basis: auto;

The element will be automatically sized based on its content, or on

any height or width value if they are defined.
Flexbox item
flex-basis: 80px;

You can define pixel or (r)em values. The element will wrap its content to avoid any
overflow.
Flexbox item
In collection: flexboxPermalinkShareCan I useMDN

#flex-direction
Defines how flexbox items are ordered within a flexbox container.
defaultflex-direction: row;

The flexbox items are ordered the same way as the text direction, along the main axis.
1. One
2. Two
3. Three
4. Four
flex-direction: row-reverse;

The flexbox items are ordered the opposite way as the text direction, along the main axis.
1. One
2. Two
3. Three
4. Four
flex-direction: column;

The flexbox items are ordered the same way as the text direction, along the cross axis.
1. One
2. Two
3. Three
4. Four
flex-direction: column-reverse;

The flexbox items are ordered the opposite way as the text direction, along the cross axis.
1. One
2. Two
3. Three
4. Four
In collection: flexboxPermalinkShareCan I useMDN

#flex-flow
Shorthand property for flex-direction and flex-wrap.
In collection: flexboxPermalinkShareCan I useMDN

#flex-grow
Defines how much a flexbox item should grow if there's space available.
defaultflex-grow: 0;

The element will not grow if there's space available. It will only use the space it needs.
Target
Item
Item
flex-grow: 1;

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox
item has a flex-grow value.
Target
Item
Item
flex-grow: 2;

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox
item siblings.
In this example, the remaining space is divided in 3:
 1 third goes to the green item
 2 thirds go to the pink item
 Nothing goes to the yellow item, who retains its initial width
Item
1
Item
2
Item
0
In collection: flexboxPermalinkShareCan I useMDN

#flex-shrink
Defines how much a flexbox item should shrink if there's not enough space available.
defaultflex-shrink: 1;

If there's not enough space available in the container's main axis, the element will shrink by
a factor of 1, and will wrap its content.
This is the flex-shrink target
Foo bar
Lorem ipsum
flex-shrink: 0;

The element will not shrink: it will retain the width it needs, and not wrap its content. Its
siblings will shrink to give space to the target element.
Because the target element will not wrap its content, there is a chance for the flexbox
container's content to overflow.
This is the flex-shrink target
Foo bar
Lorem ipsum
flex-shrink: 2;

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox
item siblings.
In this example, the green item wants to fill 100% of the width. The space it needs is taken
from its two siblings, and is divided in 4:
 3 quarters are taken from the red item
 1 quarter is taken from the yellow item
Width
100%
Shrink
3
Shrink
1
In collection: flexboxPermalinkShareCan I useMDN

#flex-wrap
Defines if flexbox items appear on a single line or on multiple lines within a flexbox
container.
defaultflex-wrap: nowrap;

The flexbox items will remain on a single line, no matter what, and will eventually overflow
if needed.
1. One
2. Two
3. Three
4. Four
5. Five
6. Six
flex-wrap: wrap;

The flexbox items will be distributed among multiple lines if needed.

1. One
2. Two
3. Three
4. Four
5. Five
6. Six
flex-wrap: wrap-reverse;

The flexbox items will be distributed among multiple lines if needed. Any additional line
will appear before the previous one.
1. One
2. Two
3. Three
4. Four
5. Five
6. Six
In collection: flexboxPermalinkShareCan I useMDN

#justify-content
Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid
container.
defaultjustify-content: flex-start;

The flexbox/grid items are pushed towards the start of the container's main axis.
1. One
2. Two
3. Three
justify-content: flex-end;

The flexbox/grid items are pushed towards the end of the container's main axis.
1. One
2. Two
3. Three
justify-content: center;

The flexbox/grid items are centered along the container's main axis.
1. One
2. Two
3. Three
justify-content: space-between;

The remaining space is distributed between the flexbox/grid items.

1. One
2. Two
3. Three
justify-content: space-around;

The remaining space is distributed around the flexbox/grid items: this adds space before the
first item and after the last one.
1. One
2. Two
3. Three
In collection: flexboxPermalinkShareCan I useMDN

#order
Defines the order of a flexbox item.
defaultorder: 0;

The order of the flexbox items is the one defined in the HTML code.
One
order: 0
Two
order: 0
Target
order: 0
Four
order: 0
order: 1;

The order is relative to the flexbox item's siblings. The final order is defined when all
individual flexbox item order values are taken into account.
One
order: 0
Two
order: 0
Target
order: 1
Four
order: 0
order: -1;

You can use negative values.

One
order: 0
Two
order: 0
Target
order: -1
Four
order: 0
order: 9;

You can set a different value for each flexbox item.

One
order: 13

Difference Between Serif and Sans-Serif Fonts: Previous Next Chapter
No ratings yet
Difference Between Serif and Sans-Serif Fonts: Previous Next Chapter
3 pages
CSS Font Basics for Web Designers
No ratings yet
CSS Font Basics for Web Designers
9 pages
Formatting Text
No ratings yet
Formatting Text
45 pages
CSS Font Properties Guide
No ratings yet
CSS Font Properties Guide
4 pages
CSS Font Styling Guide
100% (1)
CSS Font Styling Guide
13 pages
Css
No ratings yet
Css
104 pages
CSS Font Styling Guide
No ratings yet
CSS Font Styling Guide
8 pages
Css Font
No ratings yet
Css Font
12 pages
CSS 2
No ratings yet
CSS 2
4 pages
WT L8.cssfont&text
No ratings yet
WT L8.cssfont&text
14 pages
HTML Css Notes
No ratings yet
HTML Css Notes
21 pages
10.CSS Fonts
No ratings yet
10.CSS Fonts
7 pages
Sandhyavandhnam
No ratings yet
Sandhyavandhnam
30 pages
Css Text Styling
No ratings yet
Css Text Styling
20 pages
Lesson 8 Using Font and Text in Web Design
No ratings yet
Lesson 8 Using Font and Text in Web Design
20 pages
CSS Fonts - GeeksforGeeks
No ratings yet
CSS Fonts - GeeksforGeeks
6 pages
CSS Font Properties Guide
No ratings yet
CSS Font Properties Guide
20 pages
Unit - II CSS
No ratings yet
Unit - II CSS
33 pages
Font
No ratings yet
Font
3 pages
10.part 1 Styling Text
No ratings yet
10.part 1 Styling Text
2 pages
Css Quick Reference Manual
No ratings yet
Css Quick Reference Manual
2 pages
CSS Typography Essentials
No ratings yet
CSS Typography Essentials
320 pages
CSS Outline, CSS Texts, CSS Fonts
No ratings yet
CSS Outline, CSS Texts, CSS Fonts
26 pages
CSS Syntax: For Example, The Headline Color Can Be Defined As
No ratings yet
CSS Syntax: For Example, The Headline Color Can Be Defined As
87 pages
8.CSS Font
No ratings yet
8.CSS Font
5 pages
CSS Beginner's Guide
No ratings yet
CSS Beginner's Guide
10 pages
CSS For Styling
No ratings yet
CSS For Styling
29 pages
Css Typography Background Information For Learners: Learning Activity Sheet
No ratings yet
Css Typography Background Information For Learners: Learning Activity Sheet
6 pages
Lec 7 CSS2
No ratings yet
Lec 7 CSS2
26 pages
CSS For Class 10
No ratings yet
CSS For Class 10
8 pages
IG-CSS Notes
No ratings yet
IG-CSS Notes
24 pages
Chapter 2 Creating and Editing A Webpage Using Inline Styles
No ratings yet
Chapter 2 Creating and Editing A Webpage Using Inline Styles
29 pages
Introduction To Internet Programming (CN381) CSS Tutorial
No ratings yet
Introduction To Internet Programming (CN381) CSS Tutorial
23 pages
9 CSS Font
No ratings yet
9 CSS Font
30 pages
Css
No ratings yet
Css
4 pages
Comp 10 CSS
No ratings yet
Comp 10 CSS
40 pages
Web Engineering: Font, Text & Background
No ratings yet
Web Engineering: Font, Text & Background
38 pages
What Is CSS? CSS Stands For Cascading Style Sheets: Color
No ratings yet
What Is CSS? CSS Stands For Cascading Style Sheets: Color
84 pages
Text Decoration
No ratings yet
Text Decoration
13 pages
Lec 5
No ratings yet
Lec 5
68 pages
Day 4
No ratings yet
Day 4
68 pages
Css Properties
No ratings yet
Css Properties
53 pages
CSS
No ratings yet
CSS
218 pages
Grade 8 Computer
No ratings yet
Grade 8 Computer
9 pages
CSS Font Basics for Web Designers
No ratings yet
CSS Font Basics for Web Designers
4 pages
What You Should Already Know: CSS Introduction
No ratings yet
What You Should Already Know: CSS Introduction
20 pages
03 Css
No ratings yet
03 Css
20 pages
Fedw Unit-1 CSS
No ratings yet
Fedw Unit-1 CSS
34 pages
CSS (Cascading Style Sheets) Is A Formatting Language
No ratings yet
CSS (Cascading Style Sheets) Is A Formatting Language
7 pages
CSS1 Properties: Syntax Used in Property Definitions
No ratings yet
CSS1 Properties: Syntax Used in Property Definitions
27 pages
UECS2094 2194 - Topic 3 - CSS - Jan 2025
No ratings yet
UECS2094 2194 - Topic 3 - CSS - Jan 2025
83 pages
2.3-css
No ratings yet
2.3-css
43 pages
Webdev L-14
No ratings yet
Webdev L-14
8 pages
CSS For Beginners
No ratings yet
CSS For Beginners
5 pages
Colors and Fonts in CSS
No ratings yet
Colors and Fonts in CSS
16 pages
Web Programming: BIM Third Semester
No ratings yet
Web Programming: BIM Third Semester
55 pages
CSS Fonts: HTML Styling Guide
No ratings yet
CSS Fonts: HTML Styling Guide
9 pages
Redirect Form
No ratings yet
Redirect Form
3 pages
Introduction To Google Search Algorithm
No ratings yet
Introduction To Google Search Algorithm
9 pages
Invoice: Mr. Sanatan Mody
No ratings yet
Invoice: Mr. Sanatan Mody
1 page
Google Seach Consolw Vs Analytics
No ratings yet
Google Seach Consolw Vs Analytics
2 pages
DM Notes
No ratings yet
DM Notes
14 pages
Google Ads Notes
No ratings yet
Google Ads Notes
16 pages
A Textile Designer Creates Patterns Keeping in Mind Current Trends
No ratings yet
A Textile Designer Creates Patterns Keeping in Mind Current Trends
21 pages
Django Tutorial in Visual Studio Code
No ratings yet
Django Tutorial in Visual Studio Code
37 pages
Django With Python
No ratings yet
Django With Python
38 pages
TSB
No ratings yet
TSB
4 pages
Graphic Design Notes
No ratings yet
Graphic Design Notes
13 pages
Printing Technology
No ratings yet
Printing Technology
10 pages
Typographic Posters
100% (4)
Typographic Posters
38 pages
Pen & Ink Drawing Workbook
50% (2)
Pen & Ink Drawing Workbook
28 pages
Muyex Academy Graphic Design Course Outline 2
No ratings yet
Muyex Academy Graphic Design Course Outline 2
5 pages
Listado de Filamentos Vendidos Por Sunlu
No ratings yet
Listado de Filamentos Vendidos Por Sunlu
2 pages
Chatpata
No ratings yet
Chatpata
1 page
Design Software Keyboard Shortcuts
No ratings yet
Design Software Keyboard Shortcuts
4 pages
Designers: Shape Society Responsibly
No ratings yet
Designers: Shape Society Responsibly
6 pages
Department of Architecture: Syllabus-2008-09
No ratings yet
Department of Architecture: Syllabus-2008-09
10 pages
Colores PDF
100% (1)
Colores PDF
10 pages
Handy Book of Artistic Printing - A Collection of Letteinter's Devils, and Other Freaks of Fancy - Doug Clouse
100% (11)
Handy Book of Artistic Printing - A Collection of Letteinter's Devils, and Other Freaks of Fancy - Doug Clouse
233 pages
A Sample Article Using Ieeetran - Cls For Ieee Journals and Transactions
No ratings yet
A Sample Article Using Ieeetran - Cls For Ieee Journals and Transactions
6 pages
Lesson 3 - Word Processing
No ratings yet
Lesson 3 - Word Processing
17 pages
Logo and Brand Identity Guidelines Template PDF
No ratings yet
Logo and Brand Identity Guidelines Template PDF
8 pages
Stone Art Catalog
No ratings yet
Stone Art Catalog
30 pages
Art Design
No ratings yet
Art Design
16 pages
Appendix CDE Handbook 9.29.14 PDF
No ratings yet
Appendix CDE Handbook 9.29.14 PDF
219 pages
Graphics Output Primitives Guide
100% (1)
Graphics Output Primitives Guide
24 pages
Elements and Principles of Art
No ratings yet
Elements and Principles of Art
32 pages
Color Harmony and Design in Interior Decoration - MattleyBelleKate1915
No ratings yet
Color Harmony and Design in Interior Decoration - MattleyBelleKate1915
26 pages
00 RESC Requirements - Aglao Solar
No ratings yet
00 RESC Requirements - Aglao Solar
2 pages
Natural Color System (NCS)
100% (2)
Natural Color System (NCS)
40 pages
Riso A2 Duplicator
No ratings yet
Riso A2 Duplicator
4 pages
Common Punctuation Errors
No ratings yet
Common Punctuation Errors
27 pages
Ottimo - Artwork Guidelines
No ratings yet
Ottimo - Artwork Guidelines
1 page
DIP Unit 1 MCQ
No ratings yet
DIP Unit 1 MCQ
4 pages
Kevin Lake: Communications Specialist Resume
No ratings yet
Kevin Lake: Communications Specialist Resume
3 pages
Youtube Thumbnail Tips
No ratings yet
Youtube Thumbnail Tips
6 pages