Scribd
Upload
16 views

BIM222 InternetProgramming Week6

Uploaded by

sailorsparrow.ad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

BIM222 InternetProgramming Week6

Uploaded by

sailorsparrow.ad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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