Scribd
Upload
13 views

CSS Presentation Slides

The document presents a list titled 'Dan’s Top 5 Best Things on the Internet', which includes humorous entries such as 'Boaty McBoat Face', 'Hamish and Andy', and 'Michael McIntyre'. It is formatted with HTML elements like headings and lists. The content is primarily focused on sharing funny internet phenomena.

Uploaded by

djubal-ph
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

CSS Presentation Slides

The document presents a list titled 'Dan’s Top 5 Best Things on the Internet', which includes humorous entries such as 'Boaty McBoat Face', 'Hamish and Andy', and 'Michael McIntyre'. It is formatted with HTML elements like headings and lists. The content is primarily focused on sharing funny internet phenomena.

Uploaded by

djubal-ph
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 467

futurefullstack.

com
futurefullstack.com
futurefullstack.com

<nav> <img> <a>


<a>

<section>

<h1>
<span>

<p>
<a> <a>
futurefullstack.com

<h1> <p> <ul> <li> <a> <img> <br> <input>


futurefullstack.com

<nav> <img> <a>


<a>

<section>

<h1>
<span> <h1>

<p>
<p>
<a> <a>
<h1>
Dan’s Top 5 Best Things on the Internet
<p>
This is my list of the funniest things I’ve seen on the internet

1. Boaty McBoat Face <li>

2. Hamish and Andy <li>

3. Michael McIntyre <li>


4. Corey Worthington <li>
5. Dollarydoos <li>

<img> <ol>
<div>
<h1>
Dan’s Top 5 Best Things on the Internet
<p>
This is my list of the funniest things I’ve seen on the internet
<span>

1. Boaty McBoat Face <li>

2. Hamish and Andy <li>

3. Michael McIntyre <li>


4. Corey Worthington <li>
5. Dollarydoos <li>

<img> <ol>
<section>
futurefullstack.com
Dan’s Top 5 Best Things on the Internet

This is my list of the funniest things I’ve seen on the internet

1. Boaty McBoat Face


2. Hamish and Andy
3. Michael McIntyre
4. Corey Worthington
5. Dollarydoos
futurefullstack.com
Dan’s Top 5 Best Things on the Internet

This is my list of the funniest things I’ve seen on the internet

1. Boaty McBoat Face


2. Hamish and Andy
3. Michael McIntyre
4. Corey Worthington
5. Dollarydoos
futurefullstack.com
Dan’s Top 5 Best
Things on the Internet

This is my list of the funniest


things I’ve seen on the internet

1. Boaty McBoat Face


2. Hamish and Andy
3. Michael McIntyre
4. Corey Worthington
5. Dollarydoos
futurefullstack.com

h1 {
font-size : 20px ;
color: blue;
}
futurefullstack.com

h1 {
font-size : 20px ;
color: blue;
}
futurefullstack.com
futurefullstack.com
futurefullstack.com

<h1 style=”color: blue;” >Welcome aboard</h1>


futurefullstack.com

<head>
<title>Document</title>
<style>
h1 {
font-size: 20px;
color: blue;
}
</style>

</head>
futurefullstack.com

index.html app.css
futurefullstack.com
futurefullstack.com

font-weight: bold;

100 200 300 400 500 600 700 800 900


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

text-decoration: underline ; blue ; dotted ;

line-through overline named hex rgb double dotted wavy


underline none solid dashed
futurefullstack.com
futurefullstack.com

font-style: italic;

normal italic oblique oblique 10deg


futurefullstack.com
futurefullstack.com

text-transform: uppercase;

none uppercase lowercase capitalize


futurefullstack.com
futurefullstack.com
futurefullstack.com

list-style: disc;

none disc circle square decimal


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

text-align: center;

left center
right justify
futurefullstack.com

Playing with CSS Link


<h1> <a>
futurefullstack.com
futurefullstack.com
futurefullstack.com

line-height: 1.5;

unitless percentage
pixels ems
futurefullstack.com
futurefullstack.com
futurefullstack.com

letter-spacing: 8px;

pixels percentage ems


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

font-size: 16px;

