Css Best Practices

Mar 25, 2010Download as ppt, pdf

0 likes391 views

The document discusses CSS best practices for web development. It recommends using a CSS reset to eliminate browser inconsistencies, organizing stylesheets in a logical structure, writing readable CSS code with proper formatting and indentation, keeping CSS consistent through standardized naming conventions, combining similar CSS elements, using multiple classes when applicable, using CSS shorthand when possible, commenting CSS code, and validating CSS to check for errors.

CSS BEST PRACTICES By Sachin Chaudhari – Zensar Technologies

Introduction This Presentation is consolidation of the CSS (Cascading Style Sheet) best practices during web development.

Advantages of CSS CSS helps to reduce html code Pages load faster Easy for maintenance Saves time

Types of CSS 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/Internal styles Embedded or Internal 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 documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" />

CSS Best Practices Use a Reset Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers. Example: body, h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } ol,ul { list-style:none; }

CSS Best Practices Organize the Stylesheet with a logical Structure lay your stylesheet out in a way that allows you to quickly find parts of your code. So, an example stylesheet might be ordered like this: Generic classes (body, a, p, h1, etc.) /****** header *********/ styles goes here... /****** header End*********/ /****** main content *********/ styles goes here... /****** main content End*********/ /****** footer *********/ styles go here... /****** footer End *********/ /****** common*********/ styles go here... /****** common End *********/

CSS Best Practices Make it Readable The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on. All on one line .content { background: red; padding: 2em; border: 1px solid black; } on different line .content { background: red; padding: 2em; border: 1px solid black; }

CSS Best Practices Keep it Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. develop your own "sub-language" of CSS that allows you to quickly name things. There are certain classes that I create in nearly every application, and I use the same name each time. For example, I use ".dbfl" to float divs to the left. Good Example .dbfl { display:block; float:left; } .dbfr { display:block; float:right; } Bad Example .dbfl { display:block; float:left; } .dbfr { float:right; display:block; }

