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

Learning Objectives After reading/watching/practicing this topic, you should be able to: Name the standards group that developed CSS. – Hint: It’s the same group that in responsible for developing the HTML standard. Name the three components that make up an inline CSS style. Be able to create an inline style. Be able to assign a color to a style using hexadecimal code.

HTML code defines the organization of a document HTML was originally designed so that the tags indicate only the content and organization of a document (headings, lists, titles, etc). It was NOT designed to do the formatting (e.g. bolding, italics, colors, etc). The idea was that the particular web client being used to view the HTML page would apply its own formatting depending on its available fonts, available colors, resolution, 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

…but developers began to want more… 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). For this reason, several formatting tags and attributes 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 among the many different web clients in use. 4

…and then it started getting out of hand… Developers soon started getting carried away though… They started inventing their own HTML formatting tags. Yet most of these tags had not standardized by the W3C which meant that some browsers supported them, and others did not. In addition, because there was no uniformity, even when a tag was “popular” different browsers often displayed the tags differently. All of this went completely against the main objective of HTML which is that a web document should look the same on any browser, on any computer, running any operating system ! A few years ago, the W3C basically decided to start over. They decreed that HTML was no longer to be used for formatting. However, they did come up with a standardized—and quite powerful—way of formatting documents which they called Cascading Style Sheets (CSS). 5

Enter: Cascading Style Sheets (CSS) The W3 Consortium ( 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 – not replace — HTML by allowing web designers a powerful and consistent way of formatting web pages. 6

Separating Content and Style The fundamental difference between CSS and HTML, is the distinction between the outline and content of a web page (achieved via HTML) and the style/positioning of that content (achieved via CSS). As we learn about CSS you will see that it provides us with: – Consistent design (e.g. changing a style definition in a single “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. We will begin to introduce those rules in this topic. 7

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: 8 “property” “value” “property”“selector”

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 and its value are separated by a colon ( : ). o Recall that in HTML, we assign an attribute to its value by using the equals sign. However in CSS, we separate a property from its value by a colon. If you include multiple groups of property/value pairs, each group must be separated by semicolons ( ; ). – I typically put a semicolon after every property/value pair. 9

Property / Value Pairs Comparison of how you assign an attribute/property with its value in HTML v.s. CSS: – HTML syntax: attribute="value" – CSS syntax: style="property:value;" 10

Example: Our first CSS style This example applies 3 different styles to a single h1 tag. Note how each property is separated from its value by a colon. Note how each style is separated from the next by a semicolon. <h1 style="font-family:Arial; font-style:italic; font-weight:bold; color:blue;" > 11

Three ways of creating a style: Inline, Internal, External There are 3 different ways that you can apply a CSS style. 1.Inline style 2.Internal (or Embedded) style 3.External style Each has its various advantages. 12

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. – 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. 13

Inline Style For an inline style, the style is declared inside the tag: 14

Inline Style Examples Identify the selector, property, and value body is the selector, color is the property, and blue is the value. This style would set the text of the entire body to blue. body is the selector, background-color is the property, and silver is the value. This style would set the background color of the entire document to silver. 15

Inline Style Examples In the style p is the selector, font-family and font-weight are the properties, and Arial and bold are the values. In the style p is the selector, font-size and color are the properties, and 300% and red are the values. These tags have their usual closing tags. 16

Example This is plain h3 <h3 style="font-family:Arial, Times; font-style:italic; color:green"> This is an example of h3 in Arial, italic, green. 17 This is plain h3 This is h3 in Arial, italic, and green

How to specify colors There are four well-known ways to specify a color. All four examples below specify the color ‘teal’ but in different ways: Name code: body { style= " color: teal " } Hexadecimal form: body {style= " color: # "} – We will use this form – Note the pound sign (#) – this HAS to be there. RGB color values: body {style= " color: rgb(0,128,128) "} RGB color percentages: body {style= " color: rgb(0%,50%,50%) "} 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. 18

Colors: Names, RGB, and Hex values 19 This is only a very small sampling of the colors available to you. Google “html color swatch” and you’ll see a vast number of pages with similar tables/swatches. One example:

Use Hex codes for your colors! When playing around on your own during testing, experimenting and so on, feel free to use color names. However, when doing “official” work (e.g. homework assignments, quizzes, etc) you should always use hex codes. Happy Grader: … Critical Grader: … 20

Stylin’ with div, and p Tags We’ve seen that you can apply styles within a single tag. Well, what if you applied a style to a ‘p’ or ‘div’ tag? As you might expect, the resulting style would be applied to the entire paragraph (if applied to a ‘p’) or to the entire section (if applied to a ‘div’). All of the content inside this div section would be italicized. Good night… 21