}

The letter-spacing property is used to specify the space between the characters in a text.

! letter-spacing also supports negative values:

p {
letter-spacing: -1px;
}

Resources: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Section 15.10: Text Indent

p {
text-indent: 50px;
}

The text-indent property specifies how much horizontal space text should be moved before the beginning of the
first line of the text content of an element.

Resources:

Indenting only the first line of text in a paragraph?

https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Section 15.11: Text Decoration

The text-decoration property is used to set or remove decorations from text.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand

property:

.title { text-decoration: underline dotted blue; }

This is a shorthand version of

.title {
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-color: blue;
}

It should be noted that the following properties are only supported in Firefox

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-skip

GoalKicker.com – CSS Notes for Professionals 93

Section 15.12: Word Spacing
The word-spacing property specifies the spacing behavior between tags and words.

Possible values

a positive or negative length (using em px vh cm etc.) or percentage (using %)

the keyword normal uses the font's default word spacing
the keyword inherit takes the value from the parent element

CSS

.normal { word-spacing: normal; }

.narrow { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
<span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
<span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
<span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Online-Demo

Try it yourself

Further reading:

word-spacing – MDN
word-spacing – w3.org

Section 15.13: Font Variant

Attributes:

normal

Default attribute of fonts.

small-caps

Sets every letter to uppercase, but makes the lowercase letters(from original text) smaller in size than the letters
that originally uppercase.

CSS:

.smallcaps{
font-variant: small-caps;
}

HTML:

<p class="smallcaps">
Documentation about CSS Fonts

GoalKicker.com – CSS Notes for Professionals 94

 <br>
aNd ExAmpLe
</p>

Output:

Note: The font-variant property is a shorthand for the properties: font-variant-caps, font-variant-numeric, font-
variant-alternates, font-variant-ligatures, and font-variant-east-asian.

GoalKicker.com – CSS Notes for Professionals 95

Chapter 16: Flexible Box Layout (Flexbox)
The Flexible Box module, or just 'flexbox' for short, is a box model designed for user interfaces, and it allows users
to align and distribute space among items in a container such that elements behave predictably when the page
layout must accommodate different, unknown screen sizes. A flex container expands items to fill available space
and shrinks them to prevent overflow.

Section 16.1: Dynamic Vertical and Horizontal Centering (align-

items, justify-content)
Simple Example (centering a single element)
HTML
<div class="aligner">
<div class="aligner-item">…</div>
</div>

CSS
.aligner {
display: flex;
align-items: center;
justify-content: center;
}

.aligner-item {
max-width: 50%; /*for demo. Use actual width instead.*/
}

Here is a demo.

Reasoning
Property Value Description
This centers the elements along the axis other than the one specified by flex-direction,
align-items center i.e., vertical centering for a horizontal flexbox and horizontal centering for a vertical
flexbox.
This centers the elements along the axis specified by flex-direction. I.e., for a
justify-content center horizontal (flex-direction: row) flexbox, this centers horizontally, and for a vertical
flexbox (flex-direction: column) flexbox, this centers vertically)

Individual Property Examples

All of the below styles are applied onto this simple layout:

<div id="container">
<div></div>
<div></div>
<div></div>
</div>

where #container is the flex-box.

Example: justify-content: center on a horizontal flexbox

CSS:

GoalKicker.com – CSS Notes for Professionals 96

div#container {
display: flex;
flex-direction: row;
justify-content: center;
}

Outcome:

Here is a demo.

Example: justify-content: center on a vertical flexbox

CSS:

div#container {
display: flex;
flex-direction: column;
justify-content: center;
}

Outcome:

GoalKicker.com – CSS Notes for Professionals 97

Here is a demo.

Example: align-content: center on a horizontal flexbox

CSS:

div#container {
display: flex;
flex-direction: row;
align-items: center;
}

Outcome:

GoalKicker.com – CSS Notes for Professionals 98

Here is a demo.

Example: align-content: center on a vertical flexbox

CSS:

div#container {
display: flex;
flex-direction: column;
align-items: center;
}

Outcome:

GoalKicker.com – CSS Notes for Professionals 99

Here is a demo.

Example: Combination for centering both on horizontal flexbox

div#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Outcome:

GoalKicker.com – CSS Notes for Professionals 100

Here is a demo.

Example: Combination for centering both on vertical flexbox

div#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

Outcome:

GoalKicker.com – CSS Notes for Professionals 101

Here is a demo.

Section 16.2: Sticky Variable-Height Footer

This code creates a sticky footer. When the content doesn't reach the end of the viewport, the footer sticks to the
bottom of the viewport. When the content extends past the bottom of the viewport, the footer is also pushed out of
the viewport. View Result

HTML:

<div class="header">
<h2>Header</h2>
</div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia
arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">

GoalKicker.com – CSS Notes for Professionals 102

 <h4>Footer</h4>
</div>

CSS:

html, body {
height: 100%;
}

body {
display: flex;
flex-direction: column;
}

.content {
/* Include `0 auto` for best browser compatibility. */
flex: 1 0 auto;
}

.header, .footer {
background-color: grey;
color: white;
flex: none;
}

Section 16.3: Optimally fit elements to their container

One of the nicest features of flexbox is to allow optimally fitting containers to their parent element.

Live demo.

HTML:

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>

CSS:

.flex-container {
background-color: #000;
height: 100%;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}

.flex-item {
background-color: #ccf;
margin: 0.1em;
flex-grow: 1;
flex-shrink: 0;

GoalKicker.com – CSS Notes for Professionals 103

 flex-basis: 200px; /* or % could be used to ensure a specific layout */
}

Outcome:

Columns adapt as screen is resized.

Section 16.4: Holy Grail Layout using Flexbox

Holy Grail layout is a layout with a fixed height header and footer, and a center with 3 columns. The 3 columns
include a fixed width sidenav, a fluid center, and a column for other content like ads (the fluid center appears first in
the markup). CSS Flexbox can be used to achieve this with a very simple markup:

HTML Markup:

<div class="container">
<header class="header">Header</header>
<div class="content-body">
<main class="content">Content</main>
<nav class="sidenav">Nav</nav>
<aside class="ads">Ads</aside>
</div>
<footer class="footer">Footer</footer>
</div>

CSS:

body {
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
height: 100vh;
}

.header {
flex: 0 0 50px;

GoalKicker.com – CSS Notes for Professionals 104

}

.content-body {
flex: 1 1 auto;

display: flex;
flex-direction: row;
}

.content-body .content {
flex: 1 1 auto;
overflow: auto;
}

.content-body .sidenav {
order: -1;
flex: 0 0 100px;
overflow: auto;
}

.content-body .ads {
flex: 0 0 100px;
overflow: auto;
}

.footer {
flex: 0 0 50px;
}

Demo

Section 16.5: Perfectly aligned buttons inside cards with

flexbox
It's a regular pattern in design these days to vertically align call to actions inside its containing cards like this:

This can be achieved using a special trick with flexbox

HTML

GoalKicker.com – CSS Notes for Professionals 105

<div class="cards">
<div class="card">
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p><button>Action</button></p>
</div>
<div class="card">
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p><button>Action</button></p>
</div>
</div>

First of all, we use CSS to apply display: flex; to the container. This will create 2 columns equal in height with the
content flowing naturally inside it

CSS

.cards {
display: flex;
}
.card {
border: 1px solid #ccc;
margin: 10px 10px;
padding: 0 20px;
}
button {
height: 40px;
background: #fff;
padding: 0 40px;
border: 1px solid #000;
}
p:last-child {
text-align: center;
}

The layout will change and become like this:

GoalKicker.com – CSS Notes for Professionals 106

In order to move the buttons to the bottom of the block, we need to apply display: flex; to the card itself with
the direction set to column. After that, we should select the last element inside the card and set the margin-top to
auto. This will push the last paragraph to the bottom of the card and achieve the required result.

Final CSS:

.cards {
display: flex;
}
.card {
border: 1px solid #ccc;
margin: 10px 10px;
padding: 0 20px;
display: flex;
flex-direction: column;
}
button {
height: 40px;
background: #fff;
padding: 0 40px;
border: 1px solid #000;
}
p:last-child {
text-align: center;
margin-top: auto;
}

Section 16.6: Same height on nested containers

This code makes sure that all nested containers are always the same height. This is done by assuring that all nested
elements are the same height as the containing parent div. See working example: https://jsfiddle.net/3wwh7ewp/

This effect is achieved due to the property align-items being set to stretch by default.

HTML

<div class="container">
<div style="background-color: red">
Some <br />
data <br />
to make<br />

GoalKicker.com – CSS Notes for Professionals 107

 a height <br />
</div>
<div style="background-color: blue">
Fewer <br />
lines <br />
</div>
</div>

CSS

.container {
display: flex;
align-items: stretch; // Default value
}

Note: Does not work on IE versions under 10

GoalKicker.com – CSS Notes for Professionals 108

Chapter 17: Cascading and Specificity
Section 17.1: Calculating Selector Specificity
Each individual CSS Selector has its own specificity value. Every selector in a sequence increases the sequence's
overall specificity. Selectors fall into one of three different specificity groups: A, B and c. When multiple selector
sequences select a given element, the browser uses the styles applied by the sequence with the highest overall
specificity.

Group Comprised of Examples

A id selectors #foo
class selectors .bar
B attribute selectors [title], [colspan="2"]
pseudo-classes :hover, :nth-child(2)
type selectors div, li
c
pseudo-elements ::before, ::first-letter

Group A is the most specific, followed by Group B, then finally Group c.

The universal selector (*) and combinators (like > and ~) have no specificity.

Example 1: Specificity of various selector sequences

#foo #baz {} /* a=2, b=0, c=0 */

#foo.bar {} /* a=1, b=1, c=0 */

#foo {} /* a=1, b=0, c=0 */

.bar:hover {} /* a=0, b=2, c=0 */

div.bar {} /* a=0, b=1, c=1 */

:hover {} /* a=0, b=1, c=0 */

[title] {} /* a=0, b=1, c=0 */

.bar {} /* a=0, b=1, c=0 */

div ul + li {} /* a=0, b=0, c=3 */

p::after {} /* a=0, b=0, c=2 */

*::before {} /* a=0, b=0, c=1 */

::before {} /* a=0, b=0, c=1 */

div {} /* a=0, b=0, c=1 */

* {} /* a=0, b=0, c=0 */

Example 2: How specificity is used by the browser

Imagine the following CSS implementation:

#foo {
color: blue;
}

GoalKicker.com – CSS Notes for Professionals 109

.bar {
color: red;
background: black;
}

Here we have an ID selector which declares color as blue, and a class selector which declares color as red and
background as black.

An element with an ID of #foo and a class of .bar will be selected by both declarations. ID selectors have a Group A
specificity and class selectors have a Group B specificity. An ID selector outweighs any number of class selectors.
Because of this, color:blue; from the #foo selector and the background:black; from the .bar selector will be
applied to the element. The higher specificity of the ID selector will cause the browser to ignore the .bar selector's
color declaration.