CSS Best Practices Combine Elements Elements in a stylesheet sometimes share properties. Instead of re-writing the same properties just combine them. For example, your h1, h2, and h3 elements might all share the same font and color: h1, h2, h3 {font-family: tahoma, color: #333}

CSS Best Practices Use Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a <div> having class "box" which defines color and font properties . <div class="box"></div> Now you want to float it right, and you've already got a class . right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so: <div class="box right"></div>

CSS Best Practices Use Shorthand while declarations Comment your CSS Avoid Using Inline Styles

CSS Best Practices Validate your CSS Validating your CSS does more than give a sense of pride: it helps you quickly spot errors in your code. Validation Service http://jigsaw.w3.org/css-validator/

CSS (Cascading Style Sheets) allows you to define styles for HTML elements, including how to display and layout elements on a page. Styles can be defined internally, within HTML files, or externally in separate CSS files. CSS rules contain selectors that specify the element to style and declarations that define properties and values to apply to the element. Comments can be added to CSS to explain the code. CSS can control font properties, colors, backgrounds, positioning, and layout of elements. External style sheets enable changing the appearance of all pages on a website by editing just one CSS file.

Cascading Style Sheets - Part 02Hatem Mahmoud

Cascading style sheets (CSS)Harshita Yadav

This document provides an introduction to Cascading Style Sheets (CSS) including what CSS is, its syntax and structure, and the different types of CSS including external, internal, and inline styles. CSS was created in 1996 to separate document structure (HTML) from presentation (styles). CSS uses selectors to apply declarations blocks containing property-value pairs that define elements' styles. External styles are ideal for consistency across pages while internal and inline styles are for one-off or unique styling. The cascade order determines which styles take precedence. Advantages of CSS include separation of concerns, easier maintenance, faster pages, and compatibility across devices.

Introduction to CSSFolasade Adedeji

This document provides an introduction to cascading style sheets (CSS) and covers several key concepts: CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.

Cascading Style Sheet (CSS)AakankshaR

CSS (Cascading Style Sheets) is a markup language used to style and lay out web documents. There are three types of CSS: external style sheets, internal style sheets, and inline styles. External style sheets are ideal for applying styles to many pages, internal style sheets are used for styling a single document with unique styles, and inline styles are applied directly to HTML elements but lose advantages of style sheets.

Cascading Style SheetsMarc Steel

CssMAGNA COLLEGE OF ENGINEERING

Introduction to csseShikshak

CSSseedinteractive

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.

Introduction to css & its attributes with syntaxpriyadharshini murugan

Introduction to cssEvolution Network

CSS (Cascading Style Sheets) is a rule-based language used to style HTML elements. It was proposed in 1994 to help solve styling problems in HTML 4. CSS2 became a recommendation in 1998, while CSS3 has been in development since 1998 with some parts still being worked on. CSS allows you to define styles that apply formatting properties like color, font, size, and layout to HTML elements. Styles can be applied via inline styles, internal style sheets within the <head> of a document, or external style sheets in a separate .css file linked via HTML. Common CSS selectors include element names, classes, and IDs to target specific elements for styling.

Css introductionAbhishekMondal42

CSS (Cascading Style Sheets) is a style sheet language that allows control over the presentation and layout of web pages. CSS handles the look and feel aspects of a web page by controlling things like colors, fonts, layout, and variations for different devices. CSS provides advantages like time savings through reuse of styles, faster page loads with less code, and easy maintenance through global style changes. The CSS language is created and maintained by the CSS Working Group within the W3C, and the ratified specifications become recommendations for implementation.

Week 12 CSS - Review from last weekKatherine McCurdy-Lapierre, R.G.D.

This document reviews CSS (Cascading Style Sheets) concepts covered in Week 11. CSS is used to control the presentation and styling of HTML documents. There are different types of CSS selectors including element selectors for HTML tags, class selectors that can be applied to any element, and ID selectors that uniquely identify a single element. Styles can be applied via embedded, linked, or inline styles. Linked style sheets allow controlling the presentation of an entire website from one external CSS file.

CSSanandha ganesh

The document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses some key CSS concepts like the basic CSS syntax of selector, property, and value. It also covers CSS comments, different types of CSS selectors like element, class, and ID selectors. The document further explains CSS properties related to text formatting, colors and backgrounds, and linking external CSS stylesheets.

Cascading Style Sheets (CSS)Harshil Darji

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML documents, including aspects like layout, colors, and fonts. CSS syntax is simple and uses English keywords to specify style properties. There are three types of CSS: internal style sheets defined in the <head> of an HTML page, inline styles added to HTML elements, and external style sheets linked via <link> tags. CSS allows separating design from content, enabling consistent presentation across pages by changing one CSS file. It improves accessibility, flexibility, and reduces complexity compared to presentational HTML elements.

Web Design, Lesson Plan: Classes and IDsSteve Kinney

This document discusses CSS classes, IDs, and DIV tags. Classes allow applying styles only where specified, while IDs are used once per page. DIV tags define sections that can be styled. The document explains using classes and IDs in CSS by prefixing them with periods and pound signs, respectively. It also demonstrates how to style specific elements within DIV sections. Students are instructed to watch a follow-up video demonstrating these concepts hands-on.

Html csskanakaiah kedam

1. The document discusses Cascading Style Sheets (CSS), which provide a powerful and flexible way to specify formatting for HTML elements. CSS rules are applied hierarchically based on precedence rules. 2. CSS levels 1, 2, and 3 are outlined, with CSS1 supporting basic styling of HTML elements. The document then covers specifying style rules, external and inline style sheets, creating styles through classes and IDs, and precedence rules. 3. Examples demonstrate applying styles to text properties like fonts, backgrounds, colors, and positioning. Specific properties like font-family and text-align are also defined.

Html Expression WebMark Frydenberg

INFO3775 Chapter 2 Part 2Jeff Byrnes

CSS allows styling of HTML elements through selectors, declarations, and properties. There are three ways to incorporate CSS into an HTML page: externally via a CSS file, internally via a <style> block, or inline via style attributes. The cascade determines which styles take precedence when multiple styles apply to the same element. CSS works by selecting elements and applying declarations consisting of properties and values. New HTML5 elements can be styled like any other HTML tags.

Week3 cssRowena LI

CSS (Cascading Style Sheets) allows styling of HTML elements through properties like fonts, sizes, colors and more, and can be defined internally, inline, or externally in CSS files which are linked to HTML; CSS offers advantages over HTML for styling like easier maintenance and faster page loads; CSS rules are made up of selectors that target elements and declarations which set properties and values to style elements.

CSS introductionCloudTech

Cascading Style Sheets (CSS) is used to format and lay out web documents. CSS works with HTML and JavaScript. CSS uses rules and selectors to style elements by changing properties like colors, sizes, and positioning. A style sheet contains rules with selectors that match HTML tags and attributes. The declaration block then sets property values. Common properties include width, background color, text alignment, and borders. Selectors target elements by type, ID, class, and placement. Examples demonstrate styling navigation bars and clouds. The presentation concludes with a Q&A.

CSS IntroductionSwati Sharma

This document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses what CSS is, its advantages, basic structure and syntax, applying styles using internal, external and inline styles, style precedence, and how to use IDs, classes, divs, spans and other selectors to control layout and formatting of text, links, backgrounds, fonts, lists and tables. The document covers many fundamental CSS concepts in a tutorial-like format.

CssAnuj Singh Rajput

04 kulakov jet styleNatalia Korotonoshkina

Eng Abdullah Allam Cvabdo366

Eng. Abdullah Ali Allam Biomedical eng who graduated from cairo univrersity now works for Siemens (Egypt) م . عبدالله علي علام احد مؤسسي شركه سايمنز في الشرق الاوسط و ادارييها المعروفين دوليا.تخرج من كليه الهندسه جامعه القاهره دخلتها بناءا علي توصيه خاطئه من ابن خالي ابن الدكتور(خالي). حيث صدمت من الواقع العملي في مصر الذي لا يعرف في معظم الاحيان الا الواس

Webtopnish_d1

Webtop is a desktop environment embedded in a web browser that provides an interface similar to operating systems like Windows, Mac, and Linux. It was first introduced in 1993 by Santa Cruz Operation as a web-based interface for their UNIX operating system. Webtop is composed of Java classes and text files with tags. It allows for convenient, mobile access to restored work sessions from anywhere via session management on the server side. Hardware requirements are minimal while software like Tomcat, Apache, and Java are used. Webtop provides benefits like convenience, mobility, centralized software management, and session management for roaming users.

developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage o...Orange Dev

2013 2014 ieee btech mtech dotnet projects richbraintechnologiesIEEEBTECHMTECHPROJECTS

WordsC Russo

Flexible DataSync: Fuel for new business opportunitiesOrange Dev

More Related Content

What's hot (15)

CSSseedinteractive

Introduction to css & its attributes with syntaxpriyadharshini murugan

Introduction to cssEvolution Network

Css introductionAbhishekMondal42

Week 12 CSS - Review from last weekKatherine McCurdy-Lapierre, R.G.D.

CSSanandha ganesh

Cascading Style Sheets (CSS)Harshil Darji

Web Design, Lesson Plan: Classes and IDsSteve Kinney

Html csskanakaiah kedam

Html Expression WebMark Frydenberg

INFO3775 Chapter 2 Part 2Jeff Byrnes

Week3 cssRowena LI

CSS introductionCloudTech

CSS IntroductionSwati Sharma

CssAnuj Singh Rajput

CSSseedinteractive

Introduction to css & its attributes with syntaxpriyadharshini murugan

Introduction to cssEvolution Network

Css introductionAbhishekMondal42

Week 12 CSS - Review from last weekKatherine McCurdy-Lapierre, R.G.D.

CSSanandha ganesh

Cascading Style Sheets (CSS)Harshil Darji

Web Design, Lesson Plan: Classes and IDsSteve Kinney

Html csskanakaiah kedam

Html Expression WebMark Frydenberg

INFO3775 Chapter 2 Part 2Jeff Byrnes

Week3 cssRowena LI

CSS introductionCloudTech

CSS IntroductionSwati Sharma

CssAnuj Singh Rajput

Viewers also liked (8)

04 kulakov jet styleNatalia Korotonoshkina

Eng Abdullah Allam Cvabdo366

Webtopnish_d1

developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage o...Orange Dev

2013 2014 ieee btech mtech dotnet projects richbraintechnologiesIEEEBTECHMTECHPROJECTS

WordsC Russo

Flexible DataSync: Fuel for new business opportunitiesOrange Dev

Meeting Point WebtopJeff Mowatt

Meeting Point 2 is a computerized facility booking system that allows users to easily book and manage meeting rooms, equipment, and catering orders. It provides a color-coded room schedule view and booking interface. Additional features include equipment tracking, repeat bookings, email confirmations, and a search function. Meeting Point 2 is designed to run on Windows platforms and integrate with common database systems.

04 kulakov jet styleNatalia Korotonoshkina

Eng Abdullah Allam Cvabdo366

Webtopnish_d1

developing Android and HTML5 apps for the Motorola ATRIX - Taking advantage o...Orange Dev

2013 2014 ieee btech mtech dotnet projects richbraintechnologiesIEEEBTECHMTECHPROJECTS

WordsC Russo

Flexible DataSync: Fuel for new business opportunitiesOrange Dev

Meeting Point WebtopJeff Mowatt

Similar to Css Best Practices (20)

Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul

Html & CSS - Best practices 2-hour-workshopVero Rebagliatte

80% of the end-user response time is spent on the front-end. (YSlow Team) By following these best practices we can have a great impact over the performance of our sites and applications. In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating. In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.

Advanced CSS Troubleshooting & EfficiencyDenise Jacobs

Advanced CSS TroubleshootingDenise Jacobs

CSS BasicsWordPress Memphis

Maintainable CSSStephen Hay

This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.

CSSMd. Sirajus Salayhin

This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it works, the different sources of styles, CSS selectors, properties, positioning, and inheritance. CSS allows separation of document content from page layout and styles, making web page design and maintenance easier. Styles defined in CSS rules cascade from broad to specific and can come from author styles, user stylesheets, or browser defaults.

6 Steps to Make Your CSS Code More Maintainable10Clouds

How Cascading Style Sheets (CSS) WorksAmit Tyagi

CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.

CSS Best practicesJosé Teixidó

The document provides tips and best practices for CSS including: 1) Separating markup from CSS styling and following an order of content blocks then CSS. 2) Writing semantic HTML and avoiding inline styles. 3) Using CSS resets to standardize browser defaults and font sizing with em units. 4) Targeting Internet Explorer with conditional stylesheets or tags to avoid hacks. 5) Using CSS for debugging invalid markup like missing image attributes.

