Scribd
Upload
15 views

BIM222 InternetProgramming Week6

Uploaded by

sailorsparrow.ad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

BIM222 InternetProgramming Week6

Uploaded by

sailorsparrow.ad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

4/6/21

BIM222 Internet Programming

Week 6 – Cascading Style Sheets (CSS)


Adding Style to your Web Pages

Outline
§ CSS Simple Selectors
§ What is CSS?
§ Element
§ CSS Syntax § Class
§ CSS How to § Id
§ Inline Style § CSS Combinator Selectors
§ Internal Style Sheet
§ CSS Colors
§ External Style Sheet
§ CSS Backgrounds
§ “Cascading” Part of CSS
§ Style Text
§ CSS Text
§ CSS Fonts

1
4/6/21

Review: What Kinds of Files


Files Viewed through a Web Browser

Structure Style Behavior

What is CSS?
§ CSS stands for Cascading Style Sheets
§ CSS is a language that describes the style of an HTML document
§ CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
§ CSS saves a lot of work
§ It can control the layout of multiple web pages all at once
§ With an external stylesheet file (saved in external .css file), you can change the
look of an entire website by changing just one file!
Ex: https://www.w3schools.com/css/css_intro.asp
§ Why use CSS?
§ CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes

2
4/6/21

CSS Solved a Big Problem


§ HTML was NEVER intended to contain tags for formatting a web page!
§ HTML was created to describe the content/structure of a web page, like:
§ <h1>This is a heading</h1>
§ <p>This is a paragraph.</p>
§ When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers
§ Development of large websites, where fonts and color information were added to
every single page, became a long and expensive process
§ To solve this problem, the World Wide Web Consortium (W3C) created CSS
§ CSS removed the style formatting from the HTML page!

CSS Syntax
§ A CSS rule-set consists of a selector and
a declaration block: Selector Property Value
§ The selector points to the HTML element
you want to style
§ The declaration block contains one or more
declarations separated by semicolons
§ Each declaration includes a CSS property
name and a value, separated by a colon
§ Ex: color is the property and blue is the
property value Declaration
§ A CSS declaration always ends with a
semicolon, and declaration blocks are
surrounded by curly braces
§ CSS defined generic rules that can apply
to multiple elements

3
4/6/21

Multiple Properties Style Sheet

Zero or More
Declarations
are allowed

Stylesheet

When a browser reads a style sheet, it will format the HTML


document according to the information in the style sheet

CSS How To…


Don’t forget à Browsers also have default styling!!
§ The same html file may look different when viewed on different
browsers
§ Some tags are supported, some aren’t
§ Browsers may have different default styles
§ In general, default looks are plain

4
4/6/21

CSS How To…


There are three ways of inserting a style sheet
§ Inline Style
§ Internal Style Sheet
§ External Style Sheet

week6-sampleCodes/inlineStyle.html

Inline Styles
§ To use inline styles, add the style attribute to the relevant element
§ The style attribute can contain any CSS property

§ Violated separation of content/style


§ An inline style may be used to apply a unique style for a single
element
Tip: An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly

5
4/6/21

Internal Style Sheet


§ Internal styles are defined
within the <style> element,
inside the <head> section
of an HTML page
§ Styling is defined within
<head> Don’t forget to
§ Rules are defined within close the style tag!!
<style>
§ Styles are applied to all
elements in that file

Tip: An internal style sheet may be used


if one single page has a unique style week6-sampleCodes/internalStyle.html

External Style Sheet


§ You can put rules in an external file (don’t use the style tag!!)
§ With an external style sheet, you can change the look of an entire website by
changing just one file!
§ Each page must include a reference to the external style sheet file inside the
<link> element, inside the head section
§ The <link> tag defines a link between a document and an external resource
§ The <link> element is an empty element, it contains attributes only
§ rel: Specifies the relationship between the current document and the linked document (required)
§ type: Specifies the media type of the linked document
§ href: Specifies the location of the linked document
§ The <link> element goes inside the <head> section:

§ Styles are applied to all elements in all files that links to the style sheet

