SlideShare a Scribd company logo
M A K E S O U R W E B S I T E L O O K L I K E A W E B S I T E
CSS
CSS
(Cascading Style Sheets)
 Describes the presentation of your HTML document.
 Our CSS code belongs in a separate document.
 Do do not work with CSS in our HTML document.
 .HTML
 .CSS
Why do we need CSS?
 To organize our website. Tells our HTML where to go
AND what to look like.
 We can make and design comment boxes
 We can change the background and color of our font.
 We can add margins and create a navigation bar.
 Makes our website look like a website
1st thing’s 1st
 We need to connect our HTML document to our CSS
document
 This is very easy, we start by opening our HTML
document.
 Inside your <head> tag is where we will write the
code linking our HTML document to our CSS
document.
The code
 <link rel="stylesheet" type="text/css" href="style.css">
 Linking a style sheet
 Giving it a type
 Telling Komodo where to find our CSS document.
What your code should look like
 <!DOCTYPE html>
 <html>
 <head>
 <title>Your Website</title>
 <link rel="stylesheet" type="text/css"
href="style.css">
 </head>
So what does CSS code look like?
 CSS needs to know what it’s editing.
 You can edit every part of your website individually if
you just tell CSS what you want to change.
 Example…
 Lets change the font color of our Header <h1>
Changing Font Color
 We know what we want to change is in-between the
<h1> and </h1> tags
 Tell CSS this by inputting this code
 h1{
Font-color:blue;
}
What did we just do?
 h1{
Font-color:blue;
}
 Selected our the header by typing h1
 We start the command with a {
 We insert the command after, Font-Color
 We place a semi colon : after the command then we
give it a value.
 To end our CSS code we need 2 things.
 Semi colon after the value ; and a closing } to end the
code
CSS isn’t that difficult.
 You need to practice and CSS will become easier.
 We find what we want to edit.
 We tell CSS how we want to edit it.

More Related Content

What's hot

Introducing the style tag 2830
Introducing the style tag  2830Introducing the style tag  2830
Introducing the style tag 2830
mdjstudios
 
Adding A Scrolling Marquee
Adding  A  Scrolling  MarqueeAdding  A  Scrolling  Marquee
Adding A Scrolling Marquee
Neil Stewart
 

What's hot (19)

Share google documents with others
Share google documents with othersShare google documents with others
Share google documents with others
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic Codding
 
Introducing the style tag 2830
Introducing the style tag  2830Introducing the style tag  2830
Introducing the style tag 2830
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
The Dark Arts of CSS
The Dark Arts of CSSThe Dark Arts of CSS
The Dark Arts of CSS
 
Basic Webpage
Basic WebpageBasic Webpage
Basic Webpage
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
How to create Custom Page Template in WordPress
How to create Custom Page Template in WordPressHow to create Custom Page Template in WordPress
How to create Custom Page Template in WordPress
 
Html css
Html cssHtml css
Html css
 
Adding A Scrolling Marquee
Adding  A  Scrolling  MarqueeAdding  A  Scrolling  Marquee
Adding A Scrolling Marquee
 
How to-inline-style-in-reactjs-
How to-inline-style-in-reactjs-How to-inline-style-in-reactjs-
How to-inline-style-in-reactjs-
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 

Viewers also liked

Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
Tanay Kumar Das
 
외도유람선『LG777』.『XYZ』하이원
외도유람선『LG777』.『XYZ』하이원외도유람선『LG777』.『XYZ』하이원
외도유람선『LG777』.『XYZ』하이원
hdflkgjdo
 
전망좋은펜션『BU797』.『COM』제주여행싸게가기
전망좋은펜션『BU797』.『COM』제주여행싸게가기전망좋은펜션『BU797』.『COM』제주여행싸게가기
전망좋은펜션『BU797』.『COM』제주여행싸게가기
hdflkgjdo
 
CIDCO Estate Management Software new
CIDCO Estate Management Software newCIDCO Estate Management Software new
CIDCO Estate Management Software new
Faiyaz Khan
 
