Front-End CSS 1

CSS Basics
What is CSS?
Cascading Style Sheets is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML.
CSS Rules
(almost) everything you do in CSS follow this basic pattern:
selector {
property: value;
}
Make all <p> elements purple:

p{
color: purple;
}
Make all image elements 100pixels wide and 200 pixels tall.
img {
width: 100px;
height: 200px;
}
Much more complicated. Select every other text input and give it a red border:
input[type=”text”]:nth-of-type(2n) {
border: 2px solid red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Including Styles Correctly
Inline Styles
You can write your styles directly inline on each element, but this is not a good idea most of the time.
<h1 style="color: red;">This is my heading.</h1>
The <style> element

You can write your styles inside of a <style> element. This is easy, but it makes it impossible to share
styles between documents. Not recommended either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>This is my heading.</h1>
</body>
</html>
External Stylesheet
Write your styles in a .css file, and then include it using a <link> in the head of your document.
Recommended!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
h1 {
color: red;
}
Color and Background-color properties
The color CSS property sets the foreground color value of an element's text and text decorations, and sets
the <currentcolor> value. currentcolor may be used as an indirect value on other properties and is the
default for other color properties, such as border-color.
h1 {
color: red;
}
The background-color CSS property sets the background color of an element.
body {
background-color: gray;
}
Color Systems
https://htmlcolorcodes.com/color-names/
https://htmlcolorcodes.com/color-picker/
Named Colors
Hex
RGB
Common Text Properties
The text-align CSS property sets the horizontal alignment of the content inside a block element or table-
cell box. This means it works like vertical-align but in the horizontal direction.
/* Keyword values */
text-align: left; default
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
h1 {
text-align: center;
}
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on
the font-family that is currently set.
/* Keyword values */
font-weight: normal;
font-weight: bold;
/* Keyword values relative to the parent */

font-weight: lighter;
font-weight: bolder;
/* Numeric keyword values */

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;
h1 {
text-align: center;
font-weight: 100;
}
The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a
shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-
decoration-thickness property.
text-decoration: underline;
text-decoration: overline red;
text-decoration: line-through;
text-decoration: none;
h1 {
text-align: center;
}
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between
lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On
non-replaced inline elements, it specifies the height that is used to calculate line box height.
/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied

by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
p {
line-height: 2;
}
The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is
added to the natural spacing between characters while rendering the text. Positive values of letter-spacing
causes characters to spread farther apart, while negative values of letter-spacing bring characters closer
together.
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
h1 {
text-align: center;
letter-spacing: 3px;
}
p {
line-height: 2;
}
Font Size Basics and Pixels
The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the
font size-relative <length> units, such as em, ex, and so forth.
There are two types of length units: absolute and relative.
Absolute Lengths
The absolute length units are fixed, and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such as for print layout.
Unit Description
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)
PX – by far the most used absolute unit.
1 px does not necessarily equal the width of exactly one pixel. Not recommended for responsive websites.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better
between different rendering medium.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
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
% Relative to the parent element
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
Font Family
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic
family names for the selected element.
/* A font family name and a generic family name */

font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */

font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;
https://www.cssfontstack.com/
h1 {
font-family: Arial, Helvetica, sans-serif;
}
CSS Selectors
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the
browser which HTML elements should be selected to have the CSS property values inside the rule applied
to them. – MDN
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
</head>
<body>
<nav>
<label for="search">Search</label>
<input type="text" placeholder="search" id="search">
<button>Log In</button>
<button id="signup">Sign Up</button>
</nav>
<main>
<h1>Popular memes</h1>
<section class="post">
<span>Posted by: <a href="">Poster</a></span>
<h2>Look at this <span class="tag">meme</span></h2>
<button>+Vote</button>
</section>
<hr>
<span>Posted by: <a href="">Poster2</a></span>
</section>
<hr>
<span>Posted by: <a href="">Poster3</a></span>
</section>
<hr>
</main>
<footer>
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<a href="#license">Content is available under these licenses.</a>
</footer>
</body>
</html>
Universal and Element Selectors

