SlideShare a Scribd company logo
1 of 22
Using the  CSS Prepared by: Sanjay Raval |  http:// www.usableweb.in /
What is CSS?   CSS is a language that’s used to define the formatting  applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. Let’s look at a basic example to see how this is done.   <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <title>A Simple Page</title> <style type=&quot;text/css&quot;> h1, h2 {  font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1><p>…</p> <h2>Second Title</h2><p>…</p> <h2>Third Title</h2><p>…</p> </body> </html>
Using CSS in HTML lnline Styles The simplest method of adding CSS styles to your web pages is to use  inline styles .  An inline style is applied via the style attribute, like this:  ,[object Object],[object Object],[object Object],<p style=&quot;font-family: sans-serif; color: #3366CC;&quot;>  Amazingly few discotheques provide jukeboxes. </p>
Using CSS in HTML Embedded Styles In this approach, you can declare any number of CSS styles by placing them between the opening and closing <style> tags, as follows: While it’s nice and simple, the <style>tag has  one major disadvantage:  if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions within the style element at the top of every one of your site’s pages.   <style type=&quot;text/css&quot;> CSS Styles here </style>
Using CSS in HTML External Style Sheets An external style sheet is a file (usually given a .css filename) that contains a web site’s CSS  styles, keeping them separate from any one web page. Multiple pages can link to the same .css file, and any changes you make to the style definitions in that file will affect all the pages that link to it.  To link a document to an external style sheet (say, styles.css), we simply place a link element in the document’s header: <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; />
CSS Selectors ,[object Object],[object Object],[object Object]
CSS Selectors Type Selectors  By naming a particular HTML element, you can apply a style rule to every occurrence of that  element in the document.  For example, the following style rule might be used to set the default font for a web site:   p, td, th, div, dl, ul, ol {  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;  font-size: 1em;  color: #000000; }
CSS Selectors Class Selectors   CSS classes comes in when you want to assign different styles to identical elements that occur in different places within your document . Consider the following style, which turns all the paragraph text on a page blue:   Great! But what would happen if you had a sidebar on your page with a blue background? You wouldn’t want the text in the sidebar to display in blue as well—then it would be invisible. What you need to do is define a class for your sidebar text, then assign a CSS style to that class.  To create a paragraph of the sidebarclass, first add a classattribute to the opening tag:   p { color: #0000FF; } <p class=&quot;sidebar&quot;> This text will be white, as specified by the CSS style definition below. </p>
CSS Selectors Class Selectors   Now we can write the style for this class:   This second rule uses a class selector to indicate that the style should be applied to any element  of the sidebar class. The period indicates that we’re naming a class—not an HTML element.   p { color: #0000FF; } .sidebar { color: #FFFFFF; }
CSS Selectors ID Selectors   In contrast with class selectors,  ID selectors  are used to select one particular element, rather  than a group of elements. To use an ID selector, first add an id attribute to the element you wish to style. It’s important that the ID is unique within the document:   To reference this element by its ID selector, we precede the id with a hash (#). For example, the following rule will make the above paragraph white:   ID selectors can be used in combination with the other selector types.  <p id=&quot;tagline&quot;>This paragraph is uniquely identified by the ID &quot;tagline&quot;.</p> #tagline { color: #FFFFFF; } ,[object Object],[object Object],[object Object],[object Object]
CSS Selectors Descendant Selectors A descendant selector will select all the descendants of an element. In this case, because our page contains a div element that has a class of sidebar, the descendant selector .sidebar p refers to all p elements inside that div.   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Selectors Child Selectors   A descendant selector will select all the descendants of an element, a child selector only targets the element’s immediate descendants, or “children.” Consider the following markup:   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Selectors Child Selectors In this example, the descendant selector we saw in the previous section would match the  paragraphs that are nested directly within div.sidebar  as well as  those inside div.tagline. If you didn’t want this behavior, and you only wanted to style those paragraphs that were  direct descendants of div.sidebar, you’d use a  child selector .  A child selector uses the > character to specify a direct descendant.  Here’s the new CSS, which turns only those paragraphs directly inside .sidebar (but not those within .tagline) white:   Note:  Unfortunately, Internet Explorer 6 doesn’t support the child selector. ,[object Object],[object Object]
Most Common CSS Mistakes
ID vs. Class What   An ID refers to a unique instance in a document, or something that will only appear once on a page. For example, common uses of IDs are containing elements such as page wrappers, headers, and footers. On the other hand, a CLASS may be used multiple times within a document, on multiple elements. A good use of classes would be the style definitions for links, or other types of text that might be repeated in different areas on a page. In a style sheet, an ID is preceded by a hash mark (#), and might look like the following: ,[object Object],[object Object],[object Object],[object Object]
ID vs. Class What   Classes are preceded by a dot (.). An example is given below.   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Redundant Units for Zero Values The following code doesn't need the unit specified if the value is zero.   It can be written instead like this:   Don't waste bytes  by adding units such as px, pt, em, etc, when the value is zero. The only  reason to do so is when you want to change the value quickly later on. Otherwise declaring the unit is meaningless. Zero pixels is the same as zero points. padding:0px 0px 5px 0px; padding:0 0 5px 0;
Avoid Repetition We should avoid using several lines when just one line will do.  For example, when setting borders, some people set each side separately: But why? When each border is the same! Instead it can be like: ,[object Object],[object Object],[object Object],[object Object],border:1px solid #00f;
Excess Whitespace Usually we have tendency to include whitespace in the code to make it readable. It'll only make the stylesheet bigger, meaning the bandwidth usage will be higher. Of course it's wise to leave some space in to keep it readable.
Grouping Identical Styles together So when we want a same style to a couple of elements. It is good to group them together and define the style instead of defining the style for each element separately. It will also make updating the style much easier. ,[object Object],[object Object],[object Object]
Margin vs. Padding As margins and paddings are generally be used interchangeably, it is important to know the difference. It will give you greater control over your layouts.  Margin  refers to the space around the element, outside of the border.  Padding  refers to the space inside of the element, within the border.   Example:  No Padding, 10px Margin  Result: ,[object Object],[object Object],[object Object],[object Object],[object Object]
Margin vs. Padding Example:  No Margin, 10px Padding  Result: ,[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot (19)

Css
CssCss
Css
 
Css
CssCss
Css
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css
CssCss
Css
 
Css lecture notes
Css lecture notesCss lecture notes
Css lecture notes
 
CSS
CSS CSS
CSS
 
css.ppt
css.pptcss.ppt
css.ppt
 
CSS
CSSCSS
CSS
 
CSS Part II
CSS Part IICSS Part II
CSS Part II
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
 
CSS
CSSCSS
CSS
 
Introduction to Cascading Style Sheets
Introduction to Cascading Style SheetsIntroduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
 
What is CSS?
What is CSS?What is CSS?
What is CSS?
 
CSS notes
CSS notesCSS notes
CSS notes
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
CSS
CSSCSS
CSS
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
html-css
html-csshtml-css
html-css
 

Similar to Basics Of Css And Some Common Mistakes

Similar to Basics Of Css And Some Common Mistakes (20)

Css
CssCss
Css
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css 2010
Css 2010Css 2010
Css 2010
 
CSS 101
CSS 101CSS 101
CSS 101
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Css
CssCss
Css
 
Basic css
Basic cssBasic css
Basic css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).pptIP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
 
CSS
CSSCSS
CSS
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Css
CssCss
Css
 

Recently uploaded

ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreelreely ones
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityScyllaDB
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 

Recently uploaded (20)

ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 

Basics Of Css And Some Common Mistakes

  • 1. Using the CSS Prepared by: Sanjay Raval | http:// www.usableweb.in /
  • 2. What is CSS? CSS is a language that’s used to define the formatting applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. Let’s look at a basic example to see how this is done. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <title>A Simple Page</title> <style type=&quot;text/css&quot;> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1><p>…</p> <h2>Second Title</h2><p>…</p> <h2>Third Title</h2><p>…</p> </body> </html>
  • 3.
  • 4. Using CSS in HTML Embedded Styles In this approach, you can declare any number of CSS styles by placing them between the opening and closing <style> tags, as follows: While it’s nice and simple, the <style>tag has one major disadvantage: if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions within the style element at the top of every one of your site’s pages. <style type=&quot;text/css&quot;> CSS Styles here </style>
  • 5. Using CSS in HTML External Style Sheets An external style sheet is a file (usually given a .css filename) that contains a web site’s CSS styles, keeping them separate from any one web page. Multiple pages can link to the same .css file, and any changes you make to the style definitions in that file will affect all the pages that link to it. To link a document to an external style sheet (say, styles.css), we simply place a link element in the document’s header: <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; />
  • 6.
  • 7. CSS Selectors Type Selectors By naming a particular HTML element, you can apply a style rule to every occurrence of that element in the document. For example, the following style rule might be used to set the default font for a web site: p, td, th, div, dl, ul, ol { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; }
  • 8. CSS Selectors Class Selectors CSS classes comes in when you want to assign different styles to identical elements that occur in different places within your document . Consider the following style, which turns all the paragraph text on a page blue: Great! But what would happen if you had a sidebar on your page with a blue background? You wouldn’t want the text in the sidebar to display in blue as well—then it would be invisible. What you need to do is define a class for your sidebar text, then assign a CSS style to that class. To create a paragraph of the sidebarclass, first add a classattribute to the opening tag: p { color: #0000FF; } <p class=&quot;sidebar&quot;> This text will be white, as specified by the CSS style definition below. </p>
  • 9. CSS Selectors Class Selectors Now we can write the style for this class: This second rule uses a class selector to indicate that the style should be applied to any element of the sidebar class. The period indicates that we’re naming a class—not an HTML element. p { color: #0000FF; } .sidebar { color: #FFFFFF; }
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Most Common CSS Mistakes
  • 15.
  • 16.
  • 17. Redundant Units for Zero Values The following code doesn't need the unit specified if the value is zero. It can be written instead like this: Don't waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only reason to do so is when you want to change the value quickly later on. Otherwise declaring the unit is meaningless. Zero pixels is the same as zero points. padding:0px 0px 5px 0px; padding:0 0 5px 0;
  • 18.
  • 19. Excess Whitespace Usually we have tendency to include whitespace in the code to make it readable. It'll only make the stylesheet bigger, meaning the bandwidth usage will be higher. Of course it's wise to leave some space in to keep it readable.
  • 20.
  • 21.
  • 22.