마녀사냥
마녀사냥마녀사냥
마녀사냥
hdflkgjdo
 
ApresentaçãO Primeira AudiêNcia 1
ApresentaçãO Primeira AudiêNcia 1ApresentaçãO Primeira AudiêNcia 1
ApresentaçãO Primeira AudiêNcia 1
José Augusto Fiorin
 
Present to influence - October 2013
Present to influence - October 2013Present to influence - October 2013
Present to influence - October 2013
Joni Axon
 
Introduction to ASP .Net
Introduction to ASP .NetIntroduction to ASP .Net
Introduction to ASP .Net
ayman diab
 
анара мусина+необычный парк+ предпринематели
анара мусина+необычный парк+ предпринемателианара мусина+необычный парк+ предпринематели
анара мусина+необычный парк+ предпринематели
Anara Mussina
 

Viewers also liked (18)

Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
Ssc stenographer grade c & d exam 2012 coaching at cheap rate with free study...
 
C language
C languageC language
C language
 
외도유람선『LG777』.『XYZ』하이원
외도유람선『LG777』.『XYZ』하이원외도유람선『LG777』.『XYZ』하이원
외도유람선『LG777』.『XYZ』하이원
 
전망좋은펜션『BU797』.『COM』제주여행싸게가기
전망좋은펜션『BU797』.『COM』제주여행싸게가기전망좋은펜션『BU797』.『COM』제주여행싸게가기
전망좋은펜션『BU797』.『COM』제주여행싸게가기
 
CIDCO Estate Management Software new
CIDCO Estate Management Software newCIDCO Estate Management Software new
CIDCO Estate Management Software new
 
마녀사냥
마녀사냥마녀사냥
마녀사냥
 
ApresentaçãO Primeira AudiêNcia 1
ApresentaçãO Primeira AudiêNcia 1ApresentaçãO Primeira AudiêNcia 1
ApresentaçãO Primeira AudiêNcia 1
 
Present to influence - October 2013
Present to influence - October 2013Present to influence - October 2013
Present to influence - October 2013
 
Introduction to ASP .Net
Introduction to ASP .NetIntroduction to ASP .Net
Introduction to ASP .Net
 
Få succes med Social Selling
Få succes med Social SellingFå succes med Social Selling
Få succes med Social Selling
 
Salgstrends 2017
Salgstrends 2017  Salgstrends 2017
Salgstrends 2017
 
Introduction to asp .net
Introduction to asp .netIntroduction to asp .net
Introduction to asp .net
 
Hacemos escalada5 ºb
Hacemos escalada5 ºbHacemos escalada5 ºb
Hacemos escalada5 ºb
 
Miercoles
MiercolesMiercoles
Miercoles
 
El quijote cía
El quijote cíaEl quijote cía
El quijote cía
 
Administrasi sekolah ppt
Administrasi sekolah pptAdministrasi sekolah ppt
Administrasi sekolah ppt
 
анара мусина+необычный парк+ предпринематели
анара мусина+необычный парк+ предпринемателианара мусина+необычный парк+ предпринематели
анара мусина+необычный парк+ предпринематели
 
Y jugamos
Y jugamosY jugamos
Y jugamos
 

Similar to Css

Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
workingdev2003
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 

Similar to Css (20)

Css
CssCss
Css
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 
CSS
CSSCSS
CSS
 
Basic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligetiBasic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligeti
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
Htmlcss1
Htmlcss1Htmlcss1
Htmlcss1
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
Css
CssCss
Css
 
html-css
html-csshtml-css
html-css
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Css
CssCss
Css
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Css
CssCss
Css
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-end
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
 

More from umesh patil (20)

Ccna security
Ccna security Ccna security
Ccna security
 
Array in c language
Array in c languageArray in c language
Array in c language
 
Array in c language
Array in c language Array in c language
Array in c language
 
Jquery Preparation
Jquery PreparationJquery Preparation
Jquery Preparation
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Static and dynamic polymorphism
Static and dynamic polymorphismStatic and dynamic polymorphism
Static and dynamic polymorphism
 