Basic CSS Rule:
selector {
property: value;
}
Universal Selector
-selects everything
-The CSS universal selector (*) matches elements of any type.
* {
color: red;
}
* {
background-color: cyan;
}
Element Selector
-The element selector selects HTML elements based on the element name.
button {
font-size: 30px;
}
h1,
h2 {
color: red;
}
ID Selector
-The CSS ID selector matches an element based on the value of the element's id attribute. In order for the
element to be selected, its id attribute must match exactly the value given in the selector.
-Select the element with id of ‘signup’
-ID name should be unique or should be used once.
https://coolors.co/palettes/trending -color palette website.
Class Selector
-select elements with class of ‘complete’
-The class selector is a way to select all the elements with the specified class name and apply styles to
each of the matching elements.
-Similar with ID, but class name can be used multiple times.
span {
color: red;
}
.tag {
background-color: #606c38;
color: #e5e5e5;
font-size: 16px;
}
The Descendant Selector

-Select all <a>s that are nested inside an <li>
-The descendant combinator — typically represented by a single space ( ) character — combines two
selectors such that elements matched by the second selector are selected if they have an ancestor (parent,
parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a
descendant combinator are called descendant selectors.
span a {
color: #606c38;
}
Or to be more specific which should be selected

section span a {
color: #606c38;
}
Or
.post span a {
color: #606c38;
}
footer a {
color: red;
}
Adjacent Selector
-The adjacent sibling combinator (+) separates two selectors and matches the second element only if it
immediately follows the first element, and both are children of the same parent element.
-Select only the paragraphs that are immediately preceded by an <h1>
h1 + p {
color: red;
}
input + button {
background-color: pink;
}
h2 + button {
font-size: 20px;
background-color: magenta;
}
Direct-Descendant Selector
-select only the <li>s that are direct children of a <div> element
div > li {
color: white;
}
footer > a {
color: #283618;
}
The Attribute Selector

-The CSS attribute selector matches elements based on the presence or value of a given attribute.
-Select all input elements where the type attribute is set to “text”
input[type=”text”] {
width: 300px;
color: yellow;
}
section[class="post"] {
background-color: purple;
}
Pseudo Classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected
element(s).
:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()
:hover
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but
does not necessarily activate it. It is generally triggered when the user hovers over an element with the
cursor (mouse pointer).
button:hover {
background-color: #e63946;
color: #f1faee;
}
:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
.post button:active {
background-color: #ffb703;
}
:checked
The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input
type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
<input type="checkbox" id="check">

<label for="check">Test</label>
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px red;
}
input[type="checkbox"]:checked + label {
color: blue;
}
:nth-of-type()
The :nth-of-type() CSS pseudo-class matches elements of a given type (tag name), based on their position
among a group of siblings.
Code below will select the 2nd

.post:nth-of-type(2) {
background-color: #b7b7a4;
}
Code below will select every 2nd

.post:nth-of-type(2n) {
background-color: #b7b7a4;
}
Pseudo Elements
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected
element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
::after
::before
::first-letter
::first-line
::selection
::first-letter
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level
element, but only when not preceded by other content (such as images or inline tables).
h2::first-letter {
font-size: 50px;
}
::first-line
The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. Note that the
length of the first line depends on many factors, including the width of the element, the width of the
document, and the font size of the text.
p::first-line {
color: red;
}
::selection
The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by
the user (such as clicking and dragging the mouse across text).
p::selection {
color: blue;
}
::selection {
color: blue;
}
The CSS Cascade

The order your styles are declared in and linked to matters.
The order matters.
h1 {
color: blue;
}
h1 {
color: red;
}
What is CSS specificity?