Now imagine a different CSS implementation:

.bar {
color: red;
background: black;
}

.baz {
background: white;
}

Here we have two class selectors; one of which declares color as red and background as black, and the other
declares background as white.

An element with both the .bar and .baz classes will be affected by both of these declarations, however the
problem we have now is that both .bar and .baz have an identical Group B specificity. The cascading nature of CSS
resolves this for us: as .baz is defined after .bar, our element ends up with the red color from .bar but the white
background from .baz.

Example 3: How to manipulate specificity

The last snippet from Example 2 above can be manipulated to ensure our .bar class selector's color declaration is
used instead of that of the .baz class selector.

.bar {} /* a=0, b=1, c=0 */

.baz {} /* a=0, b=1, c=0 */

The most common way to achieve this would be to find out what other selectors can be applied to the .bar selector
sequence. For example, if the .bar class was only ever applied to span elements, we could modify the .bar selector
to span.bar. This would give it a new Group C specificity, which would override the .baz selector's lack thereof:

span.bar {} /* a=0, b=1, c=1 */

.baz {} /* a=0, b=1, c=0 */

However it may not always possible to find another common selector which is shared between any element which
uses the .bar class. Because of this, CSS allows us to duplicate selectors to increase specificity. Instead of just .bar,
we can use .bar.bar instead (See The grammar of Selectors, W3C Recommendation). This still selects any element
with a class of .bar, but now has double the Group B specificity:

.bar.bar {} /* a=0, b=2, c=0 */

.baz {} /* a=0, b=1, c=0 */

GoalKicker.com – CSS Notes for Professionals 110

!important and inline style declarations

The !important flag on a style declaration and styles declared by the HTML style attribute are considered to have
a greater specificity than any selector. If these exist, the style declaration they affect will overrule other declarations
regardless of their specificity. That is, unless you have more than one declaration that contains an !important flag
for the same property that apply to the same element. Then, normal specificity rules will apply to those properties
in reference to each other.

Because they completely override specificity, the use of !important is frowned upon in most use cases. One should
use it as little as possible. To keep CSS code efficient and maintainable in the long run, it's almost always better to
increase the specificity of the surrounding selector than to use !important.

One of those rare exceptions where !important is not frowned upon, is when implementing generic helper classes
like a .hidden or .background-yellow class that are supposed to always override one or more properties wherever
they are encountered. And even then, you need to know what you're doing. The last thing you want, when writing
maintainable CSS, is to have !important flags throughout your CSS.

A final note

A common misconception about CSS specificity is that the Group A, B and c values should be combined with each
other (a=1, b=5, c=1 => 151). This is not the case. If this were the case, having 20 of a Group B or c selector would
be enough to override a single Group A or B selector respectively. The three groups should be regarded as
individual levels of specificity. Specificity cannot be represented by a single value.

When creating your CSS style sheet, you should maintain the lowest specificity as possible. If you need to make the
specificity a little higher to overwrite another method, make it higher but as low as possible to make it higher. You
shouldn't need to have a selector like this:

body.page header.container nav div#main-nav li a {}

This makes future changes harder and pollutes that css page.

You can calculate the specificity of your selector here

Section 17.2: The !important declaration

The !important declaration is used to override the usual specificity in a style sheet by giving a higher priority to a
rule. Its usage is: property : value !important;

#mydiv {
font-weight: bold !important; /* This property won't be overridden
by the rule below */
}

#outerdiv #mydiv {
font-weight: normal; /* #mydiv font-weight won't be set to normal
even if it has a higher specificity because
of the !important declaration above */
}

Avoiding the usage of !important is strongly recommended (unless absolutely necessary), because it will disturb
the natural flow of css rules which can bring uncertainty in your style sheet. Also it is important to note that when
multiple !important declarations are applied to the same rule on a certain element, the one with the higher
specificity will be the ona applied.

GoalKicker.com – CSS Notes for Professionals 111

Here are some examples where using !important declaration can be justified:

If your rules shouldn't be overridden by any inline style of the element which is written inside style attribute
of the html element.
To give the user more control over the web accessibility, like increasing or decreasing size of the font-size, by
overriding the author style using !important.
For testing and debugging using inspect element.

See also:

W3C - 6 Assigning property values, Cascading, and Inheritance -- 6.4.2 !important rules

Section 17.3: Cascading

Cascading and specificity are used together to determine the final value of a CSS styling property. They also define
the mechanisms for resolving conflicts in CSS rule sets.

CSS Loading order

Styles are read from the following sources, in this order:

1. User Agent stylesheet (The styles supplied by the browser vendor)

2. User stylesheet (The additional styling a user has set on his/her browser)
3. Author stylesheet (Author here means the creator of the webpage/website)
Maybe one or more .css files
In the <style> element of the HTML document
4. Inline styles (In the style attribute on an HTML element)

The browser will lookup the corresponding style(s) when rendering an element.

How are conflicts resolved?

When only one CSS rule set is trying to set a style for an element, then there is no conflict, and that rule set is used.

When multiple rule sets are found with conflicting settings, first the Specificty rules, and then the Cascading rules
are used to determine what style to use.

Example 1 - Specificity rules

.mystyle { color: blue; } /* specificity: 0, 0, 1, 0 */
div { color: red; } /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

What color will the text be? (hover to see the answer)

blue

First the specificity rules are applied, and the one with the highest specificity "wins".

Example 2 - Cascade rules with identical selectors

External css file

.class {

GoalKicker.com – CSS Notes for Professionals 112

 background: #FFF;
}

Internal css (in HTML file)

<style>
.class {
background: #000;
}
<style>

In this case, where you have identical selectors, the cascade kicks in, and determines that the last one loaded
"wins".

Example 3 - Cascade rules after Specificity rules

body > .mystyle { background-color: blue; } /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; } /* specificity: 0, 0, 1, 1 */

<body class="otherstyle">
<div class="mystyle">Hello World</div>
</body>

What color will the background be?

red

After applying the specificity rules, there's still a conflict between blue and red, so the cascading rules are applied
on top of the specificity rules. Cascading looks at the load order of the rules, whether inside the same .css file or in
the collection of style sources. The last one loaded overrides any earlier ones. In this case, the .otherstyle > div
rule "wins".

A final note

Selector specificity always take precedence.

Stylesheet order break ties.
Inline styles trump everything.

Section 17.4: More complex specificity example

div {
font-size: 7px;
border: 3px dotted pink;
background-color: yellow;
color: purple;
}

body.mystyle > div.myotherstyle {

font-size: 11px;
background-color: green;
}

#elmnt1 {
font-size: 24px;
border-color: red;
}

GoalKicker.com – CSS Notes for Professionals 113

.mystyle .myotherstyle {
font-size: 16px;
background-color: black;
color: red;
}

<body class="mystyle">
<div id="elmnt1" class="myotherstyle">
Hello, world!
</div>
</body>

What borders, colors, and font-sizes will the text be?

font-size:

font-size: 24;, since #elmnt1 rule set has the highest specificity for the <div> in question, every
property here is set.

border:

border: 3px dotted red;. The border-color red is taken from #elmnt1 rule set, since it has the highest
specificity. The other properties of the border, border-thickness, and border-style are from the div rule
set.

background-color:

background-color: green;. The background-color is set in the div, body.mystyle > div.myotherstyle,
and .mystyle .myotherstyle rule sets. The specificities are (0, 0, 1) vs. (0, 2, 2) vs. (0, 2, 0), so the middle
one "wins".

color:

color: red;. The color is set in both the div and .mystyle .myotherstyle rule sets. The latter has the
higher specificity of (0, 2, 0) and "wins".

GoalKicker.com – CSS Notes for Professionals 114

Chapter 18: Colors
Section 18.1: currentColor
currentColor returns the computed color value of the current element.

Use in same element

Here currentColor evaluates to red since the color property is set to red:

div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px currentColor;
}

In this case, specifying currentColor for the border is most likely redundant because omitting it should produce
identical results. Only use currentColor inside the border property within the same element if it would be
overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second rule overriding
the first:

div {
color: blue;
border: 3px solid currentColor;
color: green;
}

Inherited from parent element

The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's border-color blue.

.parent-class {
color: blue;
}

.parent-class .child-class {
border-color: currentColor;
}

currentColor can also be used by other rules which normally would not inherit from the color property, such as
background-color. The example below shows the children using the color set in the parent as its background:

.parent-class {
color: blue;
}

.parent-class .child-class {
background-color: currentColor;
}

Possible Result:

GoalKicker.com – CSS Notes for Professionals 115

Section 18.2: Color Keywords
Most browsers support using color keywords to specify a color. For example, to set the color of an element to blue,
use the blue keyword:

.some-class {
color: blue;
}

CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF.

Color Keywords
Color name Hex value RGB values Color
AliceBlue #F0F8FF rgb(240,248,255)

AntiqueWhite #FAEBD7 rgb(250,235,215)

Aqua #00FFFF rgb(0,255,255)

Aquamarine #7FFFD4 rgb(127,255,212)

Azure #F0FFFF rgb(240,255,255)

Beige #F5F5DC rgb(245,245,220)

Bisque #FFE4C4 rgb(255,228,196)

Black #000000 rgb(0,0,0)

BlanchedAlmond #FFEBCD rgb(255,235,205)

Blue #0000FF rgb(0,0,255)

BlueViolet #8A2BE2 rgb(138,43,226)

Brown #A52A2A rgb(165,42,42)

GoalKicker.com – CSS Notes for Professionals 116

BurlyWood #DEB887 rgb(222,184,135)

CadetBlue #5F9EA0 rgb(95,158,160)

Chartreuse #7FFF00 rgb(127,255,0)

Chocolate #D2691E rgb(210,105,30)

Coral #FF7F50 rgb(255,127,80)

CornflowerBlue #6495ED rgb(100,149,237)

Cornsilk #FFF8DC rgb(255,248,220)

Crimson #DC143C rgb(220,20,60)

Cyan #00FFFF rgb(0,255,255)

DarkBlue #00008B rgb(0,0,139)

DarkCyan #008B8B rgb(0,139,139)

DarkGoldenRod #B8860B rgb(184,134,11)

DarkGray #A9A9A9 rgb(169,169,169)

DarkGrey #A9A9A9 rgb(169,169,169)

DarkGreen #006400 rgb(0,100,0)

DarkKhaki #BDB76B rgb(189,183,107)

DarkMagenta #8B008B rgb(139,0,139)

DarkOliveGreen #556B2F rgb(85,107,47)

DarkOrange #FF8C00 rgb(255,140,0)

DarkOrchid #9932CC rgb(153,50,204)

DarkRed #8B0000 rgb(139,0,0)

DarkSalmon #E9967A rgb(233,150,122)

DarkSeaGreen #8FBC8F rgb(143,188,143)

DarkSlateBlue #483D8B rgb(72,61,139)