6
4/6/21

§ An external style sheet can be written in any text editor,


and must be saved with a “.css” extension

External Style Sheet § The external “.css” file should not contain any HTML tags
§ Here is how the "mystyle.css" file looks like:

week6-sampleCodes/externalStyle.html
week6-sampleCodes/css/mystyle.css

The “Cascading” Part of CSS


What style will be used when there is more than one style specified for
an HTML element?
§ Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules (HTML is top-down)
§ Browser default
§ External or Internal style sheets (in the head section)
§ Inline style (inside an HTML element)
§ So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value

7
4/6/21

Multiple Style Sheets


§ If some properties have been defined for the same selector (element)
in different style sheets, the value from the last read style sheet will
be used.
§ Assume that an external style sheet has the following style for the <h2>
element:

§ Then, assume that an internal style sheet also has the following style for the
<h2> element:

Multiple Style Sheets


§ If the internal style is defined after the link to the external style
sheet, the <h2> elements will be "orange"

week6-sampleCodes/external_than_internal.html

8
4/6/21

week6-sampleCodes/internal_than_external.html

Multiple Style Sheets


§ However, if the internal style is defined before the link to the
external style sheet, the <h2> elements will be ”green":

What if there is also an inline style defined for <h2>?

Rule Precedence
§ What if one selector is defined in two external files?
§ The rules from the most recent file have precedence
§ What if one selector has more than one rule in the same file?
§ The most recent rule has precedence

week6-sampleCodes/twoExternalSheets.html
week6-sampleCodes/multiple.html

9
4/6/21

CSS Selectors
§ CSS selectors are used to "find" (or select) HTML elements you want
to style
§ We can divide CSS selectors into 5 categories:
1. Simple Selectors (select elements based on element name, id, class)
§ The element Selector
§ The class Selector
§ The id Selector
2. Combinator Selectors (select elements based on a specific relationship
between them)
3. Pseudo-class Selectors (select elements based on a certain state) (next week!!)
4. Pseudo-elements Selectors (select and style a part of an element) (next week!!)
(next week!!)
5. Attribute Selectors (select elements based on an attribute or attribute
value)

Simple Selectors: The element Selector


§ The element selector selects elements based on the element name
Element Name

§ We can select all <p> elements on a page like above


§ In this case, all <p> elements will be with a blue text color

10
4/6/21

Example: The element Selector


Blue Text

Element Name

Blue Text

Simple Selectors: The class Selector


§ The class selector selects elements with a specific class attribute
§ To select elements with a specific class, write a period (.) character,
followed by the name of the class

Class Name

11
4/6/21

The class Selector Used without dot (.)


Blue Text

Class Name: Defined with dot (.)

Unaffected
Blue Text
text

week6-sampleCodes/classSelector.html

Example: The class Selector


Ex1: All HTML elements with class="center" will be red and center-aligned

12
4/6/21

week6-sampleCodes/classSelector2.html

Example: The class Selector


Ex2: We can also specify that only specific HTML elements should be
affected by a class
§ Below, only <p> elements with class="center" will be center-aligned

week6-sampleCodes/classSelector3.html

Example: The class Selector


Ex3: HTML elements
can also refer to more
than one class
§ The second <p>
element will be
styled according to
class="center" and
to class="large"

Note: A class name cannot start with a number!

13
4/6/21

Simple Selectors: The id Selector


