Scribd
Upload
20 views

CSS Presentation Slides

Css known

Uploaded by

questgain100
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
20 views

CSS Presentation Slides

Css known

Uploaded by

questgain100
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/ 183

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
A blue play button with a white arrow

Description automatically generated

You might also like