Modern front end developmentTricode (part of Dept)

This document discusses modern front end development standards and best practices. It covers HTML semantics and structure, common HTML and CSS pitfalls to avoid, and tips for using CSS and JavaScript effectively. Key recommendations include following web standards, writing semantic HTML, separating structure from presentation and behavior, using frameworks, progressive enhancement, and ensuring accessibility.

CSS Best practiceRuss Weakley

This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.

CssNIRMAL FELIX

HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.

Make Css easy(part:2) : easy tips for css(part:2)shabab shihan

Basics Of Css And Some Common Mistakessanjay2211

The document provides an overview of CSS (Cascading Style Sheets) and different methods for applying CSS styles to HTML documents, including inline styles, embedded styles, and external style sheets. It also covers various CSS selectors such as type, class, ID, descendant, and child selectors that allow targeting specific elements to which styles can be applied. Common CSS mistakes like redundant units, repetition, excessive whitespace, improper grouping, and confusion between margins and padding are also discussed.

CssBalakumaran Arunachalam

Efficient, maintainable CSSRuss Weakley

Introduction to Frontend Development - Session 2 - CSS FundamentalsKalin Chernev

CSS MethodologyZohar Arad

The document provides an overview of CSS (Cascading Style Sheets) methodology. It defines CSS as the language used for implementing designs on HTML documents. It then covers CSS basics including selectors, properties, conflicts resolution using specificity and cascade order. It also discusses the box model which defines how browsers handle rectangular boxes for elements. Finally, it offers some best practices tips such as resetting styles, separating content from design, and planning layout during HTML coding.

Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul

