CSS Introduction
•
1 like•742 views
This document provides an introduction and overview of CSS (Cascading Style Sheets). It covers what CSS is, why it is used to separate content from presentation, and its basic syntax and structure. CSS allows separation of HTML content from its visual presentation by defining styles like fonts, colors, and spacing in external CSS files or internal <style> tags that can be applied to elements on the page. The key benefits highlighted are maintenance of presentation separately from content and cascading/inheritance of styles.
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to CSS Introduction
Similar to CSS Introduction (20)
Recently uploaded
Recently uploaded (20)
CSS Introduction
- 1. INTRO TO CSS IAT100 Spring 2010 Diliara Nasirova 1
- 2. OUTLINE ¢ Covered in this lesson: — Overview ¢ What is CSS? ¢ Why to use CSS? — Structure ¢ CSS Syntax Introduction ¢ Three places CSS can be de=ined ¢ CSS Syntax Speci=ics ¢ Cascading Inheritance — Applied ¢ CSS Hands-‐on 2
- 3. WHAT IS CSS? ¢ Cascading Style Sheets (CSS) de=ines the way website content is presented. Visit http://www.csszengarden.com 3
- 4. WHERE THE DEFINITION “CASCADING” COMES FROM? 4
- 5. WHERE THE DEFINITION “CASCADING” COMES FROM? *detailed info later 5
- 6. WHERE THE DEFINITION “CASCADING” COMES FROM? *detailed info later 6
- 7. WHY CSS? ¢ Separate Content from Form <font size=“14px”> My First Header </font> <font size=“12px” color=“red” face=“Verdana”> My information 1 goes here. </font> <font size=“14px”> My Second Header </font> <font size=“12px” color=“red” face=“Verdana”> Different information goes here. </font> The old way: 7
- 8. WHY CSS? CONTINUED. ¢ Separate Content from Form — Content — Form or Style <p class=“header”>My First Header</p> <p class=“info”>My Information 1 goes here</p> <p class=“header”>My Second Header</p> <p class=“info”>Different Information goes here</p> (Speci=ic markup properties like Class will be discussed later). .header { font-‐size:14px;} .info { font-‐family: verdana; font-‐color: blue; font-‐size: 12px; } 8
- 9. WHAT DOES THIS SEPARATION GET US? 9
- 10. WHAT DOES THIS SEPARATION GET US? 10
- 11. WHAT DOES THIS SEPARATION GET US? 11
- 12. THREE CSS DEFINITION LOCATIONS ¢ Inline: the “style” attribute ¢ Internal: the <style> markup tag ¢ External: the .css stylesheet =ile <p> Content </p> <p style=“font-‐color:red; font-‐size:10px;”> Content </p> <html> <head> <style> p { background-‐color: Red; font-‐family: serif; font-‐color: White; } </style> </head> <body><p>Content</p></body> </html> <link rel="stylesheet" type="text/css" href=“mystylesheet.css" /> 12
- 13. CASCADING 13
- 14. CSS SYNTAX ¢ 3 Elements to a CSS Statement — Selector ¢ What HTML sections does it affect? — Property ¢ What attribute of that HTML section will be affected? — Value ¢ What change will be made to that attribute? 14
- 15. CSS SYNTAX ¢ Applying a style to Multiple selectors -‐ separate the selectors with a comma (,) ¢ Applying Multiple properties -‐ split each declaration with a semi-‐colon (;) h1 { color:red; font-‐family:calibri} h1, h2, h3, h4, h5, h6 { color: red } 15
- 16. CSS SYNTAX: SELECTORS ¢ Think of … — Web Page as a university — Selectors can be tags, classes, IDs. Then: ¢ Tags as students ¢ Class as student’s major ¢ ID as student’s ID number 16
- 17. CSS SYNTAX: SELECTORS ¢ Tag Selector ¢ Class Selector– precede the class with a dot(.) ¢ ID selector precedes with a "#" symbol CSS: .myinfo { font-‐size: 10px; font-‐color: White; } HTML: <p class=“myinfo” > Content</p> <div class=“myinfo”> Other content</div> CSS: #container{ font-‐size: 10px; font-‐color: White; } HTML: <div id=“container”> This is one section </div> CSS: p {font-‐size: 10px;} HTML: <p>Content</p> 17
- 18. EXTRA HTML TAGS: DIVISION AND SPAN ¢ Extra Tags: Div and Span de=ine sections in a HTML =ile ¢ Div tag is a style element for multiple lines ¢ Span tag is a style element for one line (inline). ¢ You can apply CSS to Div through ID/Class Selector; <div id = “container”> <h1> Content goes here </h1> <p> Content goes here </p> </div> <p> Content <span class=“myinfo”> goes here <span> </p> 18
- 20. CSS APPLIED ¢ Hands-‐on CSS Tutorial ¢ Techbyte: http://www.sfu.ca/~tutor/cgi-‐bin/ techbytes/Dreamweaver/dw2.html 20
- 21. PRESENTATION NOTES ¢ Page 3: — Originally HTML was used to change the appearance of websites, so that HTML documents eventually turned into a mixture of content and presentaRon. This problem was solved by W3C (World Wide Web ConsorRum) that created CSS, level 1 in 1996. It was quickly adopted by all main web browsers. In 1998 W3C developed a more sophisRcated and accurate CSS2 followed by a minor CSS2.1 update and CSS3 is currently under development. CSS is usually stored in separate .css style sheets which can be re-‐used for all your web pages. — Cascading Style Sheets (CSS) is a language that works with HTML documents for adding visual style to web sites, in other words for defining the way content is presented. It deals with colors, fonts, background images, posiRons, width, height, visibility and many other things. ¢ Page 7: — Content is the text and images, marked up to define regions of specific types — Form defines the “style” for the content 21
- 22. PRESENTATION NOTES ¢ Page 9: — Separate Content from Form ¢ Specify the style once for every instance of that class. ¢ Example: Specify the font once for all text on the HTML page that you have idenRfied as a “header”. ¢ The style sheet can be a separate file which all HTML pages on your enRre site can link to. ¢ Only have to specify the style once for your ENTIRE SITE ¢ Can change the style for your enRre site by ediRng only ONE FILE. ¢ Page 12: — Note, the selector for inline CSS is the tag which contains the style aaribute. 22
- 23. RESOURCES: ¢ Notes: www.tagbytag.org/tutorials/css-‐beginner/what-‐is-‐css ¢ Pictures: www.wise-‐women.org/tutorials/csstut/ 23