DDQ TUE 2020-11-24 @ 12:45 PM

39. CSS

39.1. Agenda

  1. General Announcements

    • Paper presentation videos are now posted to eLC.

    • Any remaining presentations and guest speaker videos will be uploaded before this weekend.

  2. Tentative Roadmap

    Day

    Date

    Event / Assignment

    TUE

    11-24

    Last DDQ prior to Thanksgiving

    THU

    11-26

    No Class: Thanksgiving Holiday

    THU

    12-03

    Exam 2

    MON

    12-07

    Last DDQ prior to Finals

    FRI

    12-11

    Milestone 4: Prototyping & Testing

  3. Activity

39.2. Activity

Important

Your instructor may use the JSFiddle found here or the “Developer” mode of their web browser while discussing some of the concepts on this page.

39.2.1. Introduction to CSS

CSS
cascading style sheets

A declarative language used to describe the presentation of a document written in a DOM-compatible markup language (e.g., HTML).

See also

CSS Standard

cascading

adj. falling in or as in a cascade – OED

cascade

noun. a waterfall; formerly in a wider sense; applied to a succession of stages or processes in some operation; – OED

39.2.2. The DOM

document

Any use of a markup language (e.g., HTML).

user agent

The program that renders a document. For HTML, the user agent is often called the web browser.

element

A part of a document that is usually displayed.

tag

In some markup languages, special markup used to start and end an element. HTML uses tags; however, other languages like Markdown (MD) and reStructuredText (RST) use adjacent text to denote elements.

attribute

Metadata about an element.

DOM
document object model

The in-memory tree data structure representing a parsed document. The following tools can be used to inspect or visualize a DOM for an HTML document:

Example

Here is an example of an HTML document:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
  <body>
    <h1>HTML is Awesome</h1>
    <p id="para1">Some text...</p>
    <ul class="some-list">
      <li>one</li>
      <li>two</li>
    </ul>
  <body>
</html>

Here is a depiction of the corresponding DOM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
HTML
  HEAD
  BODY
    #text:
    H1
      #text: HTML is Awesome
    #text:
    P id="para1"
      #text: Some text...
    #text:
    UL class="some-list"
      #text:
      LI
        #text: one
      #text:
      LI
        #text: two
      #text:
    #text:

39.2.3. The Cascade

CSS stylesheet

A collection of style rules, usually stored in a .css file or element within a document (e.g., a style element in HTML).

Stylesheets may have three different origins:

  1. Author: The author specifies stylesheets for a source document according to the conventions of the document language.

  2. User: The user may be able to specify style information for a particular document via their user agent.

  3. User Agent: Conforming user agents must apply a default style sheet (or behave as if they did).

Once a user agent has constructed a DOM tree, it must assign, for every element in the tree, a value to every applicable property. The final value of a property is the result of a four-step calculation:

  1. determined through specification — “specified value”

  2. resolved into a value that is used for inheritance — “computed value”

  3. converted into an absolute value if necessary — “used value”

  4. transformed according to the limitations of the local environment — “actual value”

CSS property

A characteristic of an element whose associated value defines one aspect of how the user agent should display the element. A property declaration in a CSS rule has a name, followed by a colon and the declaration value; multiple property declarations are separated semicolons.

See also

A list of all standard CSS properties can be found here; however, this list of common properties from MDN is usually more approachable.

CSS rule
CSS style declaration

In CSS, a set of properties associated with a CSS selector. A qualified rule starts with a prelude then has a {}-wrapped block containing a sequence of property declarations. For style rules, the term prelude refers to a selector that specifies what elements the declarations will apply to.

1
2
3
4
p {
    color: black;
    font-family: helvetica, sans-serif;
}
CSS selector

Specifies what elements a qualified rule will apply to. Formally, a selector is a chain of one or more sequences of simple selectors separated by combinators. Optionally, a pseudo-element may be appended to the last sequence of simple selectors in a selector.

39.2.4. Selectors and Combinators

CSS simple selector

A simple selector is one of the following:

CSS type selector

Selects elements based on each element’s type name.

1
p { color: blue; }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <body>
    <h1>HTML is Awesome</h1>
    <p id="para1">Some text...</p>
    <ul class="blue-text">
      <li>one</li>
      <li>two</li>
    </ul>
    <p class="blue-text">Some more text</p>
  <body>
</html>

See also

CSS3 6.1. Type selector

CSS id selector

Selects elements based on each element’s id attribute.

1
#para1 { color: blue; }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <body>
    <h1>HTML is Awesome</h1>
    <p id="para1">Some text...</p>
    <ul class="blue-text">
      <li>one</li>
      <li>two</li>
    </ul>
    <p class="blue-text">Some more text</p>
  <body>
</html>

See also

CSS3 6.5. ID selectors

CSS class selector

Selects elements based on each element’s class attribute.

1
.blue-text { color: blue; }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
  <body>
    <h1>HTML is Awesome</h1>
    <p id="para1">Some text...</p>
    <ul class="blue-text">
      <li>one</li>
      <li>two</li>
    </ul>
    <p class="blue-text">Some more text</p>
  <body>