§ The id selector uses the id attribute of an HTML element to select a
specific element
§ The id of an element should be unique within a page, so the id
selector is used to select one unique element!
§ To select an element with a specific id, write a hash (#) character,
followed by the id of the element
id Value

Unaffected
The id Selector text

id Value: Defined with hash (#)

Used without hash (#) Blue Text

14
4/6/21

Example: The id Selector


Ex: The style rule will
be applied to the HTML
element with
id="para1"

week6-sampleCodes/idSelector.html

Grouping Selectors
§ If you have elements with the same style
definitions, like this à

§ It will be better to group the selectors, to


minimize the code

§ To group selectors, separate each selector with a


comma

15
4/6/21

Grouping Selectors Blue Text

Separate selectors
with commas (,) Unaffected
text

Blue Text
week6-sampleCodes/simple-selectors-before.html
week6-sampleCodes/simple-selectors-after.html

Summary Selector Property Value

CSS Simple Selectors:


element, class & id
Declaration
selector selects elements with a uses the id attribute of an HTML element to
selects elements based on specific class attribute - write a select a specific element
the element name à period (.) character, followed by • id of an element should be unique within a
Ex: all <p> elements will the name of the class à Ex: All page, so the id selector is used to select one
be with a blue text color HTML elements with class=”blue" unique element!
will be with a blue text color • write a hash (#) character, followed by the id
• The style rule will be applied to the HTML
Element Selector Class Selector element with id=”name"
id Selector
Element Name Class Name: Defined with dot (.) id Value: Defined with hash (#)

16
4/6/21

Combining Selectors
§ A CSS selector can contain more than one simple selector
§ Between the simple selectors, we can include a combinator
§ A combinator is something that explains the relationship between the
selectors
§ There are five different combinators in CSS:
1. Element with class Selector à (selector.class)
2. Child (direct) Selector (>) à (selector > selector)
3. Descendant Selector (space) à (selector selector)
4. Adjacent Sibling Selector (+) à (selector + selector)
5. General Sibling Selector (~) à (selector ~ selector)

1. Element With Class Selector


Every p that has class=“big”

p.big {
font-size: 20px;
}

NOTE lack of space between element and class definition

17
4/6/21

Example: Element With Class Selector


Text with 20px

...
p.big {
<p class=“big”> ... </p>
font-size: 20px;
<div class=“big”> ... </div>
}
<p> ... </p>
...

week6-sampleCodes/advanceSelectors/elementWithClassSelector.html
week6-sampleCodes/advanceSelectors/element-with-class-before.html Unaffected text
week6-sampleCodes/advanceSelectors/element-with-class-after.html

2. Child (direct) Selector (>)


Every p that is direct child of article
§ The child selector
selects all elements
that are the immediate
children of a specified
element
article > p {
§ Ex: selects all <p> color: blue;
elements that are }
immediate children of
an <article> element

18
4/6/21

Example: Child (direct) Selector (>)


Blue text
<article> ...
Every p that is direct <p> ... </p>
child of article </article> Unaffected text
...
<p> ... </p>
article > p {
color: blue; <article> ...
} <div><p> ... </p></div>
</article>

week6-sampleCodes/advanceSelectors/childSelector.html
week6-sampleCodes/advanceSelectors/child-selector-before.html Unaffected text
week6-sampleCodes/advanceSelectors/child-selector-after.html

3. Descendant Selector (space)


Every p that is inside (at any level) of article
§ The descendant selector
matches all elements that
are descendants of a
specified element
article p {
§ Ex: selects all <p>
elements inside <article> color: blue;
elements }

19
4/6/21

Example: Descendant Selector (space)


Blue text
<article> ...
Every p that is inside
<p> ... </p>
(at any level) of article
</article> Unaffected text
...
<p> ... </p>
article p {
color: blue; <article> ...
} <div><p> ... </p></div>
</article>

week6-sampleCodes/advanceSelectors/descendant-selector-before.html Blue text


week6-sampleCodes/advanceSelectors/descendant-selector-after.html

4. Adjacent Sibling Selector (+)


§ The adjacent sibling selector Every p that is placed immediately after article
selects all elements that are
the adjacent siblings of a
specified element

§ Sibling elements must have


the same parent element, and
“adjacent” means article + p {
“immediately following”
color: blue;
§ Ex: selects all <p> elements
that are placed immediately }
after <article> elements

20
4/6/21

Example:
Adjacent Sibling
Selector (+)
week6-sampleCodes/advanceSelectors/adjacentSiblingSelector.html

5. General Sibling Selector (~)


§ The general sibling selector
selects all elements that are Every p that is sibling of article
siblings of a specified
element

§ Sibling elements must have


the same parent element
article ~ p {
color: blue;
§ Ex: selects all <p> elements }
that are siblings of <article>
elements

21
4/6/21

Example:
General Sibling
Selector (~)

Every p that is sibling


of article

week6-sampleCodes/advanceSelectors/generalSiblingSelector.html

Not Limited to Element Selectors

.colored p { p > .colored {


color: blue; color: blue;
} }

Every element with


Every p that is inside (at any level) an
class=“colored” that is direct child
element with class=“colored”
of article element

22
4/6/21

Example: Question1
Given the following HTML code:

Which of the following CSS rules turns the text of the first <p> tag blue,
but NOT the second <p> tag?

Example: Question2

Given the following HTML code:

Which of the following CSS rules turns the text of the first <p> tag blue,
but NOT the second <p> tag?

23
4/6/21

CSS Colors
Colors in CSS are most often specified by:
1) Predefined Color Names – like ”blue, red, yellow, etc.”

CSS Colors
Colors in CSS are most often specified by:
2) A RGB Value – like “rgb(255,0,0)” displayed as red
§ A color can be specified as an RGB value, using this formula: rgb(red, green, blue)
§ Each parameter (red, green, blue) defines the intensity of the color between 0 and 255
§ To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0)
§ To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255)

24
4/6/21

CSS Colors
Colors in CSS are most often specified by:
3) A Hexadecimal Value – like “#000FF, #FF0000, #FFFF00”
§ A color can be specified using a hexadecimal value
§ #RRGGBB, where RR (red), GG (green), BB (blue) are hexadecimal values between 00 and FF
(same as decimal 0-255)

