1 / 17

CSS

CSS. An introduction to css. What is CSS?. CSS stands for “cascading style sheets” Is a different language from HTML Controls the presentation of the HTML. Where does CSS fit in?. HTML. CSS. Why use CSS?.

cheung
Download Presentation

CSS

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. CSS An introduction to css

  2. What is CSS? CSS stands for “cascading style sheets” Is a different language from HTML Controls the presentation of the HTML

  3. Where does CSS fit in? HTML CSS

  4. Why use CSS? After it loads once it can be cached in local memory, thus making your website load faster It streamlines the job of the designer (you) for quicker edits/updates of presentation And many more reasons

  5. Content

  6. Presentation

  7. When the browser brings them together

  8. What can you control • Anything dealing with appearance • Font • Font color • Font size • Alignment of objects

  9. Types of Style sheets • External style sheets • Stored as a .css file • Best if you have multiple pages in your website and they all should look the same • Internal style sheets • Written in the <head> section of a webpage • Written within the <style> </style> tag element • Over-rides an external styles • Inline styles • Written within any html tag element • Over-rides both external and internal styles

  10. Organizing a stylesheet • Cascading Style Sheets should be stored in a folder called “styles” • The file name should end with the .css extension

  11. Linking to a stylesheet • New HTML tag • link • New Attributes • href---Where is the document • rel---What is the document relative to • type---What type of document is it • media---How is the object used <link href="styles/style-portfolio.css" rel="stylesheet" type="text/css" media="screen" />

  12. How to write a rule for a tag • A rule for a tag is written in the following way • Selector-The html element • Declaration-The property and value you declare • Property-The style attribute you want to change • Value-What you want to property to be h1 { color: #000000; text-align: center; font-size: 15px; }

  13. How to write a rule for an id selector • A rule for an id selector is written in the following way: • Selector- written by putting a # in front of the id name • Declaration-The property and value you declare • Property-The style attribute you want to change • Value-What you want to property to be #header { width: 800px; height:250 px; background-color:#000000; }

  14. How to write a rule for an CLASS selector • A rule for an class selector is written in the following way: • Selector- written by putting a . in front of the class name • Declaration-The property and value you declare • Property-The style attribute you want to change • Value-What you want to property to be .picture { float:right; }

  15. Text-related declarations(attributes)

  16. Id-selector declarations(attributes)

  17. Tips When choosing a font family, use Microsoft Word to pick a font you like. When choosing a color, use the color picker from Fireworks

More Related