Your SlideShare is downloading. ×
CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

CSS

246
views

Published on

This is a project for my Web Design and Multimedia class at HACC.

This is a project for my Web Design and Multimedia class at HACC.

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS By Leslie Steele
  • 2. Welcome to my first Podcast! In this Podcast, I will discuss how CSS differs from HTML and the flexibilities and limitations of CSS.
  • 3. CSS Explained CSS = cascading style sheets It is one of the simplest tools for Web developers and designers. It is used to define formatting of color, background images, fonts, margins and indentation for Web pages.
  • 4. CSS and HTML It is different from HTML, which creates the basic construction of a Web page, but CSS is dependent upon HTML (or XHTML or XML). I sometimes think of HTML as a road, like the one pictured to the right. It’s rather plain & basic, though not visually unpleasant. The basic components are present, and clearly, this road is drivable & will take you where you need to go.
  • 5. CSS adds life to Web pages CSS makes that road more interesting than driving on a straight, plain road. Designing a Web page or an entire Web site is much more stylistically appealing with the use of CSS.
  • 6. What can be done with CSS? Background
  • 7. What can be done with CSS? Background Text
  • 8. What can be done with CSS? Background Text Font
  • 9. What can be done with CSS? Background Text Font Links
  • 10. What can be done with CSS? Background Text Font Links Tables
  • 11. What can be done with CSS? Background Text Font Links Tables Borders
  • 12. What can be done with CSS? Background Text Font Links Tables Borders Margins
  • 13. What can be done with CSS? Background Text Font Links Tables Borders Margins Padding
  • 14. Background Color of entire page
  • 15. Background Color of entire page Color of different elements
  • 16. Background Color of entire page Color of different elements Image
  • 17. Background Color of entire page Color of different elements Image -can be set as a fixed image (the image will not move when scrolling down or up the page)
  • 18. Background Color of entire page Color of different elements Image -can be set as a fixed image (the image will not move when scrolling down or up the page) -position can be set horizontally or vertically
  • 19. Background Color of entire page Color of different elements Image -can be set as a fixed image (the image will not move when scrolling down or up the page) -position can be set horizontally or vertically -can be set to single image or repeat image (tile)
  • 20. Text Set color
  • 21. Text Set color Set alignment
  • 22. Text Set color Set alignment Remove line from under hyperlinks
  • 23. Text Set color Set alignment Remove line from under hyperlinks Decorate text
  • 24. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text
  • 25. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent
  • 26. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent Specify space between characters & lines
  • 27. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent Specify space between characters & lines Set text direction
  • 28. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent Specify space between characters & lines Set text direction Increase white space between words
  • 29. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent Specify space between characters & lines Set text direction Increase white space between words Disable text wrapping inside an element
  • 30. Text Set color Set alignment Remove line from under hyperlinks Decorate text Control letters in a text Indent Specify space between characters & lines Set text direction Increase white space between words Disable text wrapping inside an element Set the vertical alignment of an image inside text
  • 31. Some benefits of using CSS Saves time by formatting the layout & style of multiple Web pages using one file
  • 32. Some benefits of using CSS Saves time by formatting the layout & style of multiple Web pages using one file Different style sheets can be specified to use depending on the technology used to access the site on whatever device is used to access the page
  • 33. Some benefits of using CSS Saves time by formatting the layout & style of multiple Web pages using one file Different style sheets can be specified to use depending on the technology used to access the site on whatever device is used to access the page Pages can be read more accurately & precisely by aids like screen readers, thus greatly improving accessibility for disabled persons
  • 34. Some benefits of using CSS Saves time by formatting the layout & style of multiple Web pages using one file Different style sheets can be specified to use depending on the technology used to access the site on whatever device is used to access the page Pages can be read more accurately & precisely by aids like screen readers, thus greatly improving accessibility for disabled persons Reduces the amount of HTML code a Web site requires which decreases page size & bandwidth usage
  • 35. More benefits of using CSS Faster loading pages when using table-less layout CSS reduces clutter by replacing lengthy HTML coding Web site development time can be shortened CSS can replace some Javascript navigation with CSS navigation – some Web site visitors do not have their Javascripting turned on while they browse different sites
  • 36. Limitations of CSS Although there is so much that can be accomplished with the use of CSS, it does have its limitations. Some such limitations include:
  • 37. Limitations of CSS Collapsing margins: Two consecutive vertical margins collapse if there is no border or padding that fall between & may cause positioned content to appear incorrectly, resulting in a single margin area
  • 38. Limitations of CSS Collapsing margins: Two consecutive vertical margins collapse if there is no border or padding that fall between & may cause positioned content to appear incorrectly, resulting in a single margin area Inconsistent browser support: Different browsers present CSS layout differently because of browser bugs or lack of CSS feature support
  • 39. Limitations of CSS Control of element shapes: A rectangular shape is the only shape possible currently. Other shapes, like rounded corners, may require different markup language.
  • 40. Limitations of CSS Control of element shapes: A rectangular shape is the only shape possible currently. Other shapes, like rounded corners, may require different markup language. Poor layout control for flexible layouts: CSS is more geared for styling, not layout.
  • 41. Limitations of CSS Lack of column declaration: Layouts with multiple columns can be complex to implement. Currently, the process is often done using floating elements, but they can appear differently in different browsers. Appearance can also vary if viewed on monitors with different screen ratios.
  • 42. Limitations of CSS Lack of column declaration: Layouts with multiple columns can be complex to implement. Currently, the process is often done using floating elements, but they can appear differently in different browsers. Appearance can also vary if viewed on monitors with different screen ratios. No multiple backgrounds per element: Highly graphical designs require multiple background images for every element -- so developers and designers must choose between adding redundant wrappers around document elements or dropping the visual effect.
  • 43. The benefits of using CSS far outweigh its disadvantages, especially when emphasis is placed more and more on Web site accessibility. Future Web site standards will most likely include being accessible, which is best done on pages and sites that have a table-less design.
  • 44. CSS is being still being further developed and there will be more possibilities with each new version. With all that already can be done with CSS, it’s amazing to think of what the future will hold.
  • 45. What kind of road do you prefer? OR