DarkSlateGray #2F4F4F rgb(47,79,79)

DarkSlateGrey #2F4F4F rgb(47,79,79)

DarkTurquoise #00CED1 rgb(0,206,209)

DarkViolet #9400D3 rgb(148,0,211)

GoalKicker.com – CSS Notes for Professionals 117

DeepPink #FF1493 rgb(255,20,147)

DeepSkyBlue #00BFFF rgb(0,191,255)

DimGray #696969 rgb(105,105,105)

DimGrey #696969 rgb(105,105,105)

DodgerBlue #1E90FF rgb(30,144,255)

FireBrick #B22222 rgb(178,34,34)

FloralWhite #FFFAF0 rgb(255,250,240)

ForestGreen #228B22 rgb(34,139,34)

Fuchsia #FF00FF rgb(255,0,255)

Gainsboro #DCDCDC rgb(220,220,220)

GhostWhite #F8F8FF rgb(248,248,255)

Gold #FFD700 rgb(255,215,0)

GoldenRod #DAA520 rgb(218,165,32)

Gray #808080 rgb(128,128,128)

Grey #808080 rgb(128,128,128)

Green #008000 rgb(0,128,0)

GreenYellow #ADFF2F rgb(173,255,47)

HoneyDew #F0FFF0 rgb(240,255,240)

HotPink #FF69B4 rgb(255,105,180)

IndianRed #CD5C5C rgb(205,92,92)

Indigo #4B0082 rgb(75,0,130)

Ivory #FFFFF0 rgb(255,255,240)

Khaki #F0E68C rgb(240,230,140)

Lavender #E6E6FA rgb(230,230,250)

LavenderBlush #FFF0F5 rgb(255,240,245)

LawnGreen #7CFC00 rgb(124,252,0)

LemonChiffon #FFFACD rgb(255,250,205)

LightBlue #ADD8E6 rgb(173,216,230)

GoalKicker.com – CSS Notes for Professionals 118

LightCoral #F08080 rgb(240,128,128)

LightCyan #E0FFFF rgb(224,255,255)

LightGoldenRodYellow #FAFAD2 rgb(250,250,210)

LightGray #D3D3D3 rgb(211,211,211)

LightGrey #D3D3D3 rgb(211,211,211)

LightGreen #90EE90 rgb(144,238,144)

LightPink #FFB6C1 rgb(255,182,193)

LightSalmon #FFA07A rgb(255,160,122)

LightSeaGreen #20B2AA rgb(32,178,170)

LightSkyBlue #87CEFA rgb(135,206,250)

LightSlateGray #778899 rgb(119,136,153)

LightSlateGrey #778899 rgb(119,136,153)

LightSteelBlue #B0C4DE rgb(176,196,222)

LightYellow #FFFFE0 rgb(255,255,224)

Lime #00FF00 rgb(0,255,0)

LimeGreen #32CD32 rgb(50,205,50)

Linen #FAF0E6 rgb(250,240,230)

Magenta #FF00FF rgb(255,0,255)

Maroon #800000 rgb(128,0,0)

MediumAquaMarine #66CDAA rgb(102,205,170)

MediumBlue #0000CD rgb(0,0,205)

MediumOrchid #BA55D3 rgb(186,85,211)

MediumPurple #9370DB rgb(147,112,219)

MediumSeaGreen #3CB371 rgb(60,179,113)

MediumSlateBlue #7B68EE rgb(123,104,238)

MediumSpringGreen #00FA9A rgb(0,250,154)

MediumTurquoise #48D1CC rgb(72,209,204)

MediumVioletRed #C71585 rgb(199,21,133)

GoalKicker.com – CSS Notes for Professionals 119

MidnightBlue #191970 rgb(25,25,112)

MintCream #F5FFFA rgb(245,255,250)

MistyRose #FFE4E1 rgb(255,228,225)

Moccasin #FFE4B5 rgb(255,228,181)

NavajoWhite #FFDEAD rgb(255,222,173)

Navy #000080 rgb(0,0,128)

OldLace #FDF5E6 rgb(253,245,230)

Olive #808000 rgb(128,128,0)

OliveDrab #6B8E23 rgb(107,142,35)

Orange #FFA500 rgb(255,165,0)

OrangeRed #FF4500 rgb(255,69,0)

Orchid #DA70D6 rgb(218,112,214)

PaleGoldenRod #EEE8AA rgb(238,232,170)

PaleGreen #98FB98 rgb(152,251,152)

PaleTurquoise #AFEEEE rgb(175,238,238)

PaleVioletRed #DB7093 rgb(219,112,147)

PapayaWhip #FFEFD5 rgb(255,239,213)

PeachPuff #FFDAB9 rgb(255,218,185)

Peru #CD853F rgb(205,133,63)

Pink #FFC0CB rgb(255,192,203)

Plum #DDA0DD rgb(221,160,221)

PowderBlue #B0E0E6 rgb(176,224,230)

Purple #800080 rgb(128,0,128)

RebeccaPurple #663399 rgb(102,51,153)

Red #FF0000 rgb(255,0,0)

RosyBrown #BC8F8F rgb(188,143,143)

RoyalBlue #4169E1 rgb(65,105,225)

SaddleBrown #8B4513 rgb(139,69,19)

GoalKicker.com – CSS Notes for Professionals 120

Salmon #FA8072 rgb(250,128,114)

SandyBrown #F4A460 rgb(244,164,96)

SeaGreen #2E8B57 rgb(46,139,87)

SeaShell #FFF5EE rgb(255,245,238)

Sienna #A0522D rgb(160,82,45)

Silver #C0C0C0 rgb(192,192,192)

SkyBlue #87CEEB rgb(135,206,235)

SlateBlue #6A5ACD rgb(106,90,205)

SlateGray #708090 rgb(112,128,144)

SlateGrey #708090 rgb(112,128,144)

Snow #FFFAFA rgb(255,250,250)

SpringGreen #00FF7F rgb(0,255,127)

SteelBlue #4682B4 rgb(70,130,180)

Tan #D2B48C rgb(210,180,140)

Teal #008080 rgb(0,128,128)

Thistle #D8BFD8 rgb(216,191,216)

Tomato #FF6347 rgb(255,99,71)

Turquoise #40E0D0 rgb(64,224,208)

Violet #EE82EE rgb(238,130,238)

Wheat #F5DEB3 rgb(245,222,179)

White #FFFFFF rgb(255,255,255)

WhiteSmoke #F5F5F5 rgb(245,245,245)

Yellow #FFFF00 rgb(255,255,0)

YellowGreen #9ACD32 rgb(154,205,50)

In addition to the named colors, there is also the keyword transparent, which represents a fully-transparent black:
rgba(0,0,0,0)

GoalKicker.com – CSS Notes for Professionals 121

Section 18.3: Hexadecimal Value
Background

CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue
components of a color. Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal
notation. Uppercase and/or lowercase Hexadecimal values may be used (i.e. #3fc = #3FC = #33ffCC). The browser
interprets #369 as #336699. If that is not what you intended but rather wanted #306090, you need to specify that
explicitly.

The total number of colors that can be represented with hex notation is 256 ^ 3 or 16,777,216.

Syntax
color: #rrggbb;
color: #rgb
Value Description
rr 00 - FF for the amount of red
gg 00 - FF for the amount of green
bb 00 - FF for the amount of blue

.some-class {
/* This is equivalent to using the color keyword 'blue' */
color: #0000FF;
}

.also-blue {
/* If you want to specify each range value with a single number, you can!
This is equivalent to '#0000FF' (and 'blue') */
color: #00F;
}

Hexadecimal notation is used to specify color values in the RGB color format, per the W3C's 'Numerical color
values'.

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!

Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't
care about capitalization. #FFC125 and #ffc125 are the same color.

Section 18.4: rgb() Notation

RGB is an additive color model which represents colors as mixtures of red, green, and blue light. In essence, the
RGB representation is the decimal equivalent of the Hexadecimal Notation. In Hexadecimal each number ranges
from 00-FF which is equivalent to 0-255 in decimal and 0%-100% in percentages.

.some-class {
/* Scalar RGB, equivalent to 'blue'*/
color: rgb(0, 0, 255);
}

.also-blue {
/* Percentile RGB values*/
color: rgb(0%, 0%, 100%);
}

GoalKicker.com – CSS Notes for Professionals 122

Syntax
rgb(<red>, <green>, <blue>)
Value Description
<red> an integer from 0 - 255 or percentage from 0 - 100%
<green> an integer from 0 - 255 or percentage from 0 - 100%
<blue> an integer from 0 - 255 or percentage from 0 - 100%

Section 18.5: rgba() Notation

Similar to rgb() notation, but with an additional alpha (opacity) value.

.red {
/* Opaque red */
color: rgba(255, 0, 0, 1);
}

.red-50p {
/* Half-translucent red. */
color: rgba(255, 0, 0, .5);
}

Syntax
rgba(<red>, <green>, <blue>, <alpha>);
Value Description
<red> an integer from 0 - 255 or percentage from 0 - 100%
<green> an integer from 0 - 255 or percentage from 0 - 100%
<blue> an integer from 0 - 255 or percentage from 0 - 100%
<alpha> a number from 0 - 1, where 0.0 is fully transparent and 1.0 is fully opaque

Section 18.6: hsl() Notation

HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white").

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as
percentages.

p {
color: hsl(240, 100%, 50%); /* Blue */
}

GoalKicker.com – CSS Notes for Professionals 123

Syntax
color: hsl(<hue>, <saturation>%, <lightness>%);
Value Description
specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is
<hue>
green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly
<saturation>
colored)
<lightness> specified in percentage where 0% is fully black and 100% is fully white

Notes

A saturation of 0% always produces a grayscale color; changing the hue has no effect.

A lightness of 0% always produces black, and 100% always produces white; changing the hue or saturation
has no effect.

Section 18.7: hsla() Notation

Similar to hsl() notation, but with an added alpha (opacity) value.

hsla(240, 100%, 50%, 0) /* transparent */

hsla(240, 100%, 50%, 0.5) /* half-translucent blue */
hsla(240, 100%, 50%, 1) /* fully opaque blue */

Syntax

GoalKicker.com – CSS Notes for Professionals 124

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);
Value Description
specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is
<hue>
green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
<saturation> percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
<lightness> percentage where 0% is fully black and 100% is fully white
<alpha> a number from 0 - 1 where 0 is fully transparent and 1 is fully opaque

GoalKicker.com – CSS Notes for Professionals 125

Chapter 19: Opacity
Section 19.1: Opacity Property
An element's opacity can be set using the opacity property. Values can be anywhere from 0.0 (transparent) to 1.0
(opaque).

Example Usage

<div style="opacity:0.8;">
This is a partially transparent element
</div>
Property Value Transparency
opacity: 1.0; Opaque
opacity: 0.75; 25% transparent (75% Opaque)
opacity: 0.5; 50% transparent (50% Opaque)
opacity: 0.25; 75% transparent (25% Opaque)
opacity: 0.0; Transparent