What happens when conflicting styles target the same elements?
Specificity is how browsers decide which CSS property values are the most relevant to an element and,
therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts
of CSS selectors.
https://www.codecaptain.io/tools/css-specificity-calculator
Inline Styles and Important
Inline style is more specific than the following:
-element and pseudo-element selectors
-class, attribute, & pseudo class selectors
-ID selectors
<h1 style="color: green;">Popular memes</h1>
But avoid using inline styles.
The !important rule in CSS is used to add more importance to a property/value than normal.
This is also not recommended, but it’s important that you guys will know it.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on
that element!
h1 {
color: blue !important;
}
CSS Inheritance
Inheritance in CSS means that an element's style values are copied from its parent element. Inheritance
allows us to keep styles consistent throughout a website without having to repeat them in our code.
body {
color: purple;
}
section {
color: aqua;
}
form {
color: green;
}
button,
input[type="text"] {
color: inherit;
}
The CSS Box Model
When laying out a document, the browser's rendering engine represents each element as a rectangular
box according to the standard CSS basic box model. CSS determines the size, position, and properties
(color, background, border size, etc.) of these boxes.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge,
padding edge, border edge, and margin edge.
Width and Height

The width CSS property sets an element's width. By default, it sets the width of the content area, but if
box-sizing is set to border-box, it sets the width of the border area.
The height CSS property specifies the height of an element. By default, the property defines the height of
the content area. If box-sizing is set to border-box, however, it instead determines the height of the
border area.
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vel quidem
obcaecati nemo reiciendis dignissimos perferendis aliquam delectus numquam fugit.
</div>
</div>
</div>
</body>
div {
width: 200px;
height: 200px;
background-color: yellow;
}
-add background-color to show them that the bg-color is not going all over the page.
Border and Border-Radius

-The border shorthand CSS property sets an element's border. It sets the values of border-width, border-
style, and border-color.
-Border around the contents.
Border properties (the important ones)

border-width - controls the thickness of the border.
border-color – controls the color of the border.
border-style – controls the line style: dashed, solid, etc.
<body>
<div id="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem v
el quidem obcaecati nemo reiciendis dignissimos perferendis aliquam delectus numq
uam fugit.</div>
uam fugit.</div>
uam fugit.</div>
</body>
div {
width: 200px;
height: 200px;
color: white;
}
#div1 {
background-color: red;
border-width: 5px;
border-color: black;
border-style: solid;
box-sizing: border-box;
}
#div2 {
background-color: blue;
border: 5px yellow dashed;
}
#div3 {
background-color: green;
border-left-width: 10px;
border-left-color: orange;
border-left-style: solid;
}
Border-radius
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a
single radius to make circular corners, or two radii to make elliptical corners.
#div1 {
background-color: red;
border-width: 5px;
border-color: black;
border-style: solid;
box-sizing: border-box;
border-radius: 5%;
}
Padding
-The padding CSS shorthand property sets the padding area on all four sides of an element at once.
-Space between the content and border.
Individual properties
padding-left
padding-right
padding-bottom
padding-top
Vertical | Horizontal
padding: 5px 10px;
Top | Horizontal | Bottom

padding: 1px 2px 2px;
Top | Right | Bottom | Left

padding: 5px 1px 0 2px;
Shorthand property
padding – set all four sides at once.
padding: 10px;
Margin
-The margin CSS shorthand property sets the margin area on all four sides of an element.
-Space between box model/contents.
Individual properties
margin-left
margin-right
margin-bottom
margin-top
Vertical | Horizontal
margin: 5px 10px;
Top | Horizontal | Bottom

margin: 1px 2px 2px;
Top | Right | Bottom | Left

margin: 5px 1px 0 2px;
Shorthand property
margin – set all four sides at once.
margin: 10px;
div {
margin-top: 30px;
}
Display Property
The display CSS property sets whether an element is treated as a block or inline element and the layout
used for its children, such as flow layout, grid, or flex.
Display Property
Inline – width and height are ignored. Margin and padding push elements away horizontally, but not
vertically.
Block – block elements break the flow of a document. Width, height, margin, and padding are respected.
Inline-block – behaved like an inline element except width, height, margin, and padding are respected.
<h1>This is my 1st heading</h1>