</html>

See also

CSS3 6.4. Class selectors

CSS universal selector

Selects all elements.

1
* { color: blue; }

See also

CSS3 6.2. Universal selector

CSS attribute selector

Selects all elements with an attribute that matches the attribute represented by the attribute selector. CSS2 introduced four attribute selectors:

[att]

Represents an element with the att attribute, whatever the value of the attribute.

[att="val"]

Represents an element with the att attribute whose value is exactly "val".

Note

Every id selector can be rewritten using an attribute selector:

1
2
*p#some-id
*p[id="some-id"]
[att~="val"]

Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, or is the empty string, then it will never represent anything.

Note

Every class selector can be rewritten using an attribute selector:

1
2
*.some-class
*[class~="some-class"]
[att|="val"]

Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).

CSS pseudo-class

Classify selected elements on characteristics other than their name, attributes or content. Pseudo-classes do not, themselves, appear in the document source or DOM. A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses. Here is an example:

1
2
a:link { color: blue; }
a:visited { color: purple; }

Here is another example: the :first-child pseudo-class matches an element that is the first child element of some other element.

1
body:first-child { color: green; }

Selectors can be combined to describe elements in sub-trees of the DOM that should be matched. These combinators help us fine-tune what elements are selected.

CSS combinator

An operator that combines two selectors to imposes additional matching constraints.

CSS descendant combinator

Usage: selector1 selector2. Selects elements described by selector2 that are descendants of elements described by selector1 in the DOM.

1
body p

1
2
3
4
5
6
7
8
<html>
  <body>
    <p id="para1">Some text...</p>
    <div class="admonition">
      <p class="blue-text">Some more text</p>
    </div>
  <body>
</html>

See also

CSS3 8.1. Descendant combinator

CSS child combinator

Usage: selector1 > selector2. Selects elements described by selector2 that are direct children of elements described by selector1 in the DOM.

1
body > p

1
2
3
4
5
6
7
8
<html>
  <body>
    <p id="para1">Some text...</p>
    <div class="admonition">
      <p class="blue-text">Some more text</p>
    </div>
  <body>
</html>

See also

CSS3 8.2. Child combinators

CSS next sibling combinator

Usage: selector1 + selector2. Selects elements described by selector2 that are immediate, next siblings of elements described by selector1 in the DOM.

1
#para1 + p

1
2
3
4
5
6
7
<html>
  <body>
    <p id="para1">Some text...</p>
    <p class="blue-text">Some more text</p>
    <div class="admonition"></div>
  <body>
</html>

See also

CSS3 8.3.1. Next-sibling combinator

CSS subsequent sibling combinator

Usage: selector1 ~ selector2. Selects elements described by selector2 that are next siblings (not required to be immediately next) of elements described by selector1 in the DOM.

1
#para1 ~ p

1
2
3
4
5
6
7
<html>
  <body>
    <p id="para1">Some text...</p>
    <p class="blue-text">Some more text</p>
    <div class="admonition"></div>
  <body>
</html>

See also

CSS3 8.3.2. Subsequent-sibling combinator

Here are some other ways to combine selectors:

  • Intersection: You can omit space between selectors to take their intersection. This can be done for any two selectors so long as they’re not both type selectors:

    1
    p.blue-text

    1
2
3
4
5
6
7
    <html>
  <body>
    <p id="para1">Some text...</p>
    <p class="blue-text">Some more text</p>
    <div class="admonition"></div>
  <body>
</html>

  • Union: You can comma-separate selectors to take their union:

    1
    p, div

    1
2
3
4
5
6
7
    <html>
  <body>
    <p id="para1">Some text...</p>
    <p class="blue-text">Some more text</p>
    <div class="admonition"></div>
  <body>
</html>

39.2.5. Using the Universal Selector

Usually, the presence of a universal selector has no effect on whether an element is matched by a selector. The following pairs of selectors are equivalent:

1
2
*[hreflang|=en]
[hreflang|=en]

1
2
*.warning
.warning

1
2
*#myid
#myid

39.2.6. Pseudo Elements

CSS pseudo-element

Abstractions about the DOM beyond those specified by the document language. A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. Here are some examples:

::first-letter

Represents the first letter of an element, if it is not preceded by any other content on its line.

1
2
3
p::first-letter {
    font-size: xx-large;
}
::before and ::after

Represents CSS-generated content before or after an element’s content.

1
2
3
li::after {
    content: ";"
}

See also

CSS3 7. Pseudo-elements

39.2.7. Selectors in Javascript

Vanilla Javascript

  • node.querySelector('selector')

    returns the first descendent element (of node) that is matched by the selector.

    See also

    MDN: Document.querySelector()

  • node.querySelectorAll('selector')

    returns a static (not live) list of descendent elements (of node) that are matched by the selector.

    1
2
    let buttons = document.querySelectorAll('.access-button');
buttons.forEach(button => button.onclick = some_handler);

    See also

    MDN: Document.querySelectorAll()

jQuery

  • $('selector')

    returns a jQuery object representing a list of document elements that are matched by the selector.

    1
    $('.access-button').click(some_handler);