px pt in cm mm % em rem vh vw
futurefullstack.com
futurefullstack.com
futurefullstack.com

font-size: 10px;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

62px h1

48px h2

40px h3

32px h4

24px h5

20px p
16px a

12px small
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

Text Text Text Text Text


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

font-family: ‘Tahoma’ ; , sans-serif


futurefullstack.com

Hella sustainable big mood typewriter


Hella sustainable big mood typewriter
Hella sustainable big mood typewriter
Hella sustainable big mood typewriter
Hella sustainable big mood typewriter
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

2 4 9 F 99
1 6
1 0 0
1
1 0
1
futurefullstack.com

rgb(152, 116, 249) #9874F9


futurefullstack.com

rgb(0, 0, 0) #000000 #000

rgb(64, 64 ,64) #404040

rgb(136, 136, 136) #888888 #888


22 aa 66 #2a6
rgb(192, 192, 192) #C0C0C0

rgb(255,255, 255) #ffffff #fff


futurefullstack.com

color: #9874F9;

rgb rgba
hex hsl
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

Arctic Moonlight Iris Dawn Pebble


#d0ebff #e5dbff #ffe8cc #f1f3f5

Sky Blue Lavender Pumpkin Slate


#339af0 #9775fa #ff922b #495057

Deep Sea Velvet Night Lava Graphite


#1c7ed6 #7048e8 #f76707 #212529
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

font-weight line-height font-family color font-size

letter-spacing
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

62px h1

48px h2

40px h3

32px h4

24px h5

20px p
16px a

12px small
futurefullstack.com

Arctic Moonlight Iris Dawn Pebble


#d0ebff #e5dbff #ffe8cc #f1f3f5

Sky Blue Lavender Pumpkin Slate


#339af0 #9775fa #ff922b #495057

Deep Sea Velvet Night Lava Graphite


#1c7ed6 #7048e8 #f76707 #212529
futurefullstack.com
futurefullstack.com

# ul > li a:hover ::before


futurefullstack.com
futurefullstack.com

h1

a
futurefullstack.com
futurefullstack.com

app.css
index.html

app2.css
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

app.css
index.html
futurefullstack.com
futurefullstack.com
futurefullstack.com

app.css

index.html
futurefullstack.com

app.css
index.html
futurefullstack.com
futurefullstack.com

Get Started Get Started


futurefullstack.com

Get Started Get Started


futurefullstack.com

h1
.gradient
futurefullstack.com
futurefullstack.com

a : hover
futurefullstack.com

a:link a:visited a:hover a:active


futurefullstack.com
futurefullstack.com

li:first-child li:last-child li:nth-child(n)


futurefullstack.com

div p div > p h1 + p h1 ~ p


futurefullstack.com

div p
futurefullstack.com

div > p
futurefullstack.com

h1 + p
futurefullstack.com

h1 ~ p
futurefullstack.com
futurefullstack.com
futurefullstack.com

Club Wins Draws GD

Arsenal 7 2 3

Man City 5 4 20

Liverpool 5 4 8
futurefullstack.com
futurefullstack.com

Selector ID Class & Pseudo-class Type

#heading

.textbox .large

div div .large

div div h1
futurefullstack.com

.white

h2
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

color font-weight line-height

font-family font-style text-align

font-size letter-spacing text-transform


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

<h1> Street art text-align: center;

<p> Bespoke sustainable text-align: center;

<a> meditation text-align: center;


futurefullstack.com

<div> text-align: center;

<h1> Street art

<p> Bespoke sustainable

<a> meditation
futurefullstack.com

<div> text-align: center;

<h1> Street art

<p> Bespoke sustainable

<a> meditation
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

h2 ::first-letter
futurefullstack.com

::first-letter ::selection ::before

::first-line ::after
futurefullstack.com
futurefullstack.com
futurefullstack.com

h2

a
futurefullstack.com

div

See live demo


futurefullstack.com

See live demo


futurefullstack.com
futurefullstack.com
futurefullstack.com

background-color: #339af0;

rgb rgba
hex hsl
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