<h1>This is my 2nd heading</h1>
<span>I am the 1st span</span>
<span>I am the 2nd span</span>
h1 {
border: 1px solid black;
}
span {
background-color: turquoise;
}
h1 {
display: inline;
}
span {
display: block;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus recusandae q
uisquam, voluptates rerum ullam repudiandae, commodi distinctio nobis cum delectu
s necessitatibus quaerat ab eaque modi inventore debitis totam dicta, dolore qui
culpa. Distinctio, facere. <span>I AM SPAN!</span> Ea consequatur illo laudantium
fugit molestiae sit eaque possimus officiis deserunt minus placeat, dolores iste
quidem.</p>
span {
/* background-color: magenta; */
width: 500px;
padding: 50px;
margin: 20px;
}
<div></div>
<div></div>
<div></div>
div {
height: 200px;
width: 200px;
display: inline-block;
margin: 50px;
}
div {
height: 200px;
width: 200px;
display: none;
margin: 50px;
}
CSS Units
Percentages – percentages are always relative to some other value.

Sometimes, it is a value from the parent and other times it is a value from the element itself.
width: 50% - half the width of the parent.

line-height: 50% - half the font-size of the element itself.
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
#parent {
height: 500px;
width: 500px;
background-color: aqua;
}
#child {
height: 50%;
width: 50%;
background-color: gray;
}
#grandchild {
height: 50%;
width: 50%;
background-color: white;
}
<h1>This is my heading</h1>
h1 {
font-size: 50px;
line-height: 200%; /* This will double the line-height */
}
EM
Ems are relative units.
With font-size, 1 em equals the font-size of the parent. 2ems is twice the font-size of the parent, etc.
With other properties, 1em is equal the computed font-size of the element itself.
<article>
<h2>I am heading h2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam doloru
m exercitationem quibusdam totam doloribus rerum quae beatae aliquam, molestiae n
ulla. Omnis provident deleniti perspiciatis, cupiditate, similique sequi itaque q
uae consectetur explicabo vero nisi eum autem, a sapiente nulla amet veritatis?</
p>
</article>
article {
font-size: 32px;
}
h2 {
font-size: 2em;
}
p {
font-size: 0.5em;
}
h2 {
font-size: 2em;
margin-left: 1em; /* 1em here is actually the size of font-
size: 2em. Which is technically, 64px. */
}
-Issue when using EM.