C language
C language C language
C language
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Html Presentation
Html PresentationHtml Presentation
Html Presentation
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Oops and c fundamentals
Oops and c fundamentals Oops and c fundamentals
Oops and c fundamentals
 
Java script
Java scriptJava script
Java script
 
Function in c program
Function in c programFunction in c program
Function in c program
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 
Php vs asp
Php vs aspPhp vs asp
Php vs asp
 
Ccna security
Ccna security Ccna security
Ccna security
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Array in c language
Array in c language Array in c language
Array in c language
 

Recently uploaded

Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 

Recently uploaded (20)

How to Break the cycle of negative Thoughts
How to Break the cycle of negative ThoughtsHow to Break the cycle of negative Thoughts
How to Break the cycle of negative Thoughts
 
NCERT Solutions Power Sharing Class 10 Notes pdf
NCERT Solutions Power Sharing Class 10 Notes pdfNCERT Solutions Power Sharing Class 10 Notes pdf
NCERT Solutions Power Sharing Class 10 Notes pdf
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
Basic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumersBasic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumers
 
Advances in production technology of Grapes.pdf
Advances in production technology of Grapes.pdfAdvances in production technology of Grapes.pdf
Advances in production technology of Grapes.pdf
 
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
 
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptxSolid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
NLC-2024-Orientation-for-RO-SDO (1).pptx
NLC-2024-Orientation-for-RO-SDO (1).pptxNLC-2024-Orientation-for-RO-SDO (1).pptx
NLC-2024-Orientation-for-RO-SDO (1).pptx
 
The Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve ThomasonThe Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve Thomason
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI BUỔI 2) - TIẾNG ANH 8 GLOBAL SUCCESS (2 CỘT) N...
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptxMatatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
 
Introduction to Quality Improvement Essentials
Introduction to Quality Improvement EssentialsIntroduction to Quality Improvement Essentials
Introduction to Quality Improvement Essentials
 
The Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational ResourcesThe Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational Resources
 
How to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS ModuleHow to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS Module
 
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
 

Css

  • 1. M A K E S O U R W E B S I T E L O O K L I K E A W E B S I T E CSS
  • 2. CSS (Cascading Style Sheets)  Describes the presentation of your HTML document.  Our CSS code belongs in a separate document.  Do do not work with CSS in our HTML document.  .HTML  .CSS
  • 3. Why do we need CSS?  To organize our website. Tells our HTML where to go AND what to look like.  We can make and design comment boxes  We can change the background and color of our font.  We can add margins and create a navigation bar.  Makes our website look like a website
  • 4. 1st thing’s 1st  We need to connect our HTML document to our CSS document  This is very easy, we start by opening our HTML document.  Inside your <head> tag is where we will write the code linking our HTML document to our CSS document.
  • 5. The code  <link rel="stylesheet" type="text/css" href="style.css">  Linking a style sheet  Giving it a type  Telling Komodo where to find our CSS document.
  • 6. What your code should look like  <!DOCTYPE html>  <html>  <head>  <title>Your Website</title>  <link rel="stylesheet" type="text/css" href="style.css">  </head>
  • 7. So what does CSS code look like?  CSS needs to know what it’s editing.  You can edit every part of your website individually if you just tell CSS what you want to change.  Example…  Lets change the font color of our Header <h1>
  • 8. Changing Font Color  We know what we want to change is in-between the <h1> and </h1> tags  Tell CSS this by inputting this code  h1{ Font-color:blue; }
  • 9. What did we just do?  h1{ Font-color:blue; }  Selected our the header by typing h1  We start the command with a {  We insert the command after, Font-Color  We place a semi colon : after the command then we give it a value.  To end our CSS code we need 2 things.  Semi colon after the value ; and a closing } to end the code
  • 10. CSS isn’t that difficult.  You need to practice and CSS will become easier.  We find what we want to edit.  We tell CSS how we want to edit it.