SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Lecture 3
HTML/CSS – Part 2
Examples via: http://www.w3schools.com/css/css_syntax.asp
p {
color:red;
text-align:center;
}
CSS
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
#example{
color: #f4f4f6;
font-weight:bold;
}
<div id=“example”>
Lorem ipsum dolor sit amet.
</div>
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector,
the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
.example{
color: #f4f4f6;
font-weight:bold;
}
<div class=“example”>
Lorem ipsum dolor sit amet.
</div>
<div class=“example”>
Lorem ipsum dolor sit amet.
</div>
There are three types of CSS styles:
inline styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect
only the tag they are applied to.
<a href="" style="text-decoration: none;">
embedded styles
Embedded styles are styles that are embedded in the head of the document. Embedded
styles affect only the tags on the page they are embedded in.
<style type="text/css">
p { color: #00f; }
</style>
external styles
External styles are styles that are written in a separate document and then attached to
various Web documents. External style sheets can affect any document they are attached to.
<link rel="stylesheet" type="text/css" href="styles.css" />
CSS – Display Property
http://www.w3schools.com/Css/tryit.asp?filename=trycss_display
A block element is an element that takes up the full width available, and has a line break
before and after it.
An inline element only takes up as much width as necessary, and does not force line
breaks.
CSS – Position Property
The CSS positioning properties allow you to position an element. It can also place an element
behind another, and specify what should happen when an element's content is too big.
relative
A relative
positioned
element is
positioned
relative to its
normal position.
absolute
The value absolute generates an absolutely positioned box that’s
positioned relative to its containing block. The position can be specified
using one or more of the properties top, right, bottom, and left.
Absolutely positioned boxes are removed from the flow and have no
effect on later siblings. Margins on absolutely positioned boxes never
collapse with margins on other boxes.
#example{
position: absolute;
top: 10px;
left: 10px;
}
Example via: http://reference.sitepoint.com/css/position
This property specifies whether or not a box should float and, if so, if it should float to the left or
to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating
content in the normal flow will flow around it on the opposite side. The float property is ignored
for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s
applied to the root element.
CSS – Float Property
Turning off Float - Using Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Text via: http://reference.sitepoint.com/css/float & http://www.w3schools.com/css/css_float.asp
leftleft rightright
CSS – Clear Property
The clear property specifies which sides of an element where other floating elements
are not allowed.
Position: relative;
Position: absolute;

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Web 101
Web 101Web 101
Web 101
 
CSS_Dibbo
CSS_DibboCSS_Dibbo
CSS_Dibbo
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Web Development - Lecture 4
Web Development - Lecture 4Web Development - Lecture 4
Web Development - Lecture 4
 
CSS
CSSCSS
CSS
 
CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)CSS_Day_Three (W3schools)
CSS_Day_Three (W3schools)
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
 
List control
List controlList control
List control
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Web Development - Lecture 5
Web Development - Lecture 5Web Development - Lecture 5
Web Development - Lecture 5
 
Mysql Crud, Php Mysql, php, sql
Mysql Crud, Php Mysql, php, sqlMysql Crud, Php Mysql, php, sql
Mysql Crud, Php Mysql, php, sql
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
Css
CssCss
Css
 
Schemas 2 - Restricting Values
Schemas 2 - Restricting ValuesSchemas 2 - Restricting Values
Schemas 2 - Restricting Values
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3CSS Positioning and Features of CSS3
CSS Positioning and Features of CSS3
 

Andere mochten auch

Project in math
Project in mathProject in math
Project in mathazetsu70
 
The cloud is open open stack-ben-20120706-shanghai
The cloud is open open stack-ben-20120706-shanghaiThe cloud is open open stack-ben-20120706-shanghai
The cloud is open open stack-ben-20120706-shanghaiOpenCity Community
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovershstryk
 
Track2 -何斌--openstack 在京东的应用实践
Track2 -何斌--openstack 在京东的应用实践Track2 -何斌--openstack 在京东的应用实践
Track2 -何斌--openstack 在京东的应用实践OpenCity Community
 
Ne ctar openstack asia 2012 final
Ne ctar openstack asia 2012 finalNe ctar openstack asia 2012 final
Ne ctar openstack asia 2012 finalOpenCity Community
 
Tai lieu tham khao
Tai lieu tham khaoTai lieu tham khao
Tai lieu tham khaoDat Nguyen
 
Metric System Day 3.2011
Metric System Day 3.2011Metric System Day 3.2011
Metric System Day 3.2011jmori1
 
English iii rules powerpoint
English iii rules powerpointEnglish iii rules powerpoint
English iii rules powerpointafitzgee95
 