-add uls inside the article
<ul>
<li>
red
<ul>
<li>
dark red
<ul>
<li>darker red</li>
</ul>
</li>
<li>light red</li>
</ul>
</li>
<li>blue</li>
<li>green</li>
</ul>
ul {
font-size: 1.5em;
}
-Other’s font-size get bigger because the size gets stacked. For example, first ul has the font-size of 1.5em
= 48px. For the other nested ul, it will be 1.5 *48px, and it keeps going. Then, this will lead us to REM.
REM
Root Ems – relative to the root html element’s font-size. Often easier to work with.
If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.
<article id="rems">
<ul>
<li>
red
<ul>
<li>
dark red
<ul>
<li>darker red</li>
</ul>
</li>
<li>light red</li>
</ul>
</li>
<li>blue</li>
<li>green</li>
</ul>
</article>
html {
font-size: 60px;
}
#rems ul {
font-size: 1rem;
}
Other CSS Properties
Opacity and Alpha Channel
Alpha Channel – value of 0-1
<section>
<div id="rgba">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis maiores,
modi inventore accusantium, nam fugit quod at amet quos, ratione magni veniam et
enim quibusdam delectus! Molestias deserunt praesentium excepturi.
</div>
</section>
section {
width: 500px;
height: 500px;
}
#rgba {
width: 50%;
height: 50%;
/* background-color: white; */
/* background-color: rgba(255, 255, 255, 0.5); */
background-color: #00cca060; /* Hex with alpha channel */
}
Opacity – value of 0 to 1. Applies to the entire element.
<section>
<div id="opacity">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis maiores,
modi inventore accusantium, nam fugit quod at amet quos, ratione magni veniam et
enim quibusdam delectus! Molestias deserunt praesentium excepturi.
</div>
</section>
#opacity {
width: 50%;
height: 50%;
background-color: yellow;
opacity: 0.5;
}
Position
-The position CSS property sets how an element is positioned in a document. The top, right, bottom, and
left properties determine the final location of positioned elements.
Starting style:
<h1>Position Property</h1>
<section id="static">
<h2>Static</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
div {
width: 100px;
height: 100px;
background-color: #3d405b;
margin: 10px;
display: inline-block;
}
#middle {
background-color: #81b29a;
}
Static - The element is positioned according to the normal flow of the document. The top, right, bottom,
left, and z-index properties have no effect. This is the default value.
#static #middle {
position: static;
top: 100px; /* this will have no effect. */
}
Relative - The element is positioned according to the normal flow of the document, and then offset
relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position
of any other elements; thus, the space given for the element in the page layout is the same as if position
were static.
<section id="relative">
<h2>Relative</h2>
<div></div>
<div></div>
</section>
#relative #middle {
position: relative; /* top, bottom, right, and left properties will have effect
. */
top: 100px; /* will add 100px space from the top. Same with other properties (b
ottom, right, left). Pushing down 100px. */
}
Absolute - The element is removed from the normal document flow, and no space is created for the
element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is
placed relative to the initial containing block. Its final position is determined by the values of top, right,
bottom, and left.
<section id="absolute">
<h2>Absolute</h2>
<div></div>
<div></div>
</section>
#absolute #middle {
position: absolute; /* the third div is behind the 2nd div. The 2nd div has bee
n removed from the normal document flow.*/
top: 50px;
left: 50px;
/* div will be positioned to its closest positioned ancestor. Otherwise, placed
relative to the initial containing block which is the body. */
}
#absolute {
position: relative;
}
#absolute #middle {
position: absolute;
left: 50px;
}
Fixed - The element is removed from the normal document flow, and no space is created for the element
in the page layout. It is positioned relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or filter property set to something other
than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.
(Note that there are browser inconsistencies with perspective and filter contributing to containing block
formation.) Its final position is determined by the values of top, right, bottom, and left.
<section id="fixed">
<h2>Fixed</h2>
<div></div>
<div></div>
</section>
#fixed #middle {
position: fixed;
top: 0;
left: 0;
/* the element will stay on its position. Add p and lorem*100 for demo */
}
Transitions
- The transition CSS property is a shorthand property for transition-property, transition-duration,
transition-timing-function, and transition-delay.
- Transitions enable you to define the transition between two states of an element. Different states may
be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
<h1>Transitions</h1>
<div class="circle"></div>
.circle {
width: 300px;
height: 300px;
transition: 1s;
}
.circle:hover {
background-color: aqua;
border-radius: 50%;
}
transition: property name | duration | timing function | delay
This property is a shorthand for the following CSS properties:
transition-delay - The transition-delay CSS property specifies the duration to wait before starting a
property's transition effect when its value changes.
transition-duration - The transition-duration CSS property sets the length of time a transition animation
should take to complete. By default, the value is 0s, meaning that no animation will occur.
transition-property - The transition-property CSS property sets the CSS properties to which a transition
effect should be applied.
transition-timing-function - The transition-timing-function CSS property sets how intermediate values are
calculated for CSS properties being affected by a transition effect.
.circle {
width: 300px;
height: 300px;
transition: background-color 1s; /* only the bg-
color will take 1s to transition */
}
.circle {
width: 300px;
height: 300px;
transition: background-color 1s 1s; /* only the bg-
color will take 1s to transition. Will add a 1s delay */
}
.circle {
width: 300px;
height: 300px;
transition: all 1s 1s; /* to specify all properties */
}
.circle {
width: 300px;
height: 300px;
transition: background-color 1s, border-radius 2s;
}
Timing-function:
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
section div {
height: 100px;
width: 100px;
margin: 20px 0;
transition: margin-left 3s;
}
section:hover div {
margin-left: 500px;
}
div:nth-of-type(1) {
transition-timing-function: ease-in;
}
transition-timing-function: ease-out;
}
transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
transition-timing-function: cubic-bezier(0.85, 0 0.15, 1);
}
Transform
-The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the
coordinate space of the CSS visual formatting model.
<section>
<h2>Transform me!</h2>
</section>
<section> 

