DDQ THU 2021-10-28

29. CSS

29.1. Agenda

  1. General Announcements

  2. Discussion & Activity

Table 29.1 Current Assignments for Everyone

Category

Assignment

Day

Date

Term Project

Milestone 3: Design Alternatives

FRI

2021-11-05

Exams

Exam 21

TBD

TBD
1

As explained in the Exams section of the syllabus, the final milestone of your term project serves as your final examination in this course. Exam 2 is, therefore, a regular exam; it is not the final exam.

29.2. Activity

29.2.1. Introduction

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.

29.2.2. 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

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

Here is a depiction of the corresponding DOM:

../_images/domviz.svg

Here is another depiction of the corresponding DOM:

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

29.2.4. 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.

1p {
2    color: black;
3    font-family: helvetica, sans-serif;
4}
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.

29.2.5. 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.

1p { color: blue; }

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

1a:link { color: blue; }
2a: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.

1li:first-child

 1<html>
 2  <body>
 3    <p>Some text. It's in a paragraph.</p>
 4    <p>Some more text that is followd by an ordered list:</p>
 5    <ol>
 6      <li>first</li>
 7      <li>second</li>
 8      <li>third</li>
 9      <li>fourth</li>
10    </ol>
11   <p>Event more text.</p>
12  </body>
13</html>

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.

1body p

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

1body > p

1<html>
2  <body>
3    <p id="para1">Some text...</p>
4    <div class="admonition">
5      <p class="blue-text">Some more text</p>
6    </div>
7  </body>
8</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.first-item + li

 1<html>
 2  <body>
 3    <p>Some text. It's in a paragraph.</p>
 4    <p>Some more text. It's also in a paragraph, and it's followd by an ordered list:</p>
 5    <ol>
 6      <li class="first-item">first</li>
 7      <li>second</li>
 8      <li>third</li>
 9      <li>fourth</li>
10    </ol>
11   <p>Event more text.</p>
12  </body>
13</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.first-item ~ li

 1<html>
 2  <body>
 3    <p>Some text. It's in a paragraph.</p>
 4    <p>Some more text. It's also in a paragraph, and it's followd by an ordered list:</p>
 5    <ol>
 6      <li class="first-item">first</li>
 7      <li>second</li>
 8      <li>third</li>
 9      <li>fourth</li>
10    </ol>
11   <p>Event more text.</p>
12  </body>
13</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:

    1p.blue-text

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

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

    1p, div

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

29.2.6. 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*[hreflang|=en]
2[hreflang|=en]

1*.warning
2.warning

1*#myid
2#myid

29.2.7. 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.

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

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

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

See also

CSS3 7. Pseudo-elements

29.2.8. 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.

    1let buttons = document.querySelectorAll('.access-button');
2buttons.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);
../_images/kuma_css.png

Fig. 29.1 Dr. Supa’ Mike’s dog, Kuma, on 8/2/21 after hearing him talk about CSS for an hour…

29.2.9. Breakout Groups

N/A.

29.2.10. After Breakout Groups

N/A.

29.2.11. After Class

  1. Before 11:55PM today, individually respond to the prompt(s) below in Piazza @86.

    1. Color & You

    Create a followup post to Piazza @86 that answers the following questions:

    1. What is something interesting about CSS that you learned today? If you already knew about all the CSS topics discussed today, then what’s something that you find interesting about CSS? If you’re able to provide an example, then please do!

  2. Before 12:00PM (Noon) on MON 2021-11-01 (Nov 01), individually comment on someone else’s followup discussion in Piazza @86.

    2. Comments

    Please keep the comments polite and constructive. In addition to whatever else you want to write, please comment on:

    • one or more aspects that you like or think is interesting; and

    • one or more aspects that you think needs improvement.

    As always, please be sure to provide a brief justification for each.

  3. Continue reading the Design and Practicum modules, and make sure you’re aware of current assignments and their due dates.

  4. Suggestion: Consider reproducing an interface relevant to your term project as a mockup in Adobe XD or Figma.