SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Downloaden Sie, um offline zu lesen
HTML / CSS
Mai Moustafa
Senior Web Designer
eSpace

eSpace
Website layers
Behavior (JS)
Presentation (CSS)
Content (HTML)
eSpace
Website Users
Normal

Search
Engine

Disabilities

Semantic

eSpace
HTML
eSpace
What is HTML?
Hyper Text Markup Language
Link
Link

Link

eSpace
Tags

eSpace
Nested Tags

eSpace
Basic Structure

eSpace
Head

eSpace
Preview

eSpace
Body

eSpace
Preview

eSpace
Headers

eSpace
Preview

eSpace
Paragraph

eSpace
Preview

eSpace
Lists

eSpace
Preview

eSpace
Div

eSpace
Preview

eSpace
Block elements

eSpace
Inline elements

eSpace
Preview

eSpace
More Inline elements

eSpace
Preview

eSpace
Attribute

Add more info to tag

eSpace
Preview

eSpace
HTML 5 tags

eSpace
Semantic

Content

Text

Media
eSpace
CSS
eSpace
What is CSS?
Cascading Style Sheets

Styles1

Styles2

eSpace

Styles3
How to use it?

eSpace
Rules

eSpace
Selectors

p

Element

.name

Class

#name

Id
eSpace
Element Selector

eSpace
Preview

eSpace
Class Selector

eSpace
Preview

eSpace
ID Selector

eSpace
Preview

eSpace
2 Rules

eSpace
Preview

eSpace
Specificity

1

Element

10

Class

100

Id
eSpace
Class VS ID

Class

ID

•Use a lot
•Lower
specificity

•Use once
•Higher
specificity
eSpace
Descendent Selector

eSpace
Preview

eSpace
Naming

eSpace
Box Model (Block)

eSpace
Box Model (Block)

eSpace
Box Model (Block)

eSpace
Preview

eSpace
Margin collapse

eSpace
Margin collapse

eSpace
Box Model (Inline)

eSpace
Box Model (Inline)

eSpace
Preview

eSpace
Relative Position

eSpace
Absolute Position

eSpace
Fixed Position

eSpace
Float

eSpace
Float

eSpace
Assignment

eSpace
Thanks
eSpace

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmit Tyagi
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html BasicsMcSoftsis
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 

Was ist angesagt? (20)

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Html
HtmlHtml
Html
 
Javascript
JavascriptJavascript
Javascript
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 

Ähnlich wie HTML CSS Basics

Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 web design and developmentRafi Haidari
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcardsChirag Aggarwal
 
Web designing course Ooi Trainings
Web designing course Ooi TrainingsWeb designing course Ooi Trainings
Web designing course Ooi TrainingsOoi Trainings
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...Michael Posso
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 
Cegonsoft-Php training institute Bangalore
Cegonsoft-Php training institute BangaloreCegonsoft-Php training institute Bangalore
Cegonsoft-Php training institute Bangaloredhivyas19
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPressJeff Cohan
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetNeha Sharma
 
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in Pune
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in PunePHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in Pune
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in PuneCNC WEB WORLD
 

Ähnlich wie HTML CSS Basics (20)

Web 101
Web 101Web 101
Web 101
 
Lecture6 web design and development
Lecture6 web design and developmentLecture6 web design and development
Lecture6 web design and development
 
html-css-JS_3.pdf
html-css-JS_3.pdfhtml-css-JS_3.pdf
html-css-JS_3.pdf
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Php Intro
Php IntroPhp Intro
Php Intro
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
 
Web designing course Ooi Trainings
Web designing course Ooi TrainingsWeb designing course Ooi Trainings
Web designing course Ooi Trainings
 
Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
 
OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
Css
CssCss
Css
 
Cegonsoft-Php training institute Bangalore
Cegonsoft-Php training institute BangaloreCegonsoft-Php training institute Bangalore
Cegonsoft-Php training institute Bangalore
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in Pune
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in PunePHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in Pune
PHP Course in pune , PHP Training in Pimpri chinchwad ,PHP training in Pune
 

Kürzlich hochgeladen

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Kürzlich hochgeladen (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

HTML CSS Basics