1 / 7

Master CSS for Effective Web Design and Development

Learn the fundamentals of CSS for web design - separate content structure from design, achieve cross-platform consistency, collaborate efficiently, ensure accessibility, and practice proper CSS syntax and usage. Explore inline styles, external style sheets, and their benefits for creating dynamic and responsive web pages.

aleda
Download Presentation

Master CSS for Effective Web Design and Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Using CSS Web Development Michael Russell

  2. What is CSS? • CSS – Cascading Style Sheets • Text based • Provides the means to create styles for structured (X)HTML documents • Can be used to define position, fonts, colours and graphics for page elements • Provides detailed flexibility in conjunction with (X)HTML id and class elements

  3. CSSSyntax • Selector { property:value; property:value; } e.g. H1 { color : red ; font-size : 16; }

  4. Why Use CSS? • Separate content structure from design • Standards – create one design to work across all platforms and browsers • Efficiency – change one file to change an entire site’s design • Team work – provides a single, standard working method • Accessibility. Accessibility. Accessibility.

  5. Inline styles • CSS styles can be defined within the (X)HTML • E.g.: <p style=“color: #ff0000;”>This will be red.</p> • Avoid inline styles as much as possible • Always be able to justify an inline style specification when used • Will always override styles specified in the <head> or external style sheets

  6. <head></head> styles • Styles defined in the head of an (X)HTML document • Usually useful only for testing, debugging, or “hacks” when absolutely required • Makes sense if the “site” has only one page (very rare!) • Are defined on a page by page basis • Will override external file style sheets, but are overridden by inline styles • Should be avoided

  7. External style sheets • Styles defined in a separate text file • File can be linked to from unlimited (X)HTML files in a site • Properly managed, changes to one file redesign an entire site • Can be cached separately to the (X)HTML files, reducing bandwidth usage • Is overridden by <head> and inline styles • Is the preferred method for defining CSS

More Related