Cascading Style Sheets: CSS Jay Urbain, Ph.D. Credits and - - PowerPoint PPT Presentation

▶
cascading style sheets css
SMART_READER_LITE
LIVE PREVIEW

Cascading Style Sheets: CSS Jay Urbain, Ph.D. Credits and - - PowerPoint PPT Presentation

Apr 01, 2023 346 likes •641 views

Cascading Style Sheets: CSS Jay Urbain, Ph.D. Credits and references: see last page. 1 HTML 5 is structural markup Describing only the content & structure of a document, not the appearance. How does the browser know how to render any

slide-1
SLIDE 1

1

Cascading Style Sheets: CSS

Jay Urbain, Ph.D.

Credits and references: see last page.

slide-2
SLIDE 2

2

HTML 5 is structural markup

  • Describing only the content & structure of a document, not

the appearance.

  • How does the browser know how to render any element (e.g.

font, size, color)? – Appearance is specified via CSS rules, which define presentation styles

  • CSS: Cascading Style Sheets
slide-3
SLIDE 3

CSS – Cascading Style Sheets

  • CSS is a language that describes the style of an HTML

document.

  • CSS describes how HTML elements should be displayed.
  • Example:

body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }

slide-4
SLIDE 4

CSS – Cascading Style Sheets

body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }

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. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

slide-5
SLIDE 5

5

CSS style rules can be embedded directly within an HTML document with <style>…</style> tags

<!DOCTYPE html> <html> <head> <meta … /> <title>SE2840</title> <style type="text/css"> /* Embedded CSS style rules go here…. */ /* Note: you can’t use HTML comments in this section! */ </style> </head> <body> <!-- HTML structural content goes here --> </body> </html>

slide-6
SLIDE 6

6

CSS rules can be placed in an external *.css file and linked to the HTML document:

<!doctype html> <html> <head> <meta … /> <title>SE2840</title> <!-- Import the CSS rules from an external .css file: --> <link rel=“stylesheet” href=“stylesheet.css” type=“text/css”/> </head> <body> <!-- HTML structural content goes here --> </body> </html>

link – element to “link” external information. rel=”stylesheet” – relationship between the HTML file and what we are linking to href – URL specifying the stylesheet location type=”text/css” – the type of this information. As of HTML5, you do not need this anymore.

slide-7
SLIDE 7

7

Multiple embedded and external style sheets can be used simultaneously

<!doctype html > <html> <head>

<meta … /> <title>SE2840</title> <style> /* Embedded CSS style rules go here…. */ </style> <style> /* More embedded CSS style rules go here…. */ </style> <!-- Import the CSS rules from external .css files: --> <link rel=“stylesheet” href=“stylesheet1.css” /> <link rel=“stylesheet” href=“stylesheet2.css” />

</head> <body> <!-- HTML structural content goes here --> </body> </html>

All styles will be applied, but if any style definitions are repeated, the last one wins.

slide-8
SLIDE 8

What if an HTML document contains no embedded <style> rules or <link> to external .css rules?

  • The browser applies its own built-in rules for applying styles to various

HTML elements! – Different browsers define different default styles – If you view an “unstyled” HTML document in different browsers, they may look somewhat different.

8

Show different browsers

file:///Users/jayurbain/Dropbox/workspaceRDF/ctakes/ctakes-smoking-status- res/src/main/resources/org/apache/ctakes/smokingstatus/analysis_engine/ArtificialSentenceAnnotator.xml file:///Users/jayurbain/Dropbox/MSOE/www/se2840/SE-2840%20Daily%20Detailed%20Outcomes.html

slide-9
SLIDE 9

9

CSS has its own syntax/vocabulary

  • CSS style rules:

selector { property1: value1; property2: value2; /* a CSS-style comment */ propertyN: valueN; }

  • selector specifies the target element(s) to which the style

rule will be applied.

  • property specifies the style parameters that are to be
  • applied. Example:

body { background-color: #d2b48c; }

slide-10
SLIDE 10

10

Selectors can be specified by considering the nested structure of an HTML document

body { color: Black; } /* applies to all <body> elements and descendants*/ p { color: Red; } /* applies to all <p> elements and descendants*/ h1 strong { color: Navy; } /* applies to all <strong> elements within <h1> elements (and descendants)*/ p em { color: Teal; } /* applies to all <em> elements within <p> elements (and descendants)*/

html h1 head body strong p title p em p em em strong These are called “descendant selectors”

slide-11
SLIDE 11

11

Style can be embedded within an individual element using the style attribute

<!doctype html> <html> <head> <meta … /> <title>SE2840</title> </head> <body> <p style=“color:red; font-family: Arial”>…</p> </body> </html>

Almost like the old “font” attribute which mixed presentation into structure.

slide-12
SLIDE 12

12

The id attribute

#gnudefn { color: Red; } Elements can also be assigned an id attribute: <p id=“gnudef”> GNU: GNU’s Not Unix </p>

  • No elements may share the same id attribute value within an

HTML document (must be unique).

slide-13
SLIDE 13

13

The id attribute can be used as a target in an <a> element

<a href=“#gnudefn”>GNU</a>

  • Clicking on this href causes the browser to scroll its window to

the position of the element with the specific attribute.

slide-14
SLIDE 14

14

Using the id attribute for style

p#gnudef { color: Maroon; }

  • Used in a style rule, the id attribute forms a specifier that

is unique to the individual <p> element possessing the “gnudef” attribute value.

  • Since the id is unique, the “p” may be omitted:

#gnudef { color: Maroon; }

Incidentally, there are 17 predefined colors

slide-15
SLIDE 15

15

The class attribute

Elements can also contain a class attribute: <p class=“definitions”> GNU: GNU’s Not Unix </p>

  • Any number of (different) elements may share the same class

attribute value within the same HTML document <h2 class=“definitions”>…</h2>

slide-16
SLIDE 16

16

Using the class attribute for style

p.definitions { color: Maroon; }

  • Used like this, the element/class attribute combination forms

a specifier that applies to all <p> elements possessing that class value

.definitions { color: Maroon; }

  • Used like this, the class attribute forms a specifier that applies

to any element possessing that class value

slide-17
SLIDE 17

17

Combining attributes

Elements can contain both id and class attributes:

.definitions { font-family: Arial; } #gnudef { color: Maroon; }

…

<p id=“gnudef” class=“definitions”> GNU: GNU’s Not Unix </p>

slide-18
SLIDE 18

18

Elements can belong to more than a single class

.definitions { font-family: Arial; } .glossary { text-decoration: underline; } #gnudef { color: Maroon; } … <p id=“gnudefn” class=“definitions glossary”> GNU: GNU’s Not Unix </p>

slide-19
SLIDE 19

19

Media selection in style sheets

Replaces the “printer-friendly version” of a web page.

  • When using a <link>

<link rel="stylesheet" href=“screenstyle.css” media=“screen"/> <link rel="stylesheet" href=“printstyle.css” media=“print"/>

  • When using <style> in <head>

<style media=“screen” > <style media=“print” >

slide-20
SLIDE 20

20

Media selection in a single style sheet

Use the @media rule: @media screen { /* use this rule for monitors*/ body {…} } @media print { /* use this rule for printers */ body {…} img.imageclass {display:none;} }

Note: other media types are defined; see W3C specs

slide-21
SLIDE 21

21

Validating Style Sheets

“CSS Validator” link on course website

  • http://jigsaw.w3.org/css-validator/
slide-22
SLIDE 22

22

Pseudoselectors : Pseudoclasses

Certain classes imply a group of elements a:link { color: Blue; } a:visited { color: Green; } a:hover { color: Red; } a:active { color: Maroon; } Show Menu

slide-23
SLIDE 23

23

Cascading Style Sheets: The Cascade

  • …how the browser determines which style to apply to a

specific element

  • Style specifications arrive from various sources…
slide-24
SLIDE 24

24

Style specification sources

  • The order in which styles are read by the browser

matters.

  • In CSS, specificity counts towards the "Cascade" too.

In order of ascending priority:

  • User-agent (browser) style sheet

– Built-in or set via Preferences - browser dependent

  • Reader style sheets

– IE: part of Internet Options – Firefox plugin extension: https://addons.mozilla.org/en- US/firefox/addon/2108/

  • Author style sheets

– Linked external style sheet(s) – Inline <style> element <head>

#example p { color: blue !important; } ... #example p { color: red; }

slide-25
SLIDE 25

25

Style specification specificity

In order of ascending priority:

  • Individual element or pseudo-element selectors

– p

  • Dependency selectors

– p em

  • Class selectors

– p.warning – .warning

  • ID selectors

– p#scarytext

slide-26
SLIDE 26

26

Resolving conflicts when multiple rules within the same group target the same element

000

A 3-digit specificity number Does the selector include an id? One point for each id. Does the selector include a class

  • r pseudo-

class? One point each Does the selector include any element names? One point each

slide-27
SLIDE 27

27

The highest number wins

000

h1=001 h1.bluetext=011 body h1=002 h1#topmost=101 Does the selector include an id? One point for each id. Does the selector include a class

  • r pseudo-

class? One point each Does the selector include any element names? One point each

slide-28
SLIDE 28

References

  • https://www.w3schools.com/css/css_examples.asp
  • http://www.w3.org/standards
  • http://en.wikipedia.org/wiki/CSS
  • Robson, Elisabeth; Freeman, Eric. Head First HTML and CSS
  • HTML and CSS for Beginners with HTML5, Mark Lassoff