Cascading Style Sheets Part 1

1. IT 130 – Internet and the Web Cascading Style Sheets Part 1

2. HTML for Document Markup HTML was originally designed so that the tags define only the content of a document (headings, lists, titles, etc) – as opposed to the formatting (e.g. bolding, italics, colors, etc). The idea was that different computers would use different formatting depending on their resolution, available fonts, available colors, and so on. This was fine when the documents were only read by scientists doing research work and nobody was thinking about HTML as being used in the elaborate ways that we see today.

3. HTML for Web Pages As the web became more ubiquitous, the creators of web pages, especially commercial web pages, wanted more control over the formatting of their pages (again: colors, fonts, etc). They also wanted to ensure that their web pages looked the same on all browsers. For this reason, formatting tags were introduced in HTML. But many were still unsatisfied with the combination of content and formatting. There were many reasons for this including limitations on what could be done, and inconsistency in how HTML documents were being displayed within different browsers.

4. Cascading Style Sheets The W3 Consortium (www.w3c.org), the same organization that develops the standards for HTML and XHTML, introduced Cascading Style Sheets in the mid-1990s. • CSS is a new way of formatting web pages. • CSS is designed to augment HTML by allowing web designers a powerful and consistent way of formatting web pages.

5. Separating Content and Style The fundamental difference between CSS and HTML, is the distinction between the outline of the content of a web page (achieved via HTML) and the style/formatting of a page (achieved via CSS). Doing so allows for: • Consistent design (e.g. changing a style definition in a “style sheet” can change every page on your web site!) • More flexibility • Less work to maintain large web sites – some very cool features possible here… Like HTML, style sheets are written in a language with certain rules. This language is Cascading Style Sheets, or CSS for short.

6. An example of a CSS Style Here is a CSS style that changes the appearance of an h1 tag to double its size and to turn it green: <h1 style="font-size:200%; color:green">

7. Components of a CSS Style The three parts to a CSS style: selector, property, and value. • The selector is the HTML tag you are formatting (e.g. H1), • The property is the attribute you want to change (e.g. font, color). • Each property is set to a value. Every property (i.e. attribute) and its value are separated by a colon (:). Recall that we previously assigned attribute/value pairs by using the equals sign. However this syntax is not correct and does not work in CSS. If you include multiple groups of property/value pairs, each group must be separated by semicolons (;).

8. Property / Value Pairs Example of property / value pairs separated by semicolons: font-family:Arial; font-style:italic; font-weight:bold; color : blue Compare how you set a style with HTML syntax v.s. CSS syntax: • HTML syntax: color="blue" deprecated • CSS syntax: style="color:blue"

9. Three ways of creating a style: Inline, Internal, External Inline style • An inline style is applied to a single tag or section of the current HTML file. • Inline style declarations are placed inside the tag. • <h1 style="font-size: 200%; font-style: italic"> Internal style sheet (also called embedded style sheet)  discussed later • An internal style is applied to the entire current HTML file but is not applied to other files on the web site. • Internal style declarations are placed in the header of the HTML file. External style sheet (also called linked style sheet)  discussed later • An external style is applied to the entire HTML file and may be applied to any or all pages on the web site. • External style declarations are written in a separate text file which is then linked to the HTML file. • External style sheets make it easy to give a consistent look to any number of web pages.

10. Inline Style For an inline style, the declaration is contained inside the tag of a selector: <h1 style="font-size:200%; font-style:italic">

11. Inline Style ExamplesIdentify the selector, property, and value <body style="color:blue"> body is the selector, color is the property, and blue is the value. <body style="background-color:silver"> body is the selector, background-color is the property, and silver is the value. These tags have their usual </body> closing tags.

12. Inline Style Examples In the style <p style="font-family:Arial; font-weight:bold"> p is the selector, font-family and font-weight are the properties, and Arial and bold are the values. In the style <p style="font-size:300%; color:red"> p is the selector, font-size and color are the properties, and 300% and red are the values. These tags have their usual </p> closing tags.

13. Example <body> <h3>This is plain h3</h3> <h3 style="font-family:Arial, Times; font-style:italic; color:green"> This is h3 in Arial, italic, green </h3> </body> This is plain h3 This is h3 in Arial, italic, and green

14. **span, div, and p Tags The previous styles show you how to change the default style of a tag. What if you want to apply a style to just a section of text (one word, a few words, a sentence, a paragraph)? You can use tags such as span or div or p to apply a style(s): <span style="font-style:italic"> Hey! </span> <p style="color:blue"> Good night… </p>

15. span v.s. div v.s. p span tags are usually used to format text that is not surrounded by a tag, such as a single word or words inside a paragraph. ptags are typically used to format individual paragraphs Every paragraph of content should typically be surrounded by a ‘p’ tag. So if you wanted to apply a style to an entire paragraph, simpy place the style inside that paragraph’s ‘p’ tag. divtags are usually used to format even larger segments of a web page, such as a table of contents. More on this later • The div tag is used not only for styling, but also to organize your page into sections. This will become very important later on. • A <div> tag can enclose several paragraphs, but it would be very unlikely to have a <div> inside a paragraph.

16. Example of the <span> tag <body> This sentence has one word in <span style="color:#0000FF;"> blue </span> and the rest in standard text color. <span style="color:#00DD45;">This sentence is in green.</span> <p style="font-style:italic; font-size:200%">Note how unlike tags such as ‘h’ ‘p’ or ‘div’, the ‘span’ tag doesn’t apply extra formatting such as new lines. </p> </body>

17. Place all paragraphs in a ‘p’ tag • It is a very good idea to place all paragraphs of content in between <p> and </p> tags. • This allows you to apply formatting inside that p tag, and also positioning – such as moving your paragraph to another position in the window. • We will discuss positioning later on in the course.

18. div tag • This tag is more organizational than anything. It is typically used to divide your page into meaningful sections • Header (e.g. logo + Company Name) • Tagline (e.g. company slogan) • Navigation (e.g. table of contents) • Footer (e.g. contact information)

19. div Tag Continued • So, the div tag is used to help divide your page into sections. • In other words, even inside the <body> area, it will be a good idea to organize your web page into sections. • It is possible (and common) to have several tags (p, a, h, etc) inside a given div section. • However, the opposite does not apply: you will not typically include a div tag inside other tags

20. Use an ‘id’ attribute with div tags • We will discuss the use of the ‘id’ attribute in more detail later. For now, simply get in the habit of including this attribute with every div tag. • An ‘id’ attribute must be unique to each tag. That is, no two tags in a web document may have the same id values. • Choose id values carefully. Be sure they describe the purpose of that div section.

21. Template using ‘div’ <body> <div id="header"> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. </div> <div id="main_content"> Thank you for visiting our site. We hope that you will find everything that….. </div> <div id="footer"> <a href=“contact.htm”>Contact Us</a> | FAQ | Shipping | Returns </div> </body>

22. Colors in CSS There are four ways to specify a color in HTML and CSS: • Hexadecimal form: body {color: #008080} • We will use this form • Note the pound sign (#) – this HAS to be there. • RGB color values: body {color: rgb(0,128,128) } • RGB color percentages: body {color: rgb(0%,50%,50%) } • Name code: body {color: teal } Most people use hexadecimal, and that is what we will use in this course. Sometimes during testing, I will use the ‘name code’, (e.g. ‘blue’) but when making a “professional” page, I use hex codes. You should use hex for your assignments.

23. Colors: Names, RGB, and Hex values This is only a very small sampling of the colors available to you. Google ‘html color swatch’ to get a sense of what else is available. One example: http://websitetips.com/colorcharts/visibone/hex/