CSS Colors
Colors in CSS are most often specified by:
§ In addition, CSS3 also introduces:
4) A RGBA Value
§ RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity
§ An RGBA color value is specified with: rgba(red, green, blue, alpha)
§ The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
5) A HSL Value
§ A color can be specified using hue, saturation and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
§ Hue is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue
§ Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color
§ Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
6) A HSLA Value
§ HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity
§ An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)
§ The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

25
4/6/21

CSS Colors
We can set the color of, what?

§ Text Color
§ We can set the color of text
<h1 style="color:Tomato;">Hello World</h1>
§ Background Color
§ We can set the background color for HTML elements
<h1 style="background-color:DodgerBlue;">Hello World</h1>
§ Border Color
§ We can set the color of borders
<h1 style="border:2px solid Tomato;">Hello World</h1>

https://www.w3schools.com/css/css_colors.asp

CSS Backgrounds
§ CSS background properties are used to define the background effects for
elements
§ CSS background properties are
§ background-color à specifies the background color of an element
§ The background color of a page is set like this:

§ background-image à specifies an image to use as the background of an element


§ By default, the image is repeated so it covers the entire element

26
4/6/21

CSS Backgrounds
§ CSS background properties are
§ background-repeat à Some images should be repeated only horizontally or vertically
§ no-repeat, repeat-x (to repeat an image horizontally), repeat-y (to repeat an image vertically)
§ background-attachment à To specify that the background image should scroll or be fixed
§ fixed, scroll (will not scroll with the rest of the page)
Ex: https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment
§ background-position à sets the starting position of a background image
§ By default a background-image is placed at the top-left corner of an element, and repeat both vertically
and horizontally
§ left top, left center, left bottom, right top, right center, right bottom, center top, center center, center
bottom week6-sampleCodes/background/background-before.html
§ Background – Shorthand property week6-sampleCodes/background/background-after.html
§ Specify all the background properties in one single property, namely background property

Styling Text: CSS Text


§ Text Color
§ The color property is used to set the color of the text
§ h1 { color: blue; }
§ The default text color for a page is defined in the body selector
§ Text Alignment
§ The text-align property is used to set the horizontal alignment of a text
§ Values for text-align property: left, right, center, or justify
§ h1 { text-align: left; }
§ Text Decoration
§ The text-decoration property is used to set or remove decorations from text
§ The property-value pair text-decoration: none; is often used to remove underlines
from links
§ a { text-decoration: none; }
§ Other values for text-decoration property used to decorate text: overline, underline,
line-through