мой город
мой городмой город
мой городelenabarin
 
Pelkonen: Oppilas- ja opiskelijahuoltolaki
Pelkonen: Oppilas- ja opiskelijahuoltolakiPelkonen: Oppilas- ja opiskelijahuoltolaki
Pelkonen: Oppilas- ja opiskelijahuoltolakiKouluterveyskysely
 
Software product development services company creative technosoft systems
Software product development services company creative technosoft systemsSoftware product development services company creative technosoft systems
Software product development services company creative technosoft systemsCreative Technosoft Systems
 
Kudavi 2.29.2016
Kudavi 2.29.2016Kudavi 2.29.2016
Kudavi 2.29.2016Tom Currier
 
The prince's journey
The prince's journeyThe prince's journey
The prince's journeyMtjb Dance
 
Questão de ordem - suspeição do relator da Comissão de Impeachment
Questão de ordem - suspeição do relator da Comissão de ImpeachmentQuestão de ordem - suspeição do relator da Comissão de Impeachment
Questão de ordem - suspeição do relator da Comissão de ImpeachmentMiguel Rosario
 
Keunggulan kepimpinan rasulullah saw
Keunggulan kepimpinan rasulullah sawKeunggulan kepimpinan rasulullah saw
Keunggulan kepimpinan rasulullah sawmohamad fairuz
 
Strategies that encourage motivation and engagement
Strategies that encourage motivation and engagementStrategies that encourage motivation and engagement
Strategies that encourage motivation and engagementPeapod Ledesma
 

Andere mochten auch (20)

Project in math
Project in mathProject in math
Project in math
 
The cloud is open open stack-ben-20120706-shanghai
The cloud is open open stack-ben-20120706-shanghaiThe cloud is open open stack-ben-20120706-shanghai
The cloud is open open stack-ben-20120706-shanghai
 
Sprites rollovers
Sprites rolloversSprites rollovers
Sprites rollovers
 
Vereda
VeredaVereda
Vereda
 
Track2 -何斌--openstack 在京东的应用实践
Track2 -何斌--openstack 在京东的应用实践Track2 -何斌--openstack 在京东的应用实践
Track2 -何斌--openstack 在京东的应用实践
 
Ne ctar openstack asia 2012 final
Ne ctar openstack asia 2012 finalNe ctar openstack asia 2012 final
Ne ctar openstack asia 2012 final
 
Introduction to OSGi
Introduction to OSGiIntroduction to OSGi
Introduction to OSGi
 
Tai lieu tham khao
Tai lieu tham khaoTai lieu tham khao
Tai lieu tham khao
 
Metric System Day 3.2011
Metric System Day 3.2011Metric System Day 3.2011
Metric System Day 3.2011
 
SHS Student Survey
SHS Student SurveySHS Student Survey
SHS Student Survey
 
English iii rules powerpoint
English iii rules powerpointEnglish iii rules powerpoint
English iii rules powerpoint
 
мой город
мой городмой город
мой город
 
Pelkonen: Oppilas- ja opiskelijahuoltolaki
Pelkonen: Oppilas- ja opiskelijahuoltolakiPelkonen: Oppilas- ja opiskelijahuoltolaki
Pelkonen: Oppilas- ja opiskelijahuoltolaki
 
Software product development services company creative technosoft systems
Software product development services company creative technosoft systemsSoftware product development services company creative technosoft systems
Software product development services company creative technosoft systems
 
Kudavi 2.29.2016
Kudavi 2.29.2016Kudavi 2.29.2016
Kudavi 2.29.2016
 
The prince's journey
The prince's journeyThe prince's journey
The prince's journey
 
Questão de ordem - suspeição do relator da Comissão de Impeachment
Questão de ordem - suspeição do relator da Comissão de ImpeachmentQuestão de ordem - suspeição do relator da Comissão de Impeachment
Questão de ordem - suspeição do relator da Comissão de Impeachment
 
Keunggulan kepimpinan rasulullah saw
Keunggulan kepimpinan rasulullah sawKeunggulan kepimpinan rasulullah saw
Keunggulan kepimpinan rasulullah saw
 
Strategies that encourage motivation and engagement
Strategies that encourage motivation and engagementStrategies that encourage motivation and engagement
Strategies that encourage motivation and engagement
 
Urok3
Urok3Urok3
Urok3
 

Ähnlich wie Lesson 3 - HTML & CSS Part 2 (20)

Lesson2
Lesson2Lesson2
Lesson2
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Introducing CSS Selectors.docx
Introducing CSS Selectors.docxIntroducing CSS Selectors.docx
Introducing CSS Selectors.docx
 
