Scribd
Upload
12 views

Lecture 5 Css

Uploaded by

maithsp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

Lecture 5 Css

Uploaded by

maithsp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 60

Introduction to Coding and

web design
Lecture 4
Objectives

 What is CSS?
 Types of CSS
 Inline
 Embedded
 External
3 What is CSS (Cascading Style Sheets)?

 Separation of structure from presentation


 Relationship between the style formatting and the structure/content is no
longer 1:1
 multiple style sheets can be applied to the same Web page
 Same style sheet can be applied to the multiple Web page
 Cascading
 Rules to determine how to apply markup that contains other markup
CSS
4
Advantages

 Greater typography and page layout control


 Style is separate from structure
 Styles can be stored in a separate document and associated
with the web page
 Potentially smaller documents
 Easier site maintenance
Cascading Style Sheets

 A style sheet is made up of one or more style instructions (called rules) that describe how
an element or group of elements should be displayed.
 Style sheets are composed of "Rules" that describe the styling to be applied.

 Each Rule contains a Selector and a Declaration


6

Types of Cascading Style Sheets

 Inline Styles
 Embedded/Internal Styles
 External Styles
Three CSS Definition Locations
 Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style attribute.

 Embedded: the <style> markup tag

<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head>
<body>
<p>Content</p>
</body></html>

 External: the .css stylesheet file


<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CSS Syntax Sample
8

Configure a web page to display blue text and yellow background.