27
4/6/21

Styling Text: CSS Text


§ Text Transformation
§ The text-transform property is used to specify uppercase and lowercase letters in a text
§ Values for text-transformation property: turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word
§ p { text-transform: capitalize}
§ Text Indentation
§ The text-indent property is used to specify the indentation of the first line of a text
§ p { text-indent: 50px; }
§ Letter Spacing
§ The letter-spacing property is used to specify the space between the characters in a text
§ h1 { letter-spacing: 3px; }

Styling Text: CSS Text


§ Line Height
§ The line-height property is used to specify the space between lines, hence not affects font
§ p.small { line-height: 0.8; } or p.big { line-height: 1.8; }
§ Word Spacing
§ The word-spacing property is used to specify the space between the words in a text
§ h1 { word-spacing: 10px; } or h2 { word-spacing: -5px; }
§ Text Shadow
§ The text-shadow property adds shadow to text
§ h1 { text-shadow: 3px 2px red; }
à the position of the horizontal shadow (3px),
the position of the vertical shadow (2px)
and the color of the shadow (red)

week6-sampleCodes/stylingText/styling-text-before.html
week6-sampleCodes/stylingText/styling-text-after.html

28
4/6/21

Styling Text: CSS Fonts


CSS font property define the font family, boldness, size, and style of a text
§ Font Family
§ The font family of a text is set with the font-family property
§ The font-family property should hold several font names as a "fallback" system
§ If the browser does not support the first font, it tries the next font, and so on
§ p { font-family: "Times New Roman", Times, serif; }
§ Font Style
§ The font-style property is mostly used to specify italic text. It has three values
§ normal - The text is shown normally
§ italic - The text is shown in italics
§ oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
§ p.italic { font-style: italic; }

Styling Text:
CSS Fonts
§ Font Weight
§ The font-weight property specifies the weight of a font (normal, bold)
§ Font Variant
§ The font-variant property specifies whether or not a text should be displayed
in a small-caps font
§ In a small-caps font, all lowercase letters are converted to uppercase letters
However, the converted uppercase letters appears in a smaller font size than
the original uppercase letters in the text

29
4/6/21

Styling Text: CSS Fonts


§ Font Size
§ The font-size property sets the size of the text
§ Managing the text size is important in web design
§ However, you should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs
§ Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs
§ The font-size value can be an absolute, or relative size
§ Absolute Size (px)
§ Sets the text to a specified size
§ Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
§ Absolute size is useful when the physical size of the output is known
§ Relative Size (em)
§ Sets the size relative to surrounding elements
§ Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em)

Styling Text: CSS Fonts


Absolute Size Relative Size
§ Set Font Size with Pixels § Set Font Size with Em
§ Setting the text size with pixels § To allow users to resize the text (in the
gives you full control over the text browser menu), many developers use
size em instead of pixels
§ Recommended by the W3C
§ 1em = 16px
§ The size can be calculated from pixels
to em using this formula: pixels/16=em

Quote from "The Principles of Beautiful Web Design"


"An em is a CSS unit that measures the size of a font, from the top of a font's cap height to the bottom of its lowest
descender. Originally, the em was equal to the width of the capital letter M, which is where its name originated."

30
4/6/21

Styling Text: In this example the text size is same in both. However, with
the em size, it is possible to adjust the text size in all browsers
CSS Fonts week6-sampleCodes/font-size/absoluteSize.html
week6-sampleCodes/font-size/relativeSize.html

Absolute Size Relative Size

Unfortunately, there is still a problem with older versions of IE with the em sizeà The text becomes
larger than it should when made larger, and smaller than it should when made smaller!

Solution: Use a Combination of Percent and Em

The solution that works in all browsers,


is to set a default font-size in percent
for the <body> element

Our code now works great! It shows the


same text size in all browsers and allows all
browsers to zoom or resize the text!

week6-sampleCodes/font-size/combination.html
week6-sampleCodes/font-size/font-size-before.html
week6-sampleCodes/font-size/font-size-after.html

31

You might also like