Html & CSS - Best practices 2-hour-workshopVero Rebagliatte

Advanced CSS Troubleshooting & EfficiencyDenise Jacobs

Advanced CSS TroubleshootingDenise Jacobs

CSS BasicsWordPress Memphis

Maintainable CSSStephen Hay

CSSMd. Sirajus Salayhin

6 Steps to Make Your CSS Code More Maintainable10Clouds

How Cascading Style Sheets (CSS) WorksAmit Tyagi

CSS Best practicesJosé Teixidó

Modern front end developmentTricode (part of Dept)

CSS Best practiceRuss Weakley

CssNIRMAL FELIX

HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.

Make Css easy(part:2) : easy tips for css(part:2)shabab shihan

Basics Of Css And Some Common Mistakessanjay2211

CssBalakumaran Arunachalam

Efficient, maintainable CSSRuss Weakley

Introduction to Frontend Development - Session 2 - CSS FundamentalsKalin Chernev

CSS MethodologyZohar Arad

Recently uploaded (20)

FL Studio Producer Edition Crack + Full Version [Latest]Mudasir

The Canvas of Creative Mastery Newsletter_May 2025AmirYakdi

Total Uninstall Pro 7 Crack Free Download [Latest]Designer

Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest] Developer

Best Website Designing Company In Delhi NCREtoile Info Solutions