Basic css
Basic cssBasic css
Basic css
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
CSS Introduction
CSS Introduction CSS Introduction
CSS Introduction
 
Css
CssCss
Css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
CSS3 PPT.pptx
CSS3 PPT.pptxCSS3 PPT.pptx
CSS3 PPT.pptx
 
Css from scratch
Css from scratchCss from scratch
Css from scratch
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1
 
Css basics
Css basicsCss basics
Css basics
 
Css selectors
Css selectorsCss selectors
Css selectors
 

Mehr von hstryk

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Propertieshstryk
 
Lesson1 - Fall 2013
Lesson1 - Fall 2013Lesson1 - Fall 2013
Lesson1 - Fall 2013hstryk
 
Lesson2
Lesson2Lesson2
Lesson2hstryk
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitionshstryk
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorialhstryk
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3hstryk
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSShstryk
 
Lecture4
Lecture4Lecture4
Lecture4hstryk
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2hstryk
 
Tutorial1
Tutorial1Tutorial1
Tutorial1hstryk
 
Project1
Project1Project1
Project1hstryk
 
Lesson 3
Lesson 3Lesson 3
Lesson 3hstryk
 
Lesson1
Lesson1Lesson1
Lesson1hstryk
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resumehstryk
 

Mehr von hstryk (14)

CSS - Text Properties
CSS - Text PropertiesCSS - Text Properties
CSS - Text Properties
 
Lesson1 - Fall 2013
Lesson1 - Fall 2013Lesson1 - Fall 2013
Lesson1 - Fall 2013
 
Lesson2
Lesson2Lesson2
Lesson2
 
CSS3 Transitions
CSS3 TransitionsCSS3 Transitions
CSS3 Transitions
 
CSS Layout Tutorial
CSS Layout TutorialCSS Layout Tutorial
CSS Layout Tutorial
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSSBuilding a Website from Planning to Photoshop Mockup to HTML/CSS
Building a Website from Planning to Photoshop Mockup to HTML/CSS
 
Lecture4
Lecture4Lecture4
Lecture4
 
Tutorial1 - Part 2
Tutorial1 - Part 2Tutorial1 - Part 2
Tutorial1 - Part 2
 
Tutorial1
Tutorial1Tutorial1
Tutorial1
 
Project1
Project1Project1
Project1
 
Lesson 3
Lesson 3Lesson 3
Lesson 3
 
Lesson1
Lesson1Lesson1
Lesson1
 
Heather Strycharz - Resume
Heather Strycharz - ResumeHeather Strycharz - Resume
Heather Strycharz - Resume
 

Kürzlich hochgeladen

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 

Kürzlich hochgeladen (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Lesson 3 - HTML & CSS Part 2

  • 2. Examples via: http://www.w3schools.com/css/css_syntax.asp p { color:red; text-align:center; } CSS
  • 3.
  • 4. The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". #example{ color: #f4f4f6; font-weight:bold; } <div id=“example”> Lorem ipsum dolor sit amet. </div> The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." .example{ color: #f4f4f6; font-weight:bold; } <div class=“example”> Lorem ipsum dolor sit amet. </div> <div class=“example”> Lorem ipsum dolor sit amet. </div>
  • 5. There are three types of CSS styles: inline styles Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to. <a href="" style="text-decoration: none;"> embedded styles Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. <style type="text/css"> p { color: #00f; } </style> external styles External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" />
  • 6. CSS – Display Property http://www.w3schools.com/Css/tryit.asp?filename=trycss_display A block element is an element that takes up the full width available, and has a line break before and after it. An inline element only takes up as much width as necessary, and does not force line breaks.
  • 7. CSS – Position Property The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. relative A relative positioned element is positioned relative to its normal position. absolute The value absolute generates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the properties top, right, bottom, and left. Absolutely positioned boxes are removed from the flow and have no effect on later siblings. Margins on absolutely positioned boxes never collapse with margins on other boxes. #example{ position: absolute; top: 10px; left: 10px; } Example via: http://reference.sitepoint.com/css/position
  • 8. This property specifies whether or not a box should float and, if so, if it should float to the left or to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating content in the normal flow will flow around it on the opposite side. The float property is ignored for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s applied to the root element. CSS – Float Property Turning off Float - Using Clear Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. Text via: http://reference.sitepoint.com/css/float & http://www.w3schools.com/css/css_float.asp leftleft rightright
  • 9. CSS – Clear Property The clear property specifies which sides of an element where other floating elements are not allowed.