</section>
h2 {
background-color: #2a9d8f;
border: 5px solid #264653;
color: #eae2b7;
padding: 0.7em;
width: 300px;
font-size: 1.8em;
text-align: center;
margin: 20px auto;
font-family: Courier New;
font-weight: lighter;
}
h2:nth-of-type(2n) {
background-color: #e9c46a;
}
background-color: #f4a261;
}
background-color: #e76f51;
}
rotate() - The rotate() CSS function defines a transformation that rotates an element around a fixed point
on the 2D plane, without deforming it. Its result is a <transform-function> data type.
section:first-of-type h2:nth-of-type(1) {
transform-origin: center; /* do the bottom left */
transform: rotate(180deg);
}
scale() - The scale() CSS function defines a transformation that resizes an element on the 2D plane.
Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions
at different scales. Its result is a <transform-function> data type.
transform: scale(0.5);
transform: scale(2);
transform: scale(2, 1);
}
translate() - The translate() CSS function repositions an element in the horizontal and/or vertical
directions. Its result is a <transform-function> data type.
transform: translateX(200px);
}
transform: translateY(100px);
transform: translate(-200px, 50px);
}
skew() - The skew() CSS function defines a transformation that skews an element on the 2D plane. Its
result is a <transform-function> data type.
section:nth-of-type(2) h2:nth-of-type(1) {
transform: skew(30deg);
}
transform: skew(10deg, 5deg);
}
Combination:
transform: rotate(20deg) scale(1.3);
}
transform: translateX(-500px) rotate(180deg) scaleY(1.5);
}
/* transforms the whole section */

section:nth-of-type(2) {
transform: scale(0.7) rotate(180deg);
}
Background
-The background shorthand CSS property sets all background style properties at once, such as color,
image, origin, and size, or repeat method.
<section>
</section>
section {
width: 80%;
height: 800px;
margin: 0 auto; /* to center */
}
h1 {
font-size: 100px;
color: white;
}
background-image - The background-image CSS property sets one or more background images on an
element.
section {
width: 80%;
height: 800px;
background-image: url(https://images.unsplash.com/photo-1498940757830-
82f7813bf178?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1267&q=80);
}
background-size - The background-size CSS property sets the size of the element's background image.
The image can be left to its natural size, stretched, or constrained to fit the available space.
section {
width: 80%;
height: 800px;
background-size: cover;
}
background-position - The background-position CSS property sets the initial position for each
background image. The position is relative to the position layer set by background-origin.
section {
width: 80%;
height: 800px;
background-size: cover;
background-position: bottom;
}
section {
width: 80%;
height: 800px;
background: url(https://images.unsplash.com/photo-1498940757830-
1.2.1&auto=format&fit=crop&w=1267&q=80)
no-repeat bottom/cover;
}
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use and have more than 1000 fonts to choose from.
<head>
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&disp
lay=swap" rel="stylesheet">
</head>
body {
font-family: Roboto;
}
h1 {
font-weight: 700;
}

Front-End CSS 1

Uploaded by

Copyright:

Available Formats

Front-End CSS 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Front-End CSS 1

Uploaded by

Copyright:

Available Formats

CSS Basics

Make all <p> elements purple:

Including Styles Correctly

The <style> element

The background-color CSS property sets the background color of an element.

Common Text Properties

/* Keyword values relative to the parent */

/* Numeric keyword values */

/* Unitless values: use this number multiplied

Font Size Basics and Pixels

There are two types of length units: absolute and relative.

/* A font family name and a generic family name */

/* A generic family name only */

Universal and Element Selectors

https://coolors.co/palettes/trending -color palette website.

The Descendant Selector

Or to be more specific which should be selected

The Attribute Selector

<input type="checkbox" id="check">

Code below will select the 2nd

Code below will select every 2nd

The CSS Cascade

What is CSS specificity?

<h1 style="color: green;">Popular memes</h1>

But avoid using inline styles.

Width and Height

Border and Border-Radius

Border properties (the important ones)

Top | Horizontal | Bottom

Top | Right | Bottom | Left

Top | Horizontal | Bottom

Top | Right | Bottom | Left

<h1>This is my 1st heading</h1>

Percentages – percentages are always relative to some other value.

width: 50% - half the width of the parent.

-Issue when using EM.

Other CSS Properties

Opacity and Alpha Channel

Alpha Channel – value of 0-1

Opacity – value of 0 to 1. Applies to the entire element.

transition: property name | duration | timing function | delay

This property is a shorthand for the following CSS properties:

<section>

/* transforms the whole section */

You might also like