Section 19.2: IE Compatibility for `opacity`

To use opacity in all versions of IE, the order is:

.transparent-element {
/* for IE 8 & 9 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // IE8
/* works in IE 8 & 9 too, but also 5, 6, 7 */
filter: alpha(opacity=60); // IE 5-7
/* Modern Browsers */
opacity: 0.6;
}

GoalKicker.com – CSS Notes for Professionals 126

Chapter 20: Length Units
Unit Description
% Define sizes in terms of parent objects or current object dependent on property
em Relative to the font-size of the element (2em means 2 times the size of the current font)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
s seconds (used for animations and transitions)
ms milliseconds (used for animations and transitions)
ex Relative to the x-height of the current font
ch Based on the width of the zero (0) character
fr fractional unit (used for CSS Grid Layout)

A CSS distance measurement is a number immediately followed by a length unit (px, em, pc, in, …)

CSS supports a number of length measurements units. They are absolute or relative.

Section 20.1: Creating scalable elements using rems and ems

Version ≥ 3

You can use rem defined by the font-size of your html tag to style elements by setting their font-size to a value of
rem and use em inside the element to create elements that scale with your global font-size.

HTML:

<input type="button" value="Button">

<input type="range">
<input type="text" value="Text">

Relevant CSS:

html {
font-size: 16px;
}

input[type="button"] {
font-size: 1rem;
padding: 0.5em 2em;
}

input[type="range"] {
font-size: 1rem;

GoalKicker.com – CSS Notes for Professionals 127

 width: 10em;
}

input[type=text] {
font-size: 1rem;
padding: 0.5em;
}

Possible Result:

Section 20.2: Font size with rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". Let's look at how rem works.

First, let's look at the differences between em and rem.

em: Relative to the font size of the parent. This causes the compounding issue
rem: Relative to the font size of the root or <html> element. This means it's possible to declare a single font
size for the html element and define all rem units to be a percentage of that.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Here is an example of
some common font sizes expressed in rem units, assuming that the base size is 16px :

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

CODE:

Version ≥ 3
html {
font-size: 16px;
}

GoalKicker.com – CSS Notes for Professionals 128

h1 {
font-size: 2rem; /* 32px */
}

p {
font-size: 1rem; /* 16px */
}

li {
font-size: 1.5em; /* 24px */
}

Section 20.3: vmin and vmax

vmin: Relative to 1 percent of the viewport's smaller dimension
vmax: Relative to 1 percent of the viewport's larger dimension

In other words, 1 vmin is equal to the smaller of 1 vh and 1 vw

1 vmax is equal to the larger of 1 vh and 1 vw

Note: vmax is not supported in:

any version of Internet Explorer

Safari before version 6.1

Section 20.4: vh and vw

CSS3 introduced two units for representing size.

vh, which stands for viewport height is relative to 1% of the viewport height
vw, which stands for viewport width is relative to 1% of the viewport width

Version ≥ 3
div {
width: 20vw;
height: 20vh;
}

Above, the size for the div takes up 20% of the width and height of the viewport

Section 20.5: using percent %

One of the useful unit when creating a responsive application.

Its size depends on its parent container.

Equation:

( Parent Container`s width ) * ( Percentage(%) ) = Output

For Example:

Parent has 100px width while the Child has 50%.

GoalKicker.com – CSS Notes for Professionals 129

On the output, the Child's width will be half(50%) of the Parent's, which is 50px.

HTML

<div class="parent">
PARENT
<div class="child">
CHILD
</div>
</div>

CSS

<style>

*{
color: #CCC;
}

.parent{
background-color: blue;
width: 100px;
}

.child{
background-color: green;
width: 50%;
}

</style>

OUTPUT

GoalKicker.com – CSS Notes for Professionals 130

Chapter 21: Pseudo-Elements
pseudo-element Description
::after Insert content after the content of an element
::before Insert content before the content of an element
::first-letter Selects the first letter of each element
::first-line Selects the first line of each element
::selection Matches the portion of an element that is selected by a user
Used to create a backdrop that hides the underlying document for an element in the top layer's
::backdrop
stack
::placeholder Allows you to style the placeholder text of a form element (Experimental)
::marker For applying list-style attributes on a given element (Experimental)
::spelling-error Represents a text segment which the browser has flagged as incorrectly spelled (Experimental)
Represents a text segment which the browser has flagged as grammatically incorrect
::grammar-error
(Experimental)

Pseudo-elements, just like pseudo-classes, are added to a CSS selectors but instead of describing a special state,
they allow you to scope and style certain parts of an html element.

For example, the ::first-letter pseudo-element targets only the first letter of a block element specified by the
selector.

Section 21.1: Pseudo-Elements

Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain
parts of a document.

The content attribute is required for pseudo-elements to render; however, the attribute can have an empty value
(e.g. content: "").

div::after {
content: 'after';
color: red;
border: 1px solid red;
}

div {
color: black;
border: 1px solid black;
padding: 1px;
}

div::before {
content: 'before';
color: green;
border: 1px solid green;
}

Section 21.2: Pseudo-Elements in Lists

Pseudo-elements are often used to change the look of lists (mostly for unordered lists, ul).

GoalKicker.com – CSS Notes for Professionals 131

The first step is to remove the default list bullets:

ul {
list-style-type: none;
}

Then you add the custom styling. In this example, we will create gradient boxes for bullets.

li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}

HTML

<ul>
<li>Test I</li>
<li>Test II</li>
</ul>

Result

GoalKicker.com – CSS Notes for Professionals 132

Chapter 22: Positioning
Parameter Details
Default value. Elements render in order, as they appear in the document flow. The top, right, bottom,
static
left and z-index properties do not apply.
The element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's
relative
LEFT position
fixed The element is positioned relative to the browser window
absolute The element is positioned relative to its first positioned (not static) ancestor element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Experimental feature. It behaves like position: static within its parent until a given offset threshold
sticky
is reached, then it acts as position: fixed.
unset Combination of initial and inherit. More info here.

Section 22.1: Overlapping Elements with z-index

To change the default stack order positioned elements (position property set to relative, absolute or fixed), use
the z-index property.

The higher the z-index, the higher up in the stacking context (on the z-axis) it is placed.

Example

In the example below, a z-index value of 3 puts green on top, a z-index of 2 puts red just under it, and a z-index of 1
puts blue under that.

HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS
div {
position: absolute;
height: 200px;
width: 200px;
}
div#div1 {
z-index: 1;
left: 0px;
top: 0px;
background-color: blue;
}
div#div2 {
z-index: 3;
left: 100px;
top: 100px;
background-color: green;
}
div#div3 {
z-index: 2;
left: 50px;

GoalKicker.com – CSS Notes for Professionals 133

 top: 150px;
background-color: red;
}

This creates the following effect:

See a working example at JSFiddle.

Syntax
z-index: [ number ] | auto;
Parameter Details
An integer value. A higher number is higher on the z-index stack. 0 is the default value. Negative
number
values are allowed.
auto Gives the element the same stacking context as its parent. (Default)

Remarks

All elements are laid out in a 3D axis in CSS, including a depth axis, measured by the z-index property. z-index
only works on positioned elements: (see: Why does z-index need a defined position to work?). The only value where
it is ignored is the default value, static.

Read about the z-index property and Stacking Contexts in the CSS Specification on layered presentation and at the
Mozilla Developer Network.

Section 22.2: Absolute Position

When absolute positioning is used the box of the desired element is taken out of the Normal Flow and it no longer
affects the position of the other elements on the page. Offset properties:

1. top
2. left
3. right

GoalKicker.com – CSS Notes for Professionals 134

 4. bottom

specify the element should appear in relation to its next non-static containing element.

.abspos{
position:absolute;
top:0px;
left:500px;
}

This code will move the box containing element with attribute class="abspos" down 0px and right 500px relative to
its containing element.

Section 22.3: Fixed position

Defining position as fixed we can remove an element from the document flow and set its position relatively to the
browser window. One obvious use is when we want something to be visible when we scroll to the bottom of a long
page.

#stickyDiv {
position:fixed;
top:10px;
left:10px;
}

Section 22.4: Relative Position

Relative positioning moves the element in relation to where it would have been in normal flow .Offset properties:

1. top
2. left
3. right
4. bottom

are used to indicate how far to move the element from where it would have been in normal flow.

.relpos{
position:relative;
top:20px;
left:30px;
}

This code will move the box containing element with attribute class="relpos" 20px down and 30px to the right from
where it would have been in normal flow.

Section 22.5: Static positioning

The default position of an element is static. To quote MDN:

This keyword lets the element use the normal behavior, that is it is laid out in its current position in the
flow. The top, right, bottom, left and z-index properties do not apply.

.element{
position:static;

GoalKicker.com – CSS Notes for Professionals 135

}

GoalKicker.com – CSS Notes for Professionals 136

Chapter 23: Layout Control
Value Effect
none Hide the element and prevent it from occupying space.
block Block element, occupy 100% of the available width, break after element.
inline Inline element, occupy no width, no break after element.
inline-block Taking special properties from both inline and block elements, no break, but can have width.
inline-flex Displays an element as an inline-level flex container.
inline-table The element is displayed as an inline-level table.
grid Behaves like a block element and lays out its content according to the grid model.
flex Behaves like a block element and lays out its content according to the flexbox model.
inherit Inherit the value from the parent element.
Reset the value to the default value taken from behaviors described in the HTML specifications or
initial
from the browser/user default stylesheet.
table Behaves like the HTML table element.
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
list-item Let the element behave like a <li> element.

Section 23.1: The display property

The display CSS property is fundamental for controlling the layout and flow of an HTML document. Most elements
have a default display value of either block or inline (though some elements have other default values).

Inline

An inline element occupies only as much width as necessary. It stacks horizontally with other elements of the
same type and may not contain other non-inline elements.

<span>This is some <b>bolded</b> text!</span>

As demonstrated above, two inline elements, <span> and <b>, are in-line (hence the name) and do not break the
flow of the text.

Block

A block element occupies the maximum available width of its' parent element. It starts with a new line and, in
contrast to inline elements, it does not restrict the type of elements it may contain.

<div>Hello world!</div><div>This is an example!</div>

The div element is block-level by default, and as shown above, the two block elements are vertically stacked and,
unlike the inline elements, the flow of the text breaks.

GoalKicker.com – CSS Notes for Professionals 137

Inline Block

The inline-block value gives us the best of both worlds: it blends the element in with the flow of the text while
allowing us to use padding, margin, height and similar properties which have no visible effect on inline elements.

Elements with this display value act as if they were regular text and as a result are affected by rules controlling the
flow of text such as text-align. By default they are also shrunk to the the smallest size possible to accommodate
their content.

<!--Inline: unordered list-->

<style>
li {
display : inline;
background : lightblue;
padding:10px;

border-width:2px;
border-color:black;
border-style:solid;
}
</style>

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->

<style>
li {
display : block;
background : lightblue;
padding:10px;

border-width:2px;
border-color:black;
border-style:solid;
}
</style>

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

GoalKicker.com – CSS Notes for Professionals 138

<!--Inline-block: unordered list-->
<style>
li {
display : inline-block;
background : lightblue;
padding:10px;

border-width:2px;
border-color:black;
border-style:solid;
}

</style>

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

none

An element that is given the none value to its display property will not be displayed at all.

For example let's create a div-element that has an id of myDiv:

<div id="myDiv"></div>

This can now be marked as not being displayed by the following CSS rule:

#myDiv {
display: none;
}

When an element has been set to be display:none; the browser ignores every other layout property for that
specific element (both position and float). No box will be rendered for that element and its existence in html does
not affect the position of following elements.

Note that this is different from setting the visibility property to hidden. Setting visibility: hidden; for an
element would not display the element on the page but the element would still take up the space in the rendering
process as if it would be visible. This will therefore affect how following elements are displayed on the page.

The none value for the display property is commonly used along with JavaScript to show or hide elements at will,
eliminating the need to actually delete and re-create them.

Section 23.2: To get old table structure using div

This is the normal HTML table structure

<style>
table {
width: 100%;
}

GoalKicker.com – CSS Notes for Professionals 139

</style>

<table>
<tr>
<td>
I'm a table
</td>
</tr>
</table>

You can do same implementation like this

<style>
.table-div {
display: table;
}
.table-row-div {
display: table-row;
}
.table-cell-div {
display: table-cell;
}
</style>

<div class="table-div">
<div class="table-row-div">
<div class="table-cell-div">
I behave like a table now
</div>
</div>
</div>

GoalKicker.com – CSS Notes for Professionals 140

Chapter 24: Grid
Grid layout is a new and powerful CSS layout system that allows to divide a web page content into rows and
columns in an easy way.

Section 24.1: Basic Example

Property Possible Values
display grid / inline-grid

The CSS Grid is defined as a display property. It applies to a parent element and its immediate children only.

Consider the following markup:

<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>

The easiest way to define the markup structure above as a grid is to simply set its display property to grid:

.container {
display: grid;
}

However, doing this will invariably cause all the child elements to collapse on top of one another. This is because
the children do not currently know how to position themselves within the grid. But we can explicitly tell them.

First we need to tell the grid element .container how many rows and columns will make up its structure and we
can do this using the grid-columns and grid-rows properties (note the pluralisation):

.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}

However, that still doesn't help us much because we need to give an order to each child element. We can do this by
specifying the grid-row and grid-column values which will tell it where it sits in the grid:

.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;

GoalKicker.com – CSS Notes for Professionals 141

 grid-row: 2;
}

By giving each item a column and row value it identifies the items order within the container.

View a working example on JSFiddle. You'll need to view this in IE10, IE11 or Edge for it to work as these are
currently the only browsers supporting Grid Layout (with vendor prefix -ms-) or enable a flag in Chrome, Opera and
Firefox according to caniuse in order to test with them.

GoalKicker.com – CSS Notes for Professionals 142

Chapter 25: Tables
Section 25.1: table-layout
The table-layout property changes the algorithm that is used for the layout of a table.

Below an example of two tables both set to width: 150px:

The table on the left has table-layout: auto while the one on the right has table-layout: fixed. The former is
wider than the specified width (210px instead of 150px) but the contents fit. The latter takes the defined width of
150px, regardless if the contents overflow or not.

Value Description
auto This is the default value. It defines the layout of the table to be determined by the contents of its' cells.
This value sets the table layout to be determined by the width property provided to the table. If the content
fixed
of a cell exceeds this width, the cell will not resize but instead, let the content overflow.

Section 25.2: empty-cells

The empty-cells property determines if cells with no content should be displayed or not. This has no effect unless
border-collapse is set to separate.

Below an example with two tables with different values set to the empty-cells property:

The table on the left has empty-cells: show while the one on the right has empty-cells: hide. The former does
display the empty cells whereas the latter does not.

Value Description
show This is the default value. It shows cells even if they are empty.
hide This value hides a cell altogether if there are no contents in the cell.

More Information:

https://www.w3.org/TR/CSS21/tables.html#empty-cells
https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
http://codepen.io/SitePoint/pen/yfhtq
https://css-tricks.com/almanac/properties/e/empty-cells/

Section 25.3: border-collapse

The border-collapse property determines if a tables' borders should be separated or merged.

GoalKicker.com – CSS Notes for Professionals 143

Below an example of two tables with different values to the border-collapse property:

The table on the left has border-collapse: separate while the one on the right has border-collapse: collapse.

Value Description
separate This is the default value. It makes the borders of the table separate from each other.
collapse This value sets the borders of the table to merge together, rather than being distinct.

Section 25.4: border-spacing

The border-spacing property determines the spacing between cells. This has no effect unless border-collapse is
set to separate.

Below an example of two tables with different values to the border-spacing property:

The table on the left has border-spacing: 2px (default) while the one on the right has border-spacing: 8px.

Value Description
<length> This is the default behavior, though the exact value can vary between browsers.
<length> <length> This syntax allows specifying separate horizontal and vertical values respectively.

Section 25.5: caption-side

The caption-side property determines the vertical positioning of the <caption> element within a table. This has no
effect if such element does not exist.

Below an example with two tables with different values set to the caption-side property:

The table on the left has caption-side: top while the one on the right has caption-side: bottom.

Value Description
top This is the default value. It places the caption above the table.
bottom This value places the caption below the table.

GoalKicker.com – CSS Notes for Professionals 144

Chapter 26: Transitions
Parameter Details
The specific CSS property whose value change needs to be transitioned (or) all, if all the
transition-property
transitionable properties need to be transitioned.
The duration (or period) in seconds (s) or milliseconds (ms) over which the transition
transition-duration
must take place.
A function that describes how the intermediate values during the transition are
calculated. Commonly used values are ease, ease-in, ease-out, ease-in-out, linear,
transition-timing-function
cubic-bezier(), steps(). More information about the various timing functions can be
found in the W3C specs.
The amount of time that must have elapsed before the transition can start. Can be
transition-delay
specified in seconds (s) or milliseconds (ms)

Section 26.1: Transition shorthand

CSS

div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}

HTML

<div></div>

This example will change the background color when the div is hovered the background-color change will last 1
second.

Section 26.2: cubic-bezier

The cubic-bezier function is a transition timing function which is often used for custom and smooth transitions.

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

The function takes four parameters:

cubic-bezier(P1_x, P1_y, P2_x, P2_y)

GoalKicker.com – CSS Notes for Professionals 145

These parameters will be mapped to points which are part of a Bézier curve:

For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1), which menas that the
parameters passed to the cubic-bezier function can only be between 0 and 1.

If you pass parameters which aren't in this interval the function will default to a linear transition.

Since cubic-bezier is the most flexible transition in CSS, you can translate all other transition timing function to
cubic-bezier functions:

linear: cubic-bezier(0,0,1,1)

ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0)

GoalKicker.com – CSS Notes for Professionals 146

Section 26.3: Transition (longhand)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}

HTML
<div></div>

transition-property: Specifies the CSS properties the transition effect is for. In this case, the div will expand
both horizontally and vertically when hovered.
transition-duration: Specifies the length of time a transition takes to complete. In the above example, the
height and width transitions will take 1 second and 500 milliseconds respectively.
transition-timing-function: Specifies the speed curve of the transition effect. A linear value indicates the
transition will have the same speed from start to finish.
transition-delay: Specifies the amount of time needed to wait before the transition effect starts. In this case,
the height will start transitioning immediately, whereas the width will wait 1 second.

GoalKicker.com – CSS Notes for Professionals 147

Chapter 27: Animations
Transition
Parameter Details
Either the CSS property to transition on, or all, which specifies all transition-able
property
properties.
duration Transition time, either in seconds or milliseconds.
Specifies a function to define how intermediate values for properties are computed.
timing-function Common values are ease, linear, and step-end. Check out the easing function cheat-
sheet for more.
delay Amount of time, in seconds or milliseconds, to wait before playing the animation.

@keyframes
You can either specify a set time with a percentage value, or two percentage values, ie
[ from | to | <percentage> ]
10%, 20%, for a period of time where the keyframe's set attributes are set.
block Any amount of CSS attributes for the keyframe.

Section 27.1: Animations with keyframes

For multi-stage CSS animations, you can create CSS @keyframes. Keyframes allow you to define multiple animation
points, called a keyframe, to define more complex animations.

Basic Example

In this example, we'll make a basic background animation that cycles between all colors.

@keyframes rainbow-background {
0% { background-color: #ff0000; }
8.333% { background-color: #ff8000; }
16.667% { background-color: #ffff00; }
25.000% { background-color: #80ff00; }
33.333% { background-color: #00ff00; }
41.667% { background-color: #00ff80; }
50.000% { background-color: #00ffff; }
58.333% { background-color: #0080ff; }
66.667% { background-color: #0000ff; }
75.000% { background-color: #8000ff; }
83.333% { background-color: #ff00ff; }
91.667% { background-color: #ff0080; }
100.00% { background-color: #ff0000; }
}

.RainbowBackground {
animation: rainbow-background 5s infinite;
}

View Result

There's a few different things to note here. First, the actual @keyframes syntax.

@keyframes rainbow-background{

This sets the name of the animation to rainbow-background.

GoalKicker.com – CSS Notes for Professionals 148

0% { background-color: #ff0000; }

This is the definition for a keyframe within the animation. The first part, the 0% in the case, defines where the
keyframe is during the animation. The 0% implies it is 0% of the total animation time from the beginning.

The animation will automatically transition between keyframes. So, by setting the next background color at 8.333%,
the animation will smoothly take 8.333% of the time to transition between those keyframes.

.RainbowBackground {
animation: rainbow-background 5s infinite;
}

This code attaches our animation to all elements which have the .RainbowBackground class.

The actual animation property takes the following arguments.

animation-name: The name of our animation. In this case, rainbow-background

animation-duration: How long the animation will take, in this case 5 seconds.
animation-iteration-count (Optional): The number of times the animation will loop. In this case, the
animation will go on indefinitely. By default, the animation will play once.
animation-delay (Optional): Specifies how long to wait before the animation starts. It defaults to 0 seconds,
and can take negative values. For example, -2s would start the animation 2 seconds into its loop.
animation-timing-function (Optional): Specifies the speed curve of the animation. It defaults to ease,
where the animation starts slow, gets faster and ends slow.

In this particular example, both the 0% and 100% keyframes specify { background-color: #ff0000; }. Wherever
two or more keyframes share a state, one may specify them in a single statement. In this case, the two 0% and 100%
lines could be replaced with this single line:

0%, 100% { background-color: #ff0000; }

Cross-browser compatibility

For older WebKit-based browsers, you'll need to use the vendor prefix on both the @keyframes declaration and the
animation property, like so:

@-webkit-keyframes{}

-webkit-animation: ...

Section 27.2: Animations with the transition property

Useful for simple animations, the CSS transition property allows number-based CSS properties to animate
between states.

Example
.Example{
height: 100px;
background: #fff;
}

.Example:hover{
height: 120px;

GoalKicker.com – CSS Notes for Professionals 149

 background: #ff0000;
}

View Result

By default, hovering over an element with the .Example class would immediately cause the element's height to
jump to 120px and its background color to red (#ff0000).

By adding the transition property, we can cause these changes to occur over time:

.Example{
...
transition: all 400ms ease;
}

View Result

The all value applies the transition to all compatible (numbers-based) properties. Any compatible property name
(such as height or top) can be substituted for this keyword.

400ms specifies the amount of time the transition takes. In this case, the element's change in height will take 400
milliseconds to complete.

Finally, the value ease is the animation function, which determines how the animation is played. ease means start
slow, speed up, then end slow again. Other values are linear, ease-out, and ease-in.

Cross-Browser Compatibility

The transition property is generally well-supported across all major browsers, excepting IE 9. For earlier versions
of Firefox and Webkit-based browsers, use vendor prefixes like so:

.Example{
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
}

Note: The transition property can animate changes between any two numerical values, regardless of unit. It can
also transition between units, such as 100px to 50vh. However, it cannot transition between a number and a default
or automatic value, such as transitioning an element's height from 100px to auto.

Section 27.3: Syntax Examples

Our first syntax example shows the animation shorthand property using all of the available properties/parameters:

animation: 3s ease-in 1s 2 reverse both paused

slidein;
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-
state | name */

Our second example is a little more simple, and shows that some properties can be omitted:

animation: 3s linear 1s slidein;

/* duration | timing-function | delay | name */

GoalKicker.com – CSS Notes for Professionals 150

Our third example shows the most minimal declaration. Note that the animation-name and animation-duration
must be declared:

animation: 3s slidein;
/* duration | name */

It's also worth mentioning that when using the animation shorthand the order of the properties makes a difference.
Obviously the browser may confuse your duration with your delay.

If brevity isn't your thing, you can also skip the shorthand property and write out each property individually:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;

Section 27.4: Increasing Animation Performance Using the

`will-change` Attribute
When creating animations and other GPU-heavy actions, it's important to understand the will-change attribute.

Both CSS keyframes and the transition property use GPU acceleration. Performance is increased by offloading
calculations to the device's GPU. This is done by creating paint layers (parts of the page that are individually
rendered) that are offloaded to the GPU to be calculated. The will-change property tells the browser what will
animate, allowing the browser to create smaller paint areas, thus increasing performance.

The will-change property accepts a comma-separated list of properties to be animated. For example, if you plan
on transforming an object and changing its opacity, you would specify:

.Example{
...
will-change: transform, opacity;
}

Note: Use will-change sparingly. Setting will-change for every element on a page can cause performance
problems, as the browser may attempt to create paint layers for every element, significantly increasing the amount
of processing done by the GPU.

GoalKicker.com – CSS Notes for Professionals 151

Chapter 28: 2D Transforms
Function/Parameter Details
rotate(x) Defines a transformation that moves the element around a fixed point on the Z axis
translate(x,y) Moves the position of the element on the X and Y axis
translateX(x) Moves the position of the element on the X axis
translateY(y) Moves the position of the element on the Y axis
scale(x,y) Modifies the size of the element on the X and Y axis
scaleX(x) Modifies the size of the element on the X axis
scaleY(y) Modifies the size of the element on the Y axis
Shear mapping, or transvection, distorting each point of an element by a certain angle in
skew(x,y)
each direction
Horizontal shear mapping distorting each point of an element by a certain angle in the
skewX(x)
horizontal direction
Vertical shear mapping distorting each point of an element by a certain angle in the vertical
skewY(y)
direction
matrix() Defines a 2D transformation in the form of a transformation matrix.
The angle by which the element should be rotated or skewed (depending on the function
with which it is used). Angle can be provided in degrees (deg), gradians (grad), radians (rad)
angle
or turns (turn). In skew() function, the second angle is optional. If not provided, there will be
no (0) skew in Y-axis.
The distance expressed as a length or a percentage by which the element should be
length-or-percentage translated. In translate() function, the second length-or-percentage is optional. If not
provided, then there would be no (0) translation in Y-axis.
A number which defines how many times the element should be scaled in the specified axis.
scale-factor In scale() function, the second scale-factor is optional. If not provided, the first scale-factor
will be applied for Y-axis also.

Section 28.1: Rotate

HTML

<div class="rotate"></div>

CSS

.rotate {
width: 100px;
height: 100px;
background: teal;
transform: rotate(45deg);
}

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from
left and 50% from top. You can change the center of rotation by setting the transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end.

GoalKicker.com – CSS Notes for Professionals 152

Section 28.2: Scale
HTML

<div class="scale"></div>

CSS

.scale {
width: 100px;
height: 100px;
background: teal;
transform: scale(0.5, 1.3);
}

This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis.

The center of the transform is in the center of the div, 50% from left and 50% from top.

Section 28.3: Skew

HTML

<div class="skew"></div>

CSS

.skew {
width: 100px;
height: 100px;
background: teal;
transform: skew(20deg, -30deg);
}

This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis.
The center of the transform is in the center of the div, 50% from left and 50% from top.

See the result here.

Section 28.4: Multiple transforms

Multiple transforms can be applied to an element in one property like this:

transform: rotate(15deg) translateX(200px);

This will rotate the element 15 degrees clockwise and then translate it 200px to the right.

In chained transforms, the coordinate system moves with the element. This means that the translation won't be
horizontal but on an axis rotate 15 degrees clockwise as shown in the following image:

GoalKicker.com – CSS Notes for Professionals 153

Changing the order of the transforms will change the output. The first example will be different to

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
transform: rotate(15deg) translateX(200px);
}

As shown in this image:

Section 28.5: Translate

HTML

<div class="translate"></div>

CSS

.translate {
width: 100px;
height: 100px;
background: teal;
transform: translate(200px, 50%);

GoalKicker.com – CSS Notes for Professionals 154

}

This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.

You can also specify translations on a single axis.

On the X axis:

.translate {
transform: translateX(200px);
}

On the Y axis:

.translate {
transform: translateY(50%);
}

Section 28.6: Transform Origin

Transformations are done with respect to a point which is defined by the transform-origin property.

The property takes 2 values : transform-origin: X Y;

In the following example the first div (.tl) is rotate around the top left corner with transform-origin: 0 0; and
the second (.tr)is transformed around it's top right corner with transform-origin: 100% 0. The rotation is applied
on hover :

HTML:

<div class="transform originl"></div>

<div class="transform origin2"></div>

CSS:

.transform {
display: inline-block;
width: 200px;
height: 100px;
background: teal;
transition: transform 1s;
}

.origin1 {
transform-origin: 0 0;
}

.origin2 {
transform-origin: 100% 0;
}

.transform:hover {
transform: rotate(30deg);
}

The default value for the transform-origin property is 50% 50% which is the center of the element.

GoalKicker.com – CSS Notes for Professionals 155

Chapter 29: 3D Transforms
Section 29.1: Compass pointer or needle shape using 3D
transforms
CSS
div.needle {
margin: 100px;
height: 150px;
width: 150px;
transform: rotateY(85deg) rotateZ(45deg);
/* presentational */
background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
box-shadow: inset 6px 6px 22px 8px #272727;
}

HTML
<div class='needle'></div>

In the above example, a needle or compass pointer shape is created using 3D transforms. Generally when we apply
the rotate transform on an element, the rotation happens only in the Z-axis and at best we will end up with
diamond shapes only. But when a rotateY transform is added on top of it, the element gets squeezed in the Y-axis
and thus ends up looking like a needle. The more the rotation of the Y-axis the more squeezed the element looks.

The output of the above example would be a needle resting on its tip. For creating a needle that is resting on its
base, the rotation should be along the X-axis instead of along Y-axis. So the transform property's value would have
to be something like rotateX(85deg) rotateZ(45deg);.

This pen uses a similar approach to create something that resembles the Safari logo or a compass dial.

Screenshot of element with no transform:

Screenshot of element with only 2D transform:

GoalKicker.com – CSS Notes for Professionals 156

Screenshot of element with 3D transform:

Section 29.2: 3D text eect with shadow

HTML:

<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
perspective-origin:50% 50%;
perspective:300px;
}
h1{
text-align:center;
font-size:12vmin;
font-family: 'Open Sans', sans-serif;
color:rgba(0,0,0,0.8);
line-height:1em;
transform:rotateY(50deg);
perspective:150px;
perspective-origin:0% 50%;

GoalKicker.com – CSS Notes for Professionals 157

}
h1:after{
content:attr(data-content);
position:absolute;
left:0;top:0;
transform-origin:50% 100%;
transform:rotateX(-90deg);
color:#0099CC;
}
#title:before{
content:'';
position:absolute;
top:-150%; left:-25%;
width:180%; height:328%;
background:rgba(255,255,255,0.7);
transform-origin: 0 100%;
transform: translatez(-200px) rotate(40deg) skewX(35deg);
border-radius:0 0 100% 0;
}

View example with additional hover effect

In this example, the text is transformed to make it look like it is going into the screen away from the user.

The shadow is transformed accordingly so it follows the text. As it is made with a pseudo element and the data
attribute, it inherits the transforms form it's parent (the H1 tag).

The white "light" is made with a pseudo element on the #title element. It is skewed and uses border-radius for the
rounded corner.

Section 29.3: backface-visibility

The backface-visibility property relates to 3D transforms.

With 3D transforms and the backface-visibility property, you're able to rotate an element such that the original
front of an element no longer faces the screen.

GoalKicker.com – CSS Notes for Professionals 158

For example, this would flip an element away from the screen:

JSFIDDLE

<div class="flip">Loren ipsum</div>

<div class="flip back">Lorem ipsum</div>

.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
}

.flip.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}

Firefox 10+ and IE 10+ support backface-visibility without a prefix. Opera, Chrome, Safari, iOS, and Android all
need -webkit-backface-visibility.

It has 4 values:

1. visible (default) - the element will always be visible even when not facing the screen.
2. hidden - the element is not visible when not facing the screen.
3. inherit - the property will gets its value from the its parent element
4. initial - sets the property to its default, which is visible

Section 29.4: 3D cube

3D transforms can be use to create many 3D shapes. Here is a simple 3D CSS cube example:

HTML:

<div class="cube">
<div class="cubeFace"></div>
<div class="cubeFace face2"></div>
</div>

CSS:

body {
perspective-origin: 50% 100%;
perspective: 1500px;
overflow: hidden;
}
.cube {
position: relative;
padding-bottom: 20%;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform: rotateY(45deg) rotateX(0);
}
.cubeFace {

GoalKicker.com – CSS Notes for Professionals 159

 position: absolute;
top: 0;
left: 40%;
width: 20%;
height: 100%;
margin: 0 auto;
transform-style: inherit;
background: #C52329;
box-shadow: inset 0 0 0 5px #333;
transform-origin: 50% 50%;
transform: rotateX(90deg);
backface-visibility: hidden;
}
.face2 {
transform-origin: 50% 50%;
transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform-origin: 0 0;
background: inherit;
box-shadow: inherit;
backface-visibility: inherit;
}
.cubeFace:before {
top: 100%;
left: 0;
transform: rotateX(-90deg);
}
.cubeFace:after {
top: 0;
left: 100%;
transform: rotateY(90deg);
}

View this example

Additional styling is added in the demo and a transform is applied on hover to view the 6 faces of the cube.

Should be noted that:

4 faces are made with pseudo elements

chained transforms are applied

GoalKicker.com – CSS Notes for Professionals 160

Chapter 30: Filter Property
Value Description
blur(x) Blurs the image by x pixels.
Brightens the image at any value above 1.0 or 100%. Below that, the image will be
brightness(x)
darkened.
Provides more contrast to the image at any value above 1.0 or 100%. Below that, the
contrast(x)
image will get less saturated.
drop-shadow(h, v, x, y, z) Gives the image a drop-shadow. h and v can have negative values. x, y, and z are optional.
greyscale(x) Shows the image in greyscale, with a maximum value of 1.0 or 100%.
hue-rotate(x) Applies a hue-rotation to the image.
invert(x) Inverts the color of the image with a maximum value of 1.0 or 100%.
opacity(x) Sets how opaque/transparent the image is with a maximum value of 1.0 or 100%.
Saturates the image at any value above 1.0 or 100%. Below that, the image will start to
saturate(x)
de-saturate.
sepia(x) Converts the image to sepia with a maximum value of 1.0 or 100%.

Section 30.1: Blur

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: blur(1px);
filter: blur(1px);
}

Result

Makes you wanna rub your glasses.

Section 30.2: Drop Shadow (use box-shadow instead if

GoalKicker.com – CSS Notes for Professionals 161

possible)
HTML

<p>My shadow always follows me.</p>

CSS

p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}

Result

Section 30.3: Hue Rotate

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}

Result

Section 30.4: Multiple Filter Values

To use multiple filters, separate each value with a space.

HTML

GoalKicker.com – CSS Notes for Professionals 162

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}

Result

Section 30.5: Invert Color

HTML

<div></div>

CSS

div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}

Result

Turns from white to black.

GoalKicker.com – CSS Notes for Professionals 163

Chapter 31: Cursor Styling
Section 31.1: Changing cursor type
cursor: value;

Examples:

Value Description
none No cursor is rendered for the element
auto Default. The browser sets a cursor
help The cursor indicates that help is available
wait The cursor indicates that the program is busy
move The cursor indicates something is to be moved
pointer The cursor is a pointer and indicates a link

Section 31.2: pointer-events

The pointer-events property allows for control over how HTML elements respond to mouse/touch events.

.disabled {
pointer-events: none;
}

In this example,

'none' prevents all click, state and cursor options on the specified HTML element [[1]]

Other valid values for HTMl elements are:

auto;
inherit.

1. https://css-tricks.com/almanac/properties/p/pointer-events/

Other resources:

GoalKicker.com – CSS Notes for Professionals 164

 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://davidwalsh.name/pointer-events

Section 31.3: caret-color

The caret-color CSS property specifies the color of the caret, the visible indicator of the insertion point in an
element where text and other content is inserted by the user's typing or editing.

HTML

<input id="example" />

CSS

#example {
caret-color: red;
}

Resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

GoalKicker.com – CSS Notes for Professionals 165

Chapter 32: box-shadow
Parameters Details
by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the
inset
frame/border.
offset-x the horizontal distance
offset-y the vertical distance
0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow
blur-radius
becomes.
0 by default. positive values will cause the shadow to expand. negative values will cause the shadow
spread-radius
to shrink.
color can be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla()

Section 32.1: bottom-only drop shadow using a pseudo-

element
JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/2/

HTML

<div class="box_shadow"></div>

CSS

.box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
}

.box_shadow:after {
content: "";
width: 190px;
height: 1px;
margin-top: 98px;
margin-left: 5px;
display: block;
position: absolute;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #444444;
-moz-box-shadow: 0px 0px 8px 2px #444444;
box-shadow: 0px 0px 8px 2px #444444;
}

GoalKicker.com – CSS Notes for Professionals 166

Section 32.2: drop shadow
JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/

HTML

<div class="box_shadow"></div>

CSS

.box_shadow {
-webkit-box-shadow: 0px 0px 10px -1px #444444;
-moz-box-shadow: 0px 0px 10px -1px #444444;
box-shadow: 0px 0px 10px -1px #444444;
}

Section 32.3: inner drop shadow

HTML

<div class="box_shadow"></div>

CSS

.box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
-webkit-box-shadow: inset 0px 0px 10px 0px #444444;
-moz-box-shadow: inset 0px 0px 10px 0px #444444;
box-shadow: inset 0px 0px 10px 0px #444444;
}

Result:

GoalKicker.com – CSS Notes for Professionals 167

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/1/

Section 32.4: multiple shadows

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/5/

HTML

<div class="box_shadow"></div>

CSS

.box_shadow {
width: 100px;
height: 100px;
margin: 100px;
box-shadow:
-52px -52px 0px 0px #f65314,
52px -52px 0px 0px #7cbb00,
-52px 52px 0px 0px #00a1f1,
52px 52px 0px 0px #ffbb00;
}

GoalKicker.com – CSS Notes for Professionals 168

GoalKicker.com – CSS Notes for Professionals 169
Chapter 33: Shapes for Floats
Parameter Details
A value of none means that the float area (the area that is used for wrapping content around a float
none
element) is unaffected. This is the default/initial value.
Refers to one among inset(), circle(), ellipse() or polygon(). Using one of these functions and its
basic-shape
values the shape is defined.
Refers to one among margin-box, border-box, padding-box, content-box. When only <shape-box> is
shape-box provided (without <basic-shape>) this box is the shape. When it is used along with <basic-shape>, this
acts as the reference box.
When an image is provided as value, the shape is computed based on the alpha channel of the image
image
specified.

Section 33.1: Shape Outside with Basic Shape – circle()

With the shape-outside CSS property one can define shape values for the float area so that the inline content
wraps around the shape instead of the float's box.

CSS

img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of
the circle on either side. And then there is some filler text just to make the text long enough.
Lorem Ipsum Dolor Sit Amet....</p>

In the above example, both the images are actually square images and when the text is placed without the shape-
outside property, it will not flow around the circle on either side. It will flow around the containing box of the image
only. With shape-outside the float area is re-defined as a circle and the content is made to flow around this
imaginary circle that is created using shape-outside.

The imaginary circle that is used to re-define the float area is a circle with radius of 80px drawn from the center-mid
point of the image's reference box.

Below are a couple of screenshots to illustrate how the content would be wrapped around when shape-outside is
used and when it is not used.

Output with shape-outside

GoalKicker.com – CSS Notes for Professionals 170

Output without shape-outside

Section 33.2: Shape margin

The shape-margin CSS property adds a margin to shape-outside.

CSS

img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of
the circle on either side. And then there is some filler text just to make the text long enough.
Lorem Ipsum Dolor Sit Amet....</p>

In this example, a 10px margin is added around the shape using shape-margin. This creates a bit more space
between the imaginary circle that defines the float area and the actual content that is flowing around.

Output:

GoalKicker.com – CSS Notes for Professionals 171

GoalKicker.com – CSS Notes for Professionals 172
Chapter 34: List Styles
Value Description
list-style-type the type of list-item marker.
list-style-position specifies where to place the marker
list-style-image specifies the type of list-item marker
initial sets this property to its default value
inherit inherits this property from its parent element

Section 34.1: Bullet Position

A list consists of <li> elements inside a containing element (<ul> or <ol>). Both the list items and the container can
have margins and paddings which influence the exact position of the list item content in the document. The default
values for the margin and padding may be different for each browser. In order to get the same layout cross-
browser, these need to be set specifically.

Each list item gets a 'marker box', which contains the bullet marker. This box can either be placed inside or outside
of the list item box.

list-style-position: inside;

places the bullet within the <li> element, pushing the content to the right as needed.

list-style-position: outside;

places the bullet left of the <li> element. If there is not enough space in the padding of the containing element, the
marker box will extend to the left even if it would fall off the page.

Showing the result of inside and outside positioning: jsfiddle

Section 34.2: Removing Bullets / Numbers

Sometimes, a list should just not display any bullet points or numbers. In that case, remember to specify margin
and padding.

<ul>
<li>first item</li>
<li>second item</li>
</ul>

CSS

ul {
list-style-type: none;
}
li {
margin: 0;
padding: 0;
}

Section 34.3: Type of Bullet or Numbering

Specific for <li> tags within an unordered list (<ul>):

GoalKicker.com – CSS Notes for Professionals 173

list-style: disc; /* A filled circle (default) */
list-style: circle; /* A hollow circle */
list-style: square; /* A filled square */
list-style: '-'; /* any string */

Specific for <li> tags within an ordered list (<ol>):

list-style: decimal; /* Decimal numbers beginning with 1 (default) */

list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman; /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman; /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek; /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha; /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin; /* Uppercase letters (A., B., C., D., ...) */

Non-specific:

list-style: none; /* No visible list marker */

list-style: inherit; /* Inherits from parent */

GoalKicker.com – CSS Notes for Professionals 174

Chapter 35: Counters
Parameter Details
This is the name of the counter that needs to be created or incremented or printed. It can be any
counter-name
custom name as the developer wishes.
This integer is an optional value that when provided next to the counter name will represent the
integer initial value of the counter (in counter-set, counter-reset properties) or the value by which the
counter should be incremented (in counter-increment).
This is the initial value for all 3 counter-* properties. When this value is used for counter-
none increment, the value of none of the counters are affected. When this is used for the other two, no
counter is created.
This specifies the style in which the counter value needs to be displayed. It supports all values
counter-style supported by the list-style-type property. If none is used then the counter value is not printed
at all.
This represents the string that must be placed between the values of two different counter levels
connector-string
(like the "." in "2.1.1").

Section 35.1: Applying roman numerals styling to the counter

output
CSS
body {
counter-reset: item-counter;
}

.item {
counter-increment: item-counter;
}

.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the
output would be in roman numbers */
}

HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

In the above example, the counter's output would be displayed as I, II, III (roman numbers) instead of the usual 1, 2,
3 as the developer has explicitly specified the counter's style.

Section 35.2: Number each item using CSS Counter

CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item"
is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and
append a "." to it */
}

GoalKicker.com – CSS Notes for Professionals 175

/* just for demo */

.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}

HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

The above example numbers every "item" in the page and adds the item's number before its header (using content
property of .item-header element's :before pseudo). A live demo of this code is available here.

Section 35.3: Implementing multi-level numbering using CSS

counters
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of
counters at all higher levels are combined before printing */
}

HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>

GoalKicker.com – CSS Notes for Professionals 176

 </li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>

The above is an example of multi-level numbering using CSS counters. It makes use of the self-nesting concept of
counters. Self nesting is a concept where if an element already has a counter with the given name but is having to
create another then it creates it as a child of the existing counter. Here, the second level ul already inherits the
list-item-number counter from its parent but then has to create its own list-item-number (for its children li) and
so creates list-item-number[1] (counter for second level) and nests it under list-item-number[0] (counter for
first level). Thus it achieves the multi-level numbering.

The output is printed using the counters() function instead of the counter() function because the counters()
function is designed to prefix the value of all higher level counters (parent) when printing the output.

GoalKicker.com – CSS Notes for Professionals 177

Chapter 36: Functions
Section 36.1: calc() function
Accepts a mathematical expression and returns a numerical value.

It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to
calculate the value of an attribute.

+, -, /, and * operators can all be used, and parentheses can be added to specify the order of operations if
necessary.

Use calc() to calculate the width of a div element:

#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}

Use calc() to determine the position of a background-image:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Use calc() to determine the height of an element:

height: calc(100% - 20px);

Section 36.2: attr() function

Returns the value of an attribute of the selected element.

Below is a blockquote element which contains a character inside a data-* attribute which CSS can use (e.g. inside
the ::before and ::after pseudo-element) using this function.

<blockquote data-mark='"'></blockquote>

In the following CSS block, the character is appended before and after the text inside the element:

blockquote[data-mark]::before,
blockquote[data-mark]::after {
content: attr(data-mark);
}

Section 36.3: var() function

The var() function allows CSS variables to be accessed.

/* set a variable */
:root {

GoalKicker.com – CSS Notes for Professionals 178

 --primary-color: blue;
}

/* access variable */
selector {
color: var(--primary-color);
}

This feature is currently under development. Check caniuse.com for the latest browser support.

Section 36.4: radial-gradient() function

Creates an image representing a gradient of colors radiating from the center of the gradient

radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the
gradient, red at the center, then orange, until it is finally yellow at the edges*/

Section 36.5: linear-gradient() function

Creates a image representing a linear gradient of colors.

linear-gradient( 0deg, red, yellow 50%, blue);

This creates a gradient going from bottom to top, with colors starting at red, then yellow at 50%, and finishing in
blue.

GoalKicker.com – CSS Notes for Professionals 179

Chapter 37: Custom Properties (Variables)
CSS Variables allow authors to create reusable values which can be used throughout a CSS document.

For example, it's common in CSS to reuse a single color throughout a document. Prior to CSS Variables this would
mean reusing the same color value many times throughout a document. With CSS Variables the color value can be
assigned to a variable and referenced in multiple places. This makes changing values easier and is more semantic
than using traditional CSS values.

Section 37.1: Variable Color

:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
}
.Bx1 {
color: var(--red);
background: var(--grey);
border: 1px solid var(--red);
}

Section 37.2: Variable Dimensions

:root {
--W200: 200px;
--W10: 10px;
}
.Bx2 {
width: var(--W200);
height: var(--W200);
margin: var(--W10);
}

Section 37.3: Variable Cascading

CSS variables cascade in much the same way as other properties, and can be restated safely.

You can define variables multiple times and only the definition with the highest specificity will apply to the element
selected.

Assuming this HTML:

<a class="button">Button Green</a>

<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

We can write this CSS:

.button {
--color: green;
padding: .5rem;
border: 1px solid var(--color);
color: var(--color);
}

GoalKicker.com – CSS Notes for Professionals 180

.button:hover {
--color: blue;
}

.button_red {
--color: red;
}

And get this result:

Section 37.4: Valid/Invalids

Naming When naming CSS variables, it contains only letters and dashes just like other CSS properties (eg: line-
height, -moz-box-sizing) but it should start with double dashes (--)

//These are Invalids variable names

--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names

--color: red;
--bg-color: yellow
--width: 100px;

CSS Variables are case sensitive.

/* The variable names below are all different variables */

--pcolor: ;
--Pcolor: ;
--pColor: ;

Empty Vs Space

/* Invalid */
--color:;

/* Valid */
--color: ; /* space is assigned */

Concatenations

/* Invalid - CSS doesn't support concatenation*/

.logo{
--logo-url: 'logo';
background: url('assets/img/' var(--logo-url) '.png');
}

/* Invalid - CSS bug */

.logo{
--logo-url: 'assets/img/logo.png';
background: url(var(--logo-url));
}

GoalKicker.com – CSS Notes for Professionals 181

 /* Valid */
.logo{
--logo-url: url('assets/img/logo.png');
background: var(--logo-url);
}

Careful when using Units

/* Invalid */
--width: 10;
width: var(--width)px;

/* Valid */
--width: 10px;
width: var(--width);

/* Valid */
--width: 10;
width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
width: calc(1em * var(--width));

Section 37.5: With media queries

You can re-set variables within media queries and have those new values cascade wherever they are used,
something that isn't possible with pre-processor variables.

Here, a media query changes the variables used to set up a very simple grid:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
--width: 25%;
--content: 'This is desktop';
}
@media only screen and (max-width: 767px){
:root{
--width:50%;
--content: 'This is mobile';
}
}
@media only screen and (max-width: 480px){
:root{
--width:100%;
}
}

div{
width: calc(var(--width) - 20px);
height: 100px;
}
div:before{
content: var(--content);

GoalKicker.com – CSS Notes for Professionals 182

}

/* Other Styles */
body {
padding: 10px;
}

div{
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
float:left;
margin: 10px;
border: 4px solid black;
background: red;
}

You can try resizing the window in this CodePen Demo

Here's an animated screenshot of the resizing in action:

GoalKicker.com – CSS Notes for Professionals 183

Chapter 38: Single Element Shapes
Section 38.1: Trapezoid
A trapezoid can be made by a block element with zero height (height of 0px), a width greater than zero and a
border, that is transparent except for one side:

HTML:

<div class="trapezoid"></div>

CSS:

.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
}

With changing the border sides, the orientation of the trapezoid can be adjusted.

Section 38.2: Triangles

To create a CSS triangle define an element with a width and height of 0 pixels. The triangle shape will be formed
using border properties. For an element with 0 height and width the 4 borders (top, right, bottom, left) each form a
triangle. Here's an element with 0 height/width and 4 different colored borders.

By setting some borders to transparent, and others to a color we can create various triangles. For example, in the
Up triangle, we set the bottom border to the desired color, then set the left and right borders to transparent. Here's
an image with the left and right borders shaded slightly to show how the triangle is being formed.

GoalKicker.com – CSS Notes for Professionals 184

The dimensions of the triangle can be altered by changing the different border widths - taller, shorter, lopsided, etc.
The examples below all show a 50x50 pixel triangle.

Triangle - Pointing Up

<div class="triangle-up"></div>

.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Down

<div class="triangle-down"></div>

.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Right

GoalKicker.com – CSS Notes for Professionals 185

<div class="triangle-right"></div>

.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Left

<div class="triangle-left"></div>

.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 50px solid rgb(246, 156, 85);
}

Triangle - Pointing Up/Right

<div class="triangle-up-right"></div>

.triangle-up-right {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}

Triangle - Pointing Up/Left

<div class="triangle-up-left"></div>

.triangle-up-left {

GoalKicker.com – CSS Notes for Professionals 186

 width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}

Triangle - Pointing Down/Right

<div class="triangle-down-right"></div>

.triangle-down-right {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}

Triangle - Pointing Down/Left

<div class="triangle-down-left"></div>

.triangle-down-left {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}

Section 38.3: Circles and Ellipses

Circle

To create a circle, define an element with an equal width and height (a square) and then set the border-radius
property of this element to 50%.

HTML

GoalKicker.com – CSS Notes for Professionals 187

<div class="circle"></div>

CSS

.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}

Ellipse

An ellipse is similar to a circle, but with different values for width and height.

HTML

<div class="oval"></div>

CSS

.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}

Section 38.4: Bursts

A burst is similar to a star but with the points extending less distance from the body. Think of a burst shape as a
square with additional, slightly rotated, squares layered on top.

The additional squares are created using the ::before and ::after psuedo-elements.

8 Point Burst

An 8 point burst are 2 layered squares. The bottom square is the element itself, the additional square is created
using the :before pseudo-element. The bottom is rotated 20°, the top square is rotated 135°.

<div class="burst-8"></div>

.burst-8 {
background: rgb(246, 156, 85);
width: 40px;

GoalKicker.com – CSS Notes for Professionals 188

 height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}

.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}

12 Point Burst

An 12 point burst are 3 layered squares. The bottom square is the element itself, the additional squares are created
using the :before and :after pseudo-elements. The bottom is rotated 0°, the next square is rotated 30°, and the
top is rotated 60°.

<div class="burst-12"></div>

.burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
}

.burst-12::before {
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

.burst-12::after {
-ms-transform: rotate(60deg);
transform: rotate(60deg);

GoalKicker.com – CSS Notes for Professionals 189

}

Section 38.5: Square

To create a square, define an element with both a width and height. In the example below, we have an element
with a width and height of 100 pixels each.

<div class="square"></div>

.square {
width: 100px;
height: 100px;
background: rgb(246, 156, 85);
}

Section 38.6: Cube

This example shows how to create a cube using 2D transformation methods skewX() and skewY() on pseudo
elements.

HTML:

<div class="cube"></div>

CSS:

.cube {
background: #dc2e2e;
width: 100px;
height: 100px;
position: relative;
margin: 50px;
}

.cube::before {
content: '';

GoalKicker.com – CSS Notes for Professionals 190

 display: inline-block;
background: #f15757;
width: 100px;
height: 20px;
transform: skewX(-40deg);
position: absolute;
top: -20px;
left: 8px;
}

.cube::after {
content: '';
display: inline-block;
background: #9e1515;
width: 16px;
height: 100px;
transform: skewY(-50deg);
position: absolute;
top: -10px;
left: 100%;
}

See demo

Section 38.7: Pyramid

This example shows how to create a pyramid using borders and 2D transformation methods skewY() and
rotate() on pseudo elements.

HTML:

<div class="pyramid"></div>

CSS:

.pyramid {
width: 100px;
height: 200px;
position: relative;
margin: 50px;
}

.pyramid::before,.pyramid::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 50px solid;

GoalKicker.com – CSS Notes for Professionals 191

 position: absolute;
}

.pyramid::before {
border-color: transparent transparent #ff5656 transparent;
transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
border-color: transparent transparent #d64444 transparent;
transform: scaleY(2) skewY(40deg) rotate(-45deg);
}

GoalKicker.com – CSS Notes for Professionals 192