FonePaw iPhone Data Recovery 8.5.0 Full Crack 2025Designer

Xiaomi Flash Tool Free Download 2025 for All VersionsDesigner

Movavi Video Suite 22.0.1 Crack + Activation Key 2025Designer

Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Yahoo

Homedecor Furniture Warehouse presentationHome Decor

https://springfieldhomedecor.com/ Welcome to HomeDecor Furniture Warehouse, where style meets savings and your dream home comes to life — one room at a time. At HomeDecor, we believe great furniture shouldn’t come with a luxury price tag. That’s why we’ve built a warehouse full of timeless designs, handpicked collections, and durable pieces that blend comfort, functionality, and modern aesthetics — all at unbeatable prices.

AVS Video Converter 12.1.5.673 Full Crack Download [Latest]Google

Keyword Researcher Pro 13.180 Full Crack 2025Designer

GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]Designer

NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]Google

Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest] Developer

CleanMyPC Crack 1.12.0.2113 + Activation Code 2025Yahoo

Supplier Sourcing Sample Work of Maisie.pdfMelissaMaisieVillanu

Unit IV-Logic Gates.pdf gsgagagagaggggggbriosmarttv

Minahil Mushtaq's Creative Portfolio 2024MinahilMushtaq2

OntologyDuVerneayBigDesign2025_May28.pptxJessica DuVerneay

FL Studio Producer Edition Crack + Full Version [Latest]Mudasir

The Canvas of Creative Mastery Newsletter_May 2025AmirYakdi

Total Uninstall Pro 7 Crack Free Download [Latest]Designer

Movavi Slideshow Maker 7.0.1 Crack + Activation Key [Latest] Developer

Best Website Designing Company In Delhi NCREtoile Info Solutions

FonePaw iPhone Data Recovery 8.5.0 Full Crack 2025Designer

