Text Formatting with Cascading Style Sheets

1. Text Formatting withCascading Style Sheets Jeanne Ivy Fall 2005

2. Cascading Style Sheets • Cascading Style Sheets (CSS) allow you to create styles and apply those styles universally to your HTML/XHTML documents. Styles can specify: • Typeface • Size • Color • Weight • Decoration • Leading, Kerning and Tracking • Space • Positioning

3. Creating Styles • Styles can be created using standard HTML markup tags like h1. • h1 {color: ff0000;} • CSS also allows supports the creation of custom tags that you name. • .mytext {color:ff0000;}

4. Saving Styles • Styles can be placed at the top of a document, which only supports type on that page • Better yet, styles can be placed in an external style sheet (usually called style.css) which your HTML/XHMTL document references.

5. Applying Styles • Styles can be called within a standard HTML markup tag. • <p class=“mytext”>Text goes here</p> • Or by using <div> and <span> tags. • Div tags create a break before and after closing, but add no extra space before or after like a <p>. • <div class=“mytext>Text goes here</div> • Span tags create no break before or after and are used for short spans of type. • <span class=“mytext”> Text goes here</span>

6. Anatomy of a Style Styles are made up of the following: .mytext {color: ff0000;} opening curly bracket closing curly bracket colon semi-colon value property selector declaration

7. Common Style Properties • Here are the most common properties for text styles

8. Open an existing HTML file • Create a folder in workspace titled “YourName” • Go to Blackboard: Exercises/ex2 and download citypaper.html into your workspace folder. • Open citypaper.html in TextEdit. • Create a new file and save it as style.css in the same folder.

9. View the file • View citypaper.html in IE. • Notice how the document has a title, author, intro text, interviewer’s id, questions, interviewee’s id, answers, link to CityPaper online, and list items. • We will create a style sheet to organize and create a hierarchy for this information.

10. Attach the style sheet • First, we need to link our style sheet to our document. • In citypaper.html, after </title> before </head> add the following: <link href="style.css" rel="stylesheet" type="text/css">

11. Create a Style for Title • In style.css we will create a style for the title. At the top of the document type this then save your file: .titles { font-family: Verdana, Arial, Helvetica; font-size: 18px; font-weight: bold; color: #666699; letter-spacing: 2px; }

12. Apply the Titles Style • To apply the style to our title, go to citypaper.html and find “Q&A with Scott Kecken and Joy Lusco Kecken”. • Change the start <div> tag surrounding it to read: <div class=“titles”>Q&amp;A with Scott… • Save your file and view it in IE.

13. Create a Style for Author • In style.css create a style for the author. After the titles style, type this: .author { font-family: Verdana, Arial, Helvetica; font-size: 10px; color: #666666; padding-top: 8px; }

14. Apply the Author Style • Go to citypaper.html and find “By Charles Cohen”. • Change the start <div> tag surrounding it to read: <div class=“author”>By Charles Cohen… • Save your file and view it in IE.

15. Create a Style for Intro Text • In style.css create a style for the intro text: .introtext { font-family: Verdana, Arial, Helvetica; font-size: 11px; line-height: 15px; padding: 5px; border: thin dashed #666666; margin: 20px auto; background-color: #E0E0E0; }

16. Apply the IntroText Style • Go to citypaper.html and find the sentence beginning “During the seven years…” • Change the start and end <p> tag surrounding it to a div: <div class=“introtext”>During the…</div> • Save your file and view it in IE.

17. Create Styles for Questions In style.css create a style for the question and interviewer (CP): .question { font-family: Verdana, Arial, Helvetica; font-size: 11px; color: #999999; padding-bottom: 10px; line-height: 14px; } .cp { font-weight: bold; color: #666666; }

18. Apply the Question/CP Style • Go to citypaper.html • Find “CP: What’s the movie about?” • Change the <p> tag to a <div> tag and add a span tag around “CP:” <div class=“question”><span class=“cp”>CP: </span> What’s the… </div>

19. Create Styles for Answers In style.css create a style for the answer and subject (Scott Kecken “SK” and Joy Lusco Kecken “JLK”): .answer { font-family: Verdana, Arial, Helvetica; font-size: 11px; color: #6699CC; padding-bottom: 30px; line-height: 14px; } .subject { font-weight: bold; color: #006600; }

20. Apply the Answer/Subject Style • Go to citypaper.html • Find “Scott Kecken: [In America] we’ve gone…” • Change the <p> tag to a <div> tag and add a span tag around “Scott Kecken:” <div class="answer"><span class="subject"> Scott Kecken: </span> [In America] we… </div>

21. Apply All Question /Answer Styles • Go to citypaper.html • Copy and paste the question style around each question. Make sure to delete the <p></p> tags and close each span and div. <div class=“question”><span class=“cp”>…</span></div> • Copy and paste the answer style around each answer. Make sure to close each span and div. <div class="answer"><span class="subject">…</span></div>

22. Create Styles for Footers • In style.css create a style for the footer text: .footer { font-family: Verdana, Arial, Helvetica; font-size: 10px; color: #666666; padding-top: 8px; border-top-width: thin; border-top-style: solid; border-top-color: #666666; }

23. Create Styles for Links • In style.css create a style for the link: a.link { font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; color: #FF3300; text-decoration: none; } a.link:hover { text-decoration: underline; }

24. Create Styles for List Items • In style.css create a style for the lists: li { padding-left: 20px; list-style-type: square; }

25. Apply the footer and link styles • In citypaper.html find “Visit citypaper.com…” • Remove the <p></p> tags and apply the footer style to the text using <div> tags. • Add class =“link” in the <a href> tag. <div class=“footer">Visit <a href="http://www.citypaper.com" class="link">citypaper.com</a> for more information on the following: • Close the </div> after the bullets.

26. Footer

27. Questions?

28. In-Class Exercise (Modify it!) • Save the files • Save copies as citypaper2.html and style2.css. (Update the css link at the top of citypaper2.html to go to style2.css) • Change the style sheet to dramatically change the design of citypaper2 to however you see fit