Download css_intro_inline

IT 130 – Internet and the Web
Cascading Style Sheets
Part 1
1
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 (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 – 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:
“value”
“value”
<h1 style="font-size:200%; color:green;">
“selector”
“property”
“property”
8
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:
– CSS syntax:
attribute="value"
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.
– <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.
13
Inline Style
For an inline style, the style is declared inside the tag:
<h1 style="font-size:200%; font-style:italic;">
14
Inline Style Examples
Identify the selector, property, and value
<body style="color:blue;">
• 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 style="background-color:silver;">
• 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 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.
16
Example
<body>
<h3>This is plain h3</h3>
<h3 style="font-family:Arial, Times;
font-style:italic; color:green">
This is an example of h3 in Arial, italic, green.
</h3>
</body>
This is plain h3
This is h3 in Arial, italic, and green
17
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:
• Hexadecimal form:
body { style= " color: teal " }
body {style= " color: #008080 "}
– We will use this form
– Note the pound sign (#) – this HAS to be there.
• RGB color values:
• RGB color percentages:
body {style= " color: rgb(0,128,128) "}
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
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: http://websitetips.com/colorcharts/visibone/hex/
19
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:
<h1 style="color:#ff0000;">…
<h1 style="color:red; ">…
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’).
<div id="main_content" style="font-style:italic">
All of the content inside this div section would be
italicized.
</div>
<p style="color:#00ffff"> Good night… </p>
21