Xiaomi Flash Tool Free Download 2025 for All VersionsDesigner

Movavi Video Suite 22.0.1 Crack + Activation Key 2025Designer

Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Yahoo

Homedecor Furniture Warehouse presentationHome Decor

AVS Video Converter 12.1.5.673 Full Crack Download [Latest]Google

Keyword Researcher Pro 13.180 Full Crack 2025Designer

GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]Designer

NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]Google

Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest] Developer

CleanMyPC Crack 1.12.0.2113 + Activation Code 2025Yahoo

Supplier Sourcing Sample Work of Maisie.pdfMelissaMaisieVillanu

Unit IV-Logic Gates.pdf gsgagagagaggggggbriosmarttv

Minahil Mushtaq's Creative Portfolio 2024MinahilMushtaq2

OntologyDuVerneayBigDesign2025_May28.pptxJessica DuVerneay

Css Best Practices

1. CSS BEST PRACTICES By Sachin Chaudhari – Zensar Technologies

2. Introduction This Presentation is consolidation of the CSS (Cascading Style Sheet) best practices during web development.

3. Advantages of CSS CSS helps to reduce html code Pages load faster Easy for maintenance Saves time

4. Types of CSS 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/Internal styles Embedded or Internal 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 documents. External style sheets can affect any document they are attached to. <link rel="stylesheet" type="text/css" href="styles.css" />

5. CSS Best Practices Use a Reset Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. The reset allows your layout look consistent in all browsers. Example: body, h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } ol,ul { list-style:none; }

6. CSS Best Practices Organize the Stylesheet with a logical Structure lay your stylesheet out in a way that allows you to quickly find parts of your code. So, an example stylesheet might be ordered like this: Generic classes (body, a, p, h1, etc.) /****** header *********/ styles goes here... /****** header End*********/ /****** main content *********/ styles goes here... /****** main content End*********/ /****** footer *********/ styles go here... /****** footer End *********/ /****** common*********/ styles go here... /****** common End *********/

7. CSS Best Practices Make it Readable The readability of your CSS is incredibly important, though most people overlook why it's important. Great readability of your CSS makes it much easier to maintain in the future, as you'll be able to find elements quicker. Also, you'll never know who might need to look at your code later on. All on one line .content { background: red; padding: 2em; border: 1px solid black; } on different line .content { background: red; padding: 2em; border: 1px solid black; }

8. CSS Best Practices Keep it Consistent Along the lines of keeping your code readable is making sure that the CSS is consistent. develop your own "sub-language" of CSS that allows you to quickly name things. There are certain classes that I create in nearly every application, and I use the same name each time. For example, I use ".dbfl" to float divs to the left. Good Example .dbfl { display:block; float:left; } .dbfr { display:block; float:right; } Bad Example .dbfl { display:block; float:left; } .dbfr { float:right; display:block; }

9. CSS Best Practices Combine Elements Elements in a stylesheet sometimes share properties. Instead of re-writing the same properties just combine them. For example, your h1, h2, and h3 elements might all share the same font and color: h1, h2, h3 {font-family: tahoma, color: #333}

10. CSS Best Practices Use Multiple Classes Sometimes it's beneficial to add multiple classes to an element. Let's say that you have a <div> having class "box" which defines color and font properties . <div class="box"></div> Now you want to float it right, and you've already got a class . right in your CSS that floats everything to the right. You can simply add an extra class in the declaration, like so: <div class="box right"></div>

11. CSS Best Practices Use Shorthand while declarations Comment your CSS Avoid Using Inline Styles

12. CSS Best Practices Validate your CSS Validating your CSS does more than give a sense of pride: it helps you quickly spot errors in your code. Validation Service http://jigsaw.w3.org/css-validator/

13. THANK YOU

Css Best Practices

Recommended

More Related Content

What's hot (15)

Viewers also liked (8)

Similar to Css Best Practices (20)

Recently uploaded (20)

Css Best Practices