color: #339af0; background-color: #339af0;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

width: 500px; height: 100px;


futurefullstack.com

h1 p ul li div section
futurefullstack.com
futurefullstack.com

img span

input a

select sub

textarea sup

button
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

padding-left: 10px;
futurefullstack.com

padding: 20px; padding: 10px 20px;

padding: 10px 20px 5px; padding: 10px 20px 5px 15px;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

border-width: 5px; border-style: solid; border-color: red;

0px none element color

px em rem dotted dashed rgb hex


solid double
futurefullstack.com

border: 5px solid red;


futurefullstack.com

border-top: 6px solid purple; border-right: 2px dashed blue;

border-bottom: 1px dotted red; border-left: 10px double green;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

Get Started Get Started


futurefullstack.com
futurefullstack.com
futurefullstack.com

border-radius: 12px;

px em rem %
futurefullstack.com

border-radius: 10px; border-radius: 20px;


futurefullstack.com

border-radius: 10px; border-radius: 20px;


futurefullstack.com

border-radius: 50px;
futurefullstack.com

border-radius: 50px;
futurefullstack.com

border-radius: 50px;
futurefullstack.com

border-radius: 50px;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

Read more
futurefullstack.com
futurefullstack.com

box-sizing: border-box;

context-box border-box
futurefullstack.com

width: 500px;

width: 500px;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

margin-top: 5px;

margin-right: 20px;

margin-bottom: 5px;

margin-left: 20px;
futurefullstack.com

margin: 20px; margin: 10px 20px;

margin: 10px 20px 5px; margin: 10px 20px 5px 15px;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

5px
10px

15px
20px
25px
30px
40px
50px
60px
70px
80px
90px
100px
125px
150px
200px
250px
300px
400px
500px
futurefullstack.com

<h1> <p> <ul> <li> <a> <img> <br> <input>


futurefullstack.com
futurefullstack.com
futurefullstack.com

display: block;

block inline inline-block flex grid


futurefullstack.com

display: block; display: inline-block; display: inline;


futurefullstack.com
futurefullstack.com
futurefullstack.com

<a> <span> <sub> <sup> <img> <input> <select> <textarea>


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

<body> <h1> <p> <ol> <ul>


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

height: auto;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

width: 500px; max-width: 500px;


futurefullstack.com

<h1> <div> <a> <span> <img> <input>


futurefullstack.com

width: 1200px; max-width: 1200px;


futurefullstack.com
futurefullstack.com
futurefullstack.com

width: 1200px; max-width: 1200px;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

width: 500px; max-width: 500px; min-width: 500px;


futurefullstack.com

<h1> <div> <a> <span> <img> <input>


futurefullstack.com

width: 1200px; min-width: 1200px;


futurefullstack.com
futurefullstack.com
futurefullstack.com

no width width: 300px; min-width: 300px;

Short Text Short Text Short Text

Some Longer Text Some Longer Some Longer Text


Text
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

height: 500px; max-height: 500px; min-height: 500px;


futurefullstack.com

max-height min-height min-width max-width


futurefullstack.com
futurefullstack.com

max-height: 300px;
futurefullstack.com

overflow: hidden;

visible scroll
hidden auto
futurefullstack.com
futurefullstack.com

min-height: 800px;
futurefullstack.com
futurefullstack.com
futurefullstack.com

px pt in cm mm % em rem vh vw
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

width height margin padding


line-height

SOME TEXT
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

max-width: 1200px;
futurefullstack.com
futurefullstack.com
futurefullstack.com

border-radius: 60px; border-radius: 50%;

border-radius: 20px; border-radius: 50%;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

font-size width
line-height height
letter-spacing margin
padding
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

--primary: #339af0; background-color: var(--primary);


futurefullstack.com
futurefullstack.com
futurefullstack.com

calc((100%/3) - 50px))
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

display: flex;

block inline inline-block flex grid


futurefullstack.com

display: block; display: flex;


futurefullstack.com
futurefullstack.com

flex-direction: row; flex-direction: column; flex-direction: column-reverse;

flex-direction: row-reverse;
futurefullstack.com

flex-direction: row;
futurefullstack.com

flex-direction: column;
futurefullstack.com
futurefullstack.com

<div>

<img>

<h1> Mindful living for the digital world

<p> The ultimate bullet journal app

<a> Get started Learn more


futurefullstack.com

text-align: center;
<div>

Mindful living for the digital world

The ultimate bullet journal app

Get started Learn more


futurefullstack.com

display: flex;
flex-direction: column

<img>

<h1> Mindful living for the digital world

<p> The ultimate bullet journal app

<a> Get started

<a> Learn more


futurefullstack.com

text-align: center; text-align: center;

Mindful living for the digital world Mindful living for the digital world

The ultimate bullet journal app The ultimate bullet journal app

Get started Learn more Get started

Learn more
futurefullstack.com
futurefullstack.com
futurefullstack.com

justify-content: flex-start;
futurefullstack.com

justify-content: flex-start; justify-content: space-between;

justify-content: flex-end; justify-content: space-around;

justify-content: center; justify-content: space-evenly;


futurefullstack.com

flex-direction: row; flex-direction: column;


justify-content: center; justify-content: center;
futurefullstack.com

flex-direction: column; flex-direction: column;

justify-content: center; justify-content: center;


futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
CODE CREW joincodecrew.com

align-items: stretch;
CODE CREW joincodecrew.com

align-items: stretch;

align-items: center;
align-items: flex-start;

align-items: baseline;
align-items: flex-end;

A B C D
CODE CREW joincodecrew.com

align-items: stretch;

align-items: center;
align-items: flex-start;

align-items: baseline;
align-items: flex-end;

A B C D
CODE CREW joincodecrew.com

align-items: stretch; align-items: flex-end;

align-items: flex-start; baseline; align-items: center;


CODE CREW joincodecrew.com

align-items: stretch; align-items: flex-end;

align-items: flex-start; baseline; align-items: center;


CODE CREW joincodecrew.com
CODE CREW joincodecrew.com
CODE CREW joincodecrew.com
CODE CREW joincodecrew.com
CODE CREW joincodecrew.com
futurefullstack.com
futurefullstack.com

gap: 24px;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

justify-content: center;

margin: 0 auto; align-items: center;


futurefullstack.com

padding: 0 200px; padding: 0 200px;


futurefullstack.com

align-items: center;

justify-content: center;
futurefullstack.com

padding: 200px 0; padding: 200px 0;


futurefullstack.com

margin: 0 auto; justify-content: center;


align-items: center;

padding: 0 200px;

justify-content: center;
align-items: center;

padding: 200px 0;
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com
futurefullstack.com

display: flex; flex-basis: flex;


flex-direction: column; flex-grow: 0;
justify-content: space-between; flex-shrink: 1;
align-items: center; align-self: center;
gap: 2rem; order: 2;
futurefullstack.com

flex-grow: 0;
futurefullstack.com

flex-grow: 0;
futurefullstack.com

flex-grow: 1; flex-grow: 2;

flex-grow: 0; flex-grow: 0;
futurefullstack.com

flex-shrink: 1;
futurefullstack.com

flex-shrink: 2; flex-shrink: 6;

flex-shrink: 1; flex-shrink: 1;
futurefullstack.com

align-self: flex-end;
futurefullstack.com

align-self: flex-end;
futurefullstack.com

align-self: auto; align-self: flex-end;

align-self: stretch; align-self: center;

align-items: flex-end;
align-self: flex-start;
align-self: baseline;

A C D
futurefullstack.com

order: 0;

0 0 0 0 -1 0 0 1
futurefullstack.com

flex-shrink: 1; flex-shrink: 0;
futurefullstack.com

flex-wrap: wrap;

no wrap wrap wrap-reverse


futurefullstack.com
futurefullstack.com

align-content: flex-start;
futurefullstack.com

align-content: stretch; align-content: center;

align-content: flex-start; align-content: space-between;

align-content: flex-end; align-content: space-around;


futurefullstack.com
A blue play button with a white arrow

Description automatically generated

You might also like