body { color: blue;
background-color: yellow; }
This could also be written using hexadecimal color values as
shown below.
body { color: #0000FF;
background-color: #FFFF00; }
Common Formatting
9 CSS Properties
 Common CSS Properties, including:
◦ background-color
◦ color
◦ font-family
◦ font-size
◦ font-style
◦ font-weight
◦ line-height
◦ margin
◦ text-align
◦ text-decoration
◦ width
10
Using Color on Web Pages
 Computer monitors display color as intensities of red,
green, and blue light
 RGB Color
 The values of red, green, and blue vary from 0 to 255.
 Hexadecimal numbers (base 16) represent these color
values.
Configuring Color with Inline CSS
11

 Inline CSS
 Configured in the body of the web page
 Use the style attribute of an HTML tag
 Apply only to the specific element

 The Style Attribute


 Value: one or more style declaration property and value pairs

Example: configure red color text in an <h1> element:


<h1 style="color:#ff0000">Heading text is red</h1>
Inline Style
Sheets
Example property: value pairs include:
font-family: Courier,monospace

font-style: italic font-weight: bold


font-size: 12pt font-size: large font-size: larger
color: red color: #000080
background-color: white
text-decoration: underline text-decoration: none
text-align: left text-align: center
text-align: right text-align: justify
vertical-align: top vertical-align: vertical-align: bottom
text-indent: 5em middle
text-indent: 0.2in
Inline Style Sheets
(cont.) There are many(!) CSS properties that can be manipulated.
margin-left: 0.1in margin-right: 5%
margin: 3em
padding-top: 0.1in padding-bottom: 5%
padding: 3em
border-width: thin border-width: thick
border-width: 5
border-color: red
border-style: dashed border-style: dotted
border-style: double border-style: none
whitespace: pre
list-style-type: square list-style-type: decimal
list-style-type: lower-alpha list-style-type: upper-roman
CSS Properties

Jens Oliver Meiert maintains an excellent CSS Properties


Index (along with an HTML Elements Index).

An online search will reveal many sites offering tutorials and


examples. Here are a few examples:
I W3Schools CSS Tutorial
I A Brief Introduction to the CSS “Box Model”
I W3C Web Style Sheets, CSS tips & tricks
I A self-study course given in a Wiki-style format
Inline Style Sheets (cont.)

<html>
<head> <title>Inline Style Sheets</title></head>
<body> <ol style="list-style-type:upper-alpha">
<li>one thing</li><li> or another</li>
<ul style="list-style-type:square; whitespace:pre">
<li> with this</li>
<li> or that</li>
</ul>
</ol>
</body>
</html>
Inline Style Sheets (cont.)
Styles
can be applied
<html>
<head> to
<table> ele-
<title> Inline Style Sheets </title> ments
</head>
<body> (and
sub-elements)
<table style="font-family: Arial,sans-serif">
<caption style="color: red; for
font-style: italic; interesting
text-decoration: underline">
Student data. </caption> effects.
<tr style="background-color: red"> This is better
<th> name </th> <th> age </th> handled using
</tr>
<tr> document or
<td> external style
Chris Smith </td>
<td> 19 </td> sheets.
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr><td>Doogie
Howser</td><td>9</td></tr>
</table>
Embedded Style Sheets

 Inline style sheets apply to individual elements in the


page.
 Using inline style directives can lead to inconsistencies, as
similar elements might end up formatted differently, e.g.
we might like for all <h1> elements to be centered, and
manually editing individual webpages means we could
miss altering some <h1> elements on some pages.
 Also, inline definitions mix content and presentation,
which violates the (current) general philosophy of HTML
and CSS.
 As a general rule, inline style sheet directives should be
used as sparingly as possible.
CSS Embedded (Internal) Styles
18

 Configured in the header section of a web page.


 Use the HTML <style> element
 Apply to the entire web page document
 Style declarations are contained between the opening and closing <style>
tags
 Example: Configure a web page with white text on a black background

<style>
body { background-color: #000000;
color: #FFFFFF;
}
</style>
CSS Embedded Styles
19

• The body selector sets the global


style rules for the entire page.

• These global rules are


overridden for <h1> and <h2>
elements by the h1 and h2 style
rules.

<style>
body { background-color: #E6E6FA;
color: #191970;}
h1 { background-color: #191970;
color: #E6E6FA;}
h2 { background-color: #AEAED4;
color: #191970;}
Embedded Style Sheets
<html>
<head>
<title>Document Style Sheets</title>
<style>
h1 { color: blue; text-align:
center; }
p.indented { text-indent: 0.2in;

}
</style>
</head>
<body>
<h1> Centered Title </h1>

<p class="indented">This paragraph will have the first line


indented, but subsequent lines will be flush. <br> This next line
starts unindented. </p>

<p>This paragraph will not be indented.


</p>

<h1> The End </h1>


</body>
</html>
Selectors, Properties, and Values
Embedded (and external) style sheet directives consist of a
“selector”, together with one or more “property: value” pairs, where
the pairs are enclosed inside of braces, and separated by semi-
colons.
Examples include:
h1 { color: blue; text-align: center; }

.alert { text-decoration: underline; color:


red;
font-size: 150%; }

ol, a { background-color: yellow; font-


style: bold;
font-family: "Times New Roman"; }

These directives are placed in a <style> element in the <head>


element, in a manner similar to the previous example.
Selectors, Properties, and Values
(cont.)
Note that the example
.alert { text-decoration: underline;
color: red;
font-size: 150%; }
creates a class, which can (in principle) be applied to any
HTML element, in a manner similar to the example
below (assumed to be part of a larger valid HTML
document).

<p class="alert">Help me! I’m falling down!</p>

This would create a paragraph with text that is red, underlined,


and 150% of the normal text size of the webpage.
The first example below would apply the “alert” class to both
items in the list, so both would be red, underlined, and in a
larger font. (The number of the list item is also in a larger red
font and could appear underlined or not, depending upon
the browser used, it seems.)
<ol class="alert">
<li>Help!</li>
<li>Beware!
</li>
</ol>

This second example would apply the “alert” to only the first
item in the list.
<ol>
<li class="alert">Help!</li>
<li>Beware!</li>
</ol>
Formatting
<html>
Tables Using CSS
<head>
<title> Inline Style Sheets </title>
<style type="text/css">
table { font-family: Arial,sans-serif; }
caption { color: red; font-style: italic;
text-decoration: underline; }
th { background-color:red; }
td { padding: 0 1em 0 2em; }
</style>
</head>
<body>
<table>
<caption> Student data.
</caption>
<tr><th> name </th> <th> age</th></tr>
<tr><td> Chris Smith </td> <td> 19 </td></tr>
<tr><td> Pat Jones </td> <td> 20 </td></tr>
<tr><td> Doug MacKenzie </td> <td> 32 </td></tr>
</table>
</body>
</html>
Exercise

 Using CSS types learned so far, develop one page about your hobby.
 This is page should include general information about your hobby.
 After learning external style sheets, you will create one more page about your specialized hobby
type.
External Style Sheets
 Modularity is key to the development and reuse of software.
 External style sheets place the style definitions in a separate file (or
files).
 Multiple pages can link to the same style sheet. This gives a consistent
look across the multiple pages of a website.
 Possible to make a single change in a style sheet and it propagates
automatically to all pages that use that style sheet.
 External style sheets represent the ultimate in separation of content and
its representation.
Modularity and Style Sheets
<html>
<head>
<title>Title for Page</title>
<link rel="stylesheet"
type="text/css"
href="myStyle.css"
title="myStyle">
</head>
<body>
<h1>Centered Title</h1>
<p class="indented">This
paragraph will have
the first
Here is a second line in the first
line indented, but
paragraph.</p>
subsequent lines
<p>This paragraph will not be indented. </p>
will be flush. <br>
<h1>The End</h1>
</body>
</html>

/* myStyle.css */

h1 {color : blue; text-align : center}


p.indented {text-indent: 0.5in}
Modularity and Style Sheets
(cont.)
Ideally, the developer(s) of a website will place all formatting
options in an external style sheet.

All webpages for a particular website will then link to that same
style sheet, in order to maintain a consistent look through the
set of webpages.

Using an external style sheet can help simplify webpage


design, since the developer(s) need to only specify the
structure and content of the pages, and the styling is left to the
style sheet declarations.

Note that no <style> tags are used in the external style sheet
file.
Modularity and Style Sheets
(cont.)
It is possible to use several style sheets, and it is quite common
to use one that specifies styles for a web browser and another
for styles to use when a webpage is printed.

For example, you could include two links in the <head> element
of the form

<link rel="stylesheet" type="text/css" media="screen"


href="browser.css">
<link rel="stylesheet" type="text/css" media="print"
href="print.css">

So style sheets can be tailored in this manner for different


media.
The <span>
TagProblem: Font properties apply to whole elements, which are
often too large.
Solution: A new tag to define an element in the content of a
larger element, the <span> tag. The default meaning of <span>
is to leave the content as it is (i.e. unchanged). But with a class
definition (or inline style declaration), you can apply it to a
portion of text (or some other element too).
...
<style type = "text/css"> Like most other
.bigred { font-size: 24pt; HTML tags, a <span>
font-family: Ariel;
color: red
tag can be nested,
have a style attribute,
} a class, and/or an id
</style>
... assigned to it to
apply style effects to
<p> Now is the <span class="bigred">
best time </span> ever!
its contents.
</p>
...
The <div>
Tag

The <div> tag is similar to the <span> tag, useful for defining a
section of content to which you may apply style definitions
(using a class, id, or inline style declaration attribute with the
<div> tag).

The main difference between the two tags is that, by default, a


web browser will place a line break before and after a <div>
element. (That default behavior can, of course, be changed
using other CSS declarations to alter it.)
Media Queries (or Media
Rules)
In addition to (or instead of) style sheets for different types of
media, you can also include “media queries” or “media rules” in
a style sheet that can be used to define styles for different types
of media and/or devices.

Media queries were introduced in the CSS3 specification,


extending the media types of CSS2.
Media Queries (or Media
Rules)
In addition to (or instead of) style sheets for different types of
media, you can also include “media queries” or “media rules” in
a style sheet that can be used to define styles for different types
of media and/or devices.

Media queries were introduced in the CSS3 specification,


extending the media types of CSS2.

Media queries look at the capability of the device being used by


the client, and can check many things including (according to
the W3C explanation of the “media rule”):
I width and height of the viewport
I width and height of the device
I orientation (is the phone/tablet in portrait or
landscape mode?)
I resolution
Media Queries
(cont.)
Interested people can find more information about media
queries using the provided link (and, of course, other online
searches).

A typical example might be something like the following:


...
<style type="text/css">

....

@media screen and (max-width: 500px) {


body { background-color: green; }

ul { list-style-type: square; }
}

</style>
...
Bootstr
Bootstrap is a free and open-source framework and collection
ap of tools that can be used for creating websites.
Bootstr
Bootstrap is a free and open-source framework and collection
ap of tools that can be used for creating websites.
Bootstrap has design templates using HTML and CSS
declarations for forms, navigation elements, buttons,
typography, and other interface elements. It also includes
optional JavaScipt extensions (utilizing jQuery).
Bootstr
Bootstrap is a free and open-source framework and collection
ap of tools that can be used for creating websites.
Bootstrap has design templates using HTML and CSS
declarations for forms, navigation elements, buttons,
typography, and other interface elements. It also includes
optional JavaScipt extensions (utilizing jQuery).
Bootstrap has been designed to work with all major browsers
(but the alpha release, in August 2015, of Bootstrap 4 has
dropped support for Internet Explorer version 8). And it has
also been designed to support mobile devices through the use
of media queries in all of its CSS templates.
Bootstr
Bootstrap is a free and open-source framework and collection
ap of tools that can be used for creating websites.
Bootstrap has design templates using HTML and CSS
declarations for forms, navigation elements, buttons,
typography, and other interface elements. It also includes
optional JavaScipt extensions (utilizing jQuery).
Bootstrap has been designed to work with all major browsers
(but the alpha release, in August 2015, of Bootstrap 4 has
dropped support for Internet Explorer version 8). And it has
also been designed to support mobile devices through the use
of media queries in all of its CSS templates.
I won’t be covering Bootstrap here in this module, but want to
make you aware of its existence. You are free to utilize it in
making your own websites for this course (properly attributed,
of course), but I would strongly recommend you to familiarize
yourself with basic CSS concepts first.
Web Rules of Thumb (Ok, my rules of
thumb. . . )
HTML and CSS provide lots of neat features, but just because you
can add a feature doesn’t mean you should!
Web Rules of Thumb (Ok, my rules of thumb. . . )
HTML and CSS provide lots of neat features, but just because
you can add a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Web Rules of Thumb (Ok, my rules of thumb. . . )
HTML and CSS provide lots of neat features, but just because
you can add a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Some suggestions that I offer:
Web Rules of Thumb (Ok, my rules of
HTML and CSS provide lots of neat features, but just because
thumb.
you can. add
. ) a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Some suggestions that I offer:
I Use (non-default) colors and fonts sparingly, and be
careful how elements fit together.
E.g. no purple text on a pink background, no “weird” fonts.
E.g. I find bright white text on a black background difficult
to read.
Web Rules of Thumb (Ok, my rules of
HTML and CSS provide lots of neat features, but just because
thumb.
you can. add
. ) a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Some suggestions that I offer:
I Use (non-default) colors and fonts sparingly, and be
careful how elements fit together.
E.g. no purple text on a pink background, no “weird” fonts.
E.g. I find bright white text on a black background difficult
to read.
Consider the needs of visually impaired users of your
website!! (For example, use "em"s or percentages to
specify font sizes, not fixed pixel sizes.)
Web Rules of Thumb (Ok, my rules of
HTML and CSS provide lots of neat features, but just because
thumb.
you can. add
. ) a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Some suggestions that I offer:
I Use (non-default) colors and fonts sparingly, and be
careful how elements fit together.
E.g. no purple text on a pink background, no “weird” fonts.
E.g. I find bright white text on a black background difficult
to read.
Consider the needs of visually impaired users of your
website!! (For example, use "em"s or percentages to
specify font sizes, not fixed pixel sizes.)
Remember that an estimated 8-10% of people have some
type of color-blindness, so choose color combinations
appropriately.
Web Rules of Thumb (Ok, my rules of
HTML and CSS provide lots of neat features, but just because
thumb.
you can. add
. ) a feature doesn’t mean you should!
Don’t add features that distract from the content of the page.
Some suggestions that I offer:
I Use (non-default) colors and fonts sparingly, and be
careful how elements fit together.
E.g. no purple text on a pink background, no “weird” fonts.
E.g. I find bright white text on a black background difficult
to read.
Consider the needs of visually impaired users of your
website!! (For example, use "em"s or percentages to
specify font sizes, not fixed pixel sizes.)
Remember that an estimated 8-10% of people have some
type of color-blindness, so choose color combinations
appropriately.
Some people use screen readers to read content on
webpages (so, e.g., include "alt" properties on images).
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Don’t rely on window or font size for layout.
E.g. the font size may be adjusted by the client.
Consider using CSS media queries to help account for
different devices people use.
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Don’t rely on window or font size for layout.
E.g. the font size may be adjusted by the client.
Consider using CSS media queries to help account for
different devices people use.
I Don’t be annoying!
E.g. avoid lots of pop-up windows, silly music, etc.
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Don’t rely on window or font size for layout.
E.g. the font size may be adjusted by the client.
Consider using CSS media queries to help account for
different devices people use.
I Don’t be annoying!
E.g. avoid lots of pop-up windows, silly music, etc.
I Break a large document (webpage) into several
smaller ones or provide a menu for navigation.
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Don’t rely on window or font size for layout.
E.g. the font size may be adjusted by the client.
Consider using CSS media queries to help account for
different devices people use.
I Don’t be annoying!
E.g. avoid lots of pop-up windows, silly music, etc.
I Break a large document (webpage) into several
smaller ones or provide a menu for navigation.
I Utilize style sheets to make changes easy and
ensure consistency across a set of webpages.
Consider using a tool such as Bootstrap to assist with
different cross-browser CSS implementations.
I Use images only where appropriate.
E.g. bright background images can make text hard to read.
E.g. using clickable images instead of standard HTML
buttons or links can slow access as images have to be
loaded.
I Don’t rely on window or font size for layout.
E.g. the font size may be adjusted by the client.
Consider using CSS media queries to help account for
different devices people use.
I Don’t be annoying!
E.g. avoid lots of pop-up windows, silly music, etc.
I Break a large document (webpage) into several
smaller ones or provide a menu for navigation.
I Utilize style sheets to make changes easy and
ensure consistency across a set of webpages.
Consider using a tool such as Bootstrap to assist with
different cross-browser CSS implementations.
I Stick to standard features and test many browsers
if possible (and versions of the same browser).
Configuring Color with Inline CSS
52

Example 2: configure the red text in the heading


configure a gray background in the heading

Separate style rule declarations with ;

<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red


heading with gray background</h1>
53
CSS Selectors
CSS style rules can be
configured for an:
 HTML element selector
 class selector
 id selector
 descendant selector
Using CSS with “class”
54

<style>
 class Selector .new { color: #FF0000;
font-style: italic;
 Apply a CSS }
</style>
rule to a certain "class" of
elements on a web page
 Does not associate the
style to a specific HTML element
 Configure with .classname
 code CSS to create a class called “new” with red italic text.
 Apply the class:
<p class=“new”>This is text is red and in italics</p>
External Style Sheets - 1
55

 CSS style rules are contained in a


text file separate from the HTML
documents.

 The External Style Sheet text file:


 extension ".css"
 contains only style rules
 does not contain any HTML tags
External Style Sheets - 2
56

 Multiple web pages can associate with


the same external style sheet file.

site.css
index.html
index.html
body {background-color:#E6E6FA;
color:#000000;
font-family:Arial, sans-serif; clients.html
clients.html
font-size:90%; }
h2 { color: #003366; }
.nav { font-size: 16px; about.html
about.html
font-weight: bold; }

Etc…
link Element
57

 A self-contained tag
 Placed in the header section
 Purpose: associates the external
style sheet file with the web page.
 Example:
<link rel="stylesheet" href="color.css">
Using an External Style Sheet
58

External Style Sheet color.css

body { background-color: #0000FF;


color: #FFFFFF;
}

To associate the external style sheet called color.css,


the HTML code placed in the head section is:
<link rel="stylesheet" href="color.css">
The “Cascade”
59
Exercise

 Add another page to your first page using external style sheets.

You might also like