SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
Best Practices and CSS An Overview
What is CSS?  C ascading  S tyle  S heets ,[object Object]
Content ,[object Object]
XHTML (e X tensible  H yper T ext  M arkup  L anguage ,[object Object],[object Object],[object Object]
Key Requirements for XHTML Code ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Start With a Blank Page of Content ,[object Object],[object Object]
The Style sheet ,[object Object],[object Object],[object Object]
Inline ,[object Object],[object Object],[object Object],[object Object],An inline style only affects the tag to which it is attached. Adding inline styles everywhere is bad for the portability and editability of your markup. Inline styles should be generally avoided.
Embedded (internal) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Linked Styles ,[object Object],[object Object],[object Object],[object Object],[object Object]
Anatomy of a CSS Rule ,[object Object],[object Object],p  {color:red;} selector declaration property value
Writing CSS Rules ,[object Object],[object Object],[object Object],[object Object]
Writing CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Writing CSS Rules ,[object Object],[object Object],[object Object]
Reset the Styling ,[object Object],[object Object]
Reset the Styling ,[object Object],[object Object]
Reset the Styling ,[object Object]
Reset the Styling ,[object Object]
Reset the Styling ,[object Object],[object Object]
Reset the Styling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The first two styles here are group selectors that apply the same formatting to every one of the tags listed. Add these styles to the beginning of your style sheet, then, further down the style sheet, override them on a case-by-case basis. Thanks to the cascade, as long as a new style appears  after  the group selectors removing the margins and changing the font size, the new values take precedence.
Reset the Styling Examples ,[object Object],[object Object],[object Object],[object Object]
Flexible Text Using Ems ,[object Object],[object Object],[object Object]
Flexible Text Using Ems (cont.) ,[object Object]
Flexible Text Using Ems (cont.) ,[object Object]
Flexible Text Using Ems (cont.) ,[object Object],[object Object],[object Object]
Flexible Text Using Ems (cont) ,[object Object]
Flexible Text Using Ems (cont) ,[object Object],[object Object],[object Object],[object Object],[object Object]
Flexible Text Using Ems-Examples ,[object Object],[object Object],[object Object],[object Object]
Anchor Link Pseudo-Classes ,[object Object],[object Object]
Anchor Link Pseudo-Classes ,[object Object],[object Object]
Anchor Link Pseudo-Classes ,[object Object],[object Object]
Anchor Link Pseudo-Classes ,[object Object]
Anchor Link Pseudo-Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Targeting Particular Links ,[object Object]
Targeting Particular Links ,[object Object]
Targeting Particular Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Here is what the page will look like: Targeting Particular Links
Building Navigation Bars ,[object Object]
Building Navigation Bars ,[object Object]
Building Navigation Bars ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sample Vertical Navigation Bar ,[object Object],[object Object]
Samples of Horizontal Navigation ,[object Object],[object Object],[object Object]
Samples of My Navigation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Samples of My Navigation Styles ,[object Object],[object Object]
Divs ,[object Object],[object Object],[object Object]
Divs ,[object Object],[object Object],[object Object]
Type of Web Page Layouts ,[object Object],[object Object],[object Object],[object Object]
Fixed Width ,[object Object],[object Object],[object Object]
Liquid ,[object Object],[object Object]
Elastic ,[object Object],[object Object]
A Simple Two-Column Fixed Layout ,[object Object]
Two Column Layout-Content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Two Column Fixed-Content Only The markup has two divs; the first is the navigation div, which is a set of links organized within a list, and the second is the content div, which is a heading and some paragraphs. Here’s what it looks like:
Two-Column Layout-CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The first step in creating your two-column layout is to break the navigation out of the flow of the document by positioning it absolutely. Note that you also need to set the margins and padding of the body to zero to remove any default settings. In addition, you should set the width of your navigation to 150px to create the width of the column and temporarily turn on the right border so that you can see exactly where the div is now positioned.  Here’s what it looks like: Two-Column Layout-Step 2 The navigation is now absolutely positioned, and by setting the left and top to zero, you ensure that its top left corner is aligned with the top left corner of its containing element,  body . The content area now takes the navigation div’s place as the first element in the regular flow of the document, so it moves to the top left corner of the parent  body  element. The page looks a bit of a mess at this point. However, the tops of both elements are now aligned, and all you have to do next is push the content div over to the right. We do this by setting its left margin. Here’s what it looks like after setting the content div’s left margin: Two-Column Layout-Step 3 div#content { margin-left: 150px; }
Two-Column Layout-Step Three CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Now that you have your two-column layout, you need to think about making it look more presentable. Two Column Fixed with CSS Applied-Step 4
Sample of Liquid Layout ,[object Object],[object Object]

Weitere ähnliche Inhalte

Andere mochten auch

OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 
The Agile Advantage: Mastering Business in the New Economy
The Agile Advantage: Mastering Business in the New EconomyThe Agile Advantage: Mastering Business in the New Economy
The Agile Advantage: Mastering Business in the New EconomyRussell White
 
CSS slideshare
CSS slideshareCSS slideshare
CSS slideshareEirikAas
 
Event handling63
Event handling63Event handling63
Event handling63myrajendra
 
Design Pattern Craftsmanship
Design Pattern CraftsmanshipDesign Pattern Craftsmanship
Design Pattern CraftsmanshipJason Beaird
 
Understanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxUnderstanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxRuss Weakley
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Event Handling in java
Event Handling in javaEvent Handling in java
Event Handling in javaGoogle
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSBG Java EE Course
 

Andere mochten auch (18)

OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
The Agile Advantage: Mastering Business in the New Economy
The Agile Advantage: Mastering Business in the New EconomyThe Agile Advantage: Mastering Business in the New Economy
The Agile Advantage: Mastering Business in the New Economy
 
CSS slideshare
CSS slideshareCSS slideshare
CSS slideshare
 
Event handling63
Event handling63Event handling63
Event handling63
 
Smacss and bem
Smacss and bemSmacss and bem
Smacss and bem
 
Arquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEMArquitetura CSS - SMACSS + OOCS + BEM
Arquitetura CSS - SMACSS + OOCS + BEM
 
Unit 6 Java
Unit 6 JavaUnit 6 Java
Unit 6 Java
 
Dhtml
DhtmlDhtml
Dhtml
 
Design Pattern Craftsmanship
Design Pattern CraftsmanshipDesign Pattern Craftsmanship
Design Pattern Craftsmanship
 
Understanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntaxUnderstanding the mysteries of the CSS property value syntax
Understanding the mysteries of the CSS property value syntax
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Dhtml
DhtmlDhtml
Dhtml
 
CSS Tutorial
CSS TutorialCSS Tutorial
CSS Tutorial
 
Event Handling in java
Event Handling in javaEvent Handling in java
Event Handling in java
 
CSS
CSSCSS
CSS
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 

Kürzlich hochgeladen

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 

Kürzlich hochgeladen (20)

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 

Best Practices and CSS

  • 1. Best Practices and CSS An Overview
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.