Submit Search
Upload
CSS - Style your site
•
3 likes
•
1,369 views
Ramses Cabello
Follow
Brief keynote explaining CSS use and syntax.
Read less
Read more
Design
Technology
Education
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
Lebua foods of thailand-revisedv4
Lebua foods of thailand-revisedv4
lebua Hotels & Resorts
P1
P1
Heytor de Souza
Design Thinking - Overview - 05 August 2014
Design Thinking - Overview - 05 August 2014
Ian H Smith
3Com 655-0246-01
3Com 655-0246-01
savomir
Scotland
Scotland
Paulo Vaz Pato
Seis cosas que quizás no sabías de Halloween
Seis cosas que quizás no sabías de Halloween
JPEDRAZA12
United liberation movement for west papua
United liberation movement for west papua
Isco Alarcon
Doubling your sales teams productivity and active selling time
Doubling your sales teams productivity and active selling time
Heinz Marketing Inc
Recommended
Lebua foods of thailand-revisedv4
Lebua foods of thailand-revisedv4
lebua Hotels & Resorts
P1
P1
Heytor de Souza
Design Thinking - Overview - 05 August 2014
Design Thinking - Overview - 05 August 2014
Ian H Smith
3Com 655-0246-01
3Com 655-0246-01
savomir
Scotland
Scotland
Paulo Vaz Pato
Seis cosas que quizás no sabías de Halloween
Seis cosas que quizás no sabías de Halloween
JPEDRAZA12
United liberation movement for west papua
United liberation movement for west papua
Isco Alarcon
Doubling your sales teams productivity and active selling time
Doubling your sales teams productivity and active selling time
Heinz Marketing Inc
Social Media: Strategies That Fell Short
Social Media: Strategies That Fell Short
Barbara Nixon
How to reduce professional liability associated with patient portals
How to reduce professional liability associated with patient portals
mosmedicalreview
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
social3i
INTRODUCCIÓN A LA COMPUTACIÓN
INTRODUCCIÓN A LA COMPUTACIÓN
Octavio Arias
Sample
Sample
Nishant 12 Rayan
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Isamalia Muniz
Audiens Shop
Audiens Shop
Audiens Shop
APP101_HARDY_week3_assignment
APP101_HARDY_week3_assignment
Natasha Hardy
Análisis de la pedagogía invertida como tendencia de aprendizaje
Análisis de la pedagogía invertida como tendencia de aprendizaje
Rojas Uni Yenny
NIRC_ICSI
NIRC_ICSI
New Corporate Laws Treatise(NCLT)
Konsep asuhan keperawatan Leukemia
Konsep asuhan keperawatan Leukemia
Verar Oka
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
Dr.Jose A Santos. +4500 contactos
Ict 8 css
Ict 8 css
Christian Reglos
OOP CSS Presenation
OOP CSS Presenation
RobotDeathSquad
Introduction to HTML
Introduction to HTML
Abzetdin Adamov
CSS: How To Learn Easily
CSS: How To Learn Easily
shabab shihan
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
Hardcore CSS
Hardcore CSS
PDX Web & Design
Cascading Style Sheet
Cascading Style Sheet
Meenakshi Paul
css1.ppt
css1.ppt
BalasundaramSr
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
Css Introduction
Css Introduction
SathyaseelanK1
More Related Content
Viewers also liked
Social Media: Strategies That Fell Short
Social Media: Strategies That Fell Short
Barbara Nixon
How to reduce professional liability associated with patient portals
How to reduce professional liability associated with patient portals
mosmedicalreview
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
social3i
INTRODUCCIÓN A LA COMPUTACIÓN
INTRODUCCIÓN A LA COMPUTACIÓN
Octavio Arias
Sample
Sample
Nishant 12 Rayan
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Isamalia Muniz
Audiens Shop
Audiens Shop
Audiens Shop
APP101_HARDY_week3_assignment
APP101_HARDY_week3_assignment
Natasha Hardy
Análisis de la pedagogía invertida como tendencia de aprendizaje
Análisis de la pedagogía invertida como tendencia de aprendizaje
Rojas Uni Yenny
NIRC_ICSI
NIRC_ICSI
New Corporate Laws Treatise(NCLT)
Konsep asuhan keperawatan Leukemia
Konsep asuhan keperawatan Leukemia
Verar Oka
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
Dr.Jose A Santos. +4500 contactos
Viewers also liked
(12)
Social Media: Strategies That Fell Short
Social Media: Strategies That Fell Short
How to reduce professional liability associated with patient portals
How to reduce professional liability associated with patient portals
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
Social Media Strategies (July 2011) at Seattle's School of Visual Concepts
INTRODUCCIÓN A LA COMPUTACIÓN
INTRODUCCIÓN A LA COMPUTACIÓN
Sample
Sample
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Taller4 diagnóstico de necesidades y borrador del adiestramiento (1)
Audiens Shop
Audiens Shop
APP101_HARDY_week3_assignment
APP101_HARDY_week3_assignment
Análisis de la pedagogía invertida como tendencia de aprendizaje
Análisis de la pedagogía invertida como tendencia de aprendizaje
NIRC_ICSI
NIRC_ICSI
Konsep asuhan keperawatan Leukemia
Konsep asuhan keperawatan Leukemia
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
FORCH. EL MODELO PARA EL CAMBIO AVANZADO
Similar to CSS - Style your site
Ict 8 css
Ict 8 css
Christian Reglos
OOP CSS Presenation
OOP CSS Presenation
RobotDeathSquad
Introduction to HTML
Introduction to HTML
Abzetdin Adamov
CSS: How To Learn Easily
CSS: How To Learn Easily
shabab shihan
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
Hardcore CSS
Hardcore CSS
PDX Web & Design
Cascading Style Sheet
Cascading Style Sheet
Meenakshi Paul
css1.ppt
css1.ppt
BalasundaramSr
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
Css Introduction
Css Introduction
SathyaseelanK1
Session 3
Session 3
Lại Đức Chung
Concept of CSS part 2
Concept of CSS part 2
SURBHI SAROHA
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
CSS
CSS
People Strategists
Web Typography
Web Typography
Shawn Calvert
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
CSS-part-1.ppt
CSS-part-1.ppt
AshwaniKumarYadav19
Web topic 15 1 basic css layout
Web topic 15 1 basic css layout
CK Yang
Intro to css
Intro to css
Rajashekarkorva
css-handbook
css-handbook
RaviKumar76265
Similar to CSS - Style your site
(20)
Ict 8 css
Ict 8 css
OOP CSS Presenation
OOP CSS Presenation
Introduction to HTML
Introduction to HTML
CSS: How To Learn Easily
CSS: How To Learn Easily
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Hardcore CSS
Hardcore CSS
Cascading Style Sheet
Cascading Style Sheet
css1.ppt
css1.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Css Introduction
Css Introduction
Session 3
Session 3
Concept of CSS part 2
Concept of CSS part 2
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
CSS
CSS
Web Typography
Web Typography
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
CSS-part-1.ppt
CSS-part-1.ppt
Web topic 15 1 basic css layout
Web topic 15 1 basic css layout
Intro to css
Intro to css
css-handbook
css-handbook
More from Ramses Cabello
Accessibility First
Accessibility First
Ramses Cabello
Adobe Illustrator – Minimal introduction
Adobe Illustrator – Minimal introduction
Ramses Cabello
Till Altmann - Industrial Designer in Unisto (Switzerland)
Till Altmann - Industrial Designer in Unisto (Switzerland)
Ramses Cabello
HTML+CSS Resources
HTML+CSS Resources
Ramses Cabello
Meet the grids - Web design using Grids
Meet the grids - Web design using Grids
Ramses Cabello
Introduction to HTML5+CSS
Introduction to HTML5+CSS
Ramses Cabello
More from Ramses Cabello
(6)
Accessibility First
Accessibility First
Adobe Illustrator – Minimal introduction
Adobe Illustrator – Minimal introduction
Till Altmann - Industrial Designer in Unisto (Switzerland)
Till Altmann - Industrial Designer in Unisto (Switzerland)
HTML+CSS Resources
HTML+CSS Resources
Meet the grids - Web design using Grids
Meet the grids - Web design using Grids
Introduction to HTML5+CSS
Introduction to HTML5+CSS
Recently uploaded
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
1508 A/S
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
MaryamAfzal41
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
NadaMohammed714321
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Rishabh Aryan
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
AayushChavan5
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Nitish292041
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
preetirao780
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
zdzoqco
Piece by Piece Magazine
Piece by Piece Magazine
CharlottePulte
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
DanielTamiru4
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
RMG Project Studio
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
KevinYaelJimnezSanti
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
marckustrevion
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
JIT KUMAR GUPTA
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
digital learning point
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
LucyBonelli
Map of St. Louis Parks
Map of St. Louis Parks
CharlottePulte
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
NadaMohammed714321
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
Pixeldarts
Recently uploaded
(20)
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
Piece by Piece Magazine
Piece by Piece Magazine
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
Map of St. Louis Parks
Map of St. Louis Parks
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
CSS - Style your site
1.
CSS Styling your site ramses.cabello@gmail.com
@ramsescabello
2.
CSS helps HTML
looking a lot more beautiful.
3.
each element in
the HTML body has a reference. CSS uses that reference to give attributes to it.
4.
give everything a
name. and THINK carefully about it.
5.
there’s 3 main
kind of references. elements (body, ...)
6.
there’s 3 main
kind of references. elements (body, ...) classes (p, div, ul ...)
7.
there’s 3 main
kind of references. elements bodyv classes .name identity #name
8.
let’s see an
example.
9.
class=”black” .black .black .black
10.
class=”black” id=”roundcorners” .black .black #roundcorners .black
11.
let’s see an
example.
12.
we have a
box called: example
13.
example is 650px
wide
14.
example is 325px
tall
15.
example is black
16.
example is at
the bottom
17.
example has no
border
18.
example has rounded corners
of 50px
19.
example is not
visible.
20.
CSS gives visual
attributes. background color border position font-face shadow gradient width
21.
CSS gives visual
attributes. CSS declares behaviours.
22.
CSS gives visual
attributes. CSS declares behaviours.
23.
CSS gives visual
attributes. CSS declares behaviours.
24.
summing up CSS gives
style. CSS calls elements from the body you decide the name of the elements element > classes > id Feel free to play with the CSS.
25.
css syntax reference { attribute:
value; }
26.
css syntax body { background-color:
#000000; }
27.
css syntax .cita { background-color:
#FFFFFF; color: #000000; border-left: 3px solid #555555; } <p class=”cita”> “Keep it simple” - Anonymous </p>
28.
css syntax “Keep it
simple” - Anonymous
29.
css syntax #nueva { background-color:
#29ABE2; border-left: #2E3192; } <p class=”cita” id=”nueva”> “Keep it simple” - Anonymous </p>
30.
“Keep it simple”
- Anonymous css syntax
31.
online resources http://css3generator.com/
32.
online resources http://www.w3schools.com/css/
33.
online resources http://realworldcss3.com/resources/
34.
#ProdGrafULPGC
Download now