Simple CSS

28:null 29:["$","title",null,{"children":"Cascading Style Sheets and Selectors | R.S.B. | Observable"}] 2e:T5ce,## CSS Elements Selectors Let us look at a very simple CSS rule: ```html Simple CSS

Here is some text and this part is strong.

``` See output in your browser: [simple_css@1.html](${await FileAttachment("simple_css@1.html").url()}) In this rule, **strong is the element selector**, and each line inside the curly brackets is a **declaration**. Roughly, the way this goes is: for every DOM element with tag name strong, make its background color brown, and its font size 150% of the base size. CSS rules are applied in order that they appear in the document, and if more than one rule matches the element, then they both apply (there is more nuance than this, but for now that’s OK). For instance, the example below is entirely equivalent to the above: ```html Simple CSS

Here is some text and this part is strong.

``` See output in your browser: [Simple CSS-2.html](${await FileAttachment("Simple CSS-2.html").url()})2f:T49c,## CSS Class Selectors CSS selectors can be much more powerful than selecting on element names. For example, we can create user-defined “classes” of styles. Classes allow us to define certain elements to be of a specific type that is then formatted consistently. Here is an example with “important” text and a “footnote”. Both are in a ```

```, but they have different semantics, and we also want to display them differently. **Class selectors are identified by a leading period ., e.g., .important in CSS.** ```html Simple CSS

Some text

Some other text

And this is an important footnote!

``` See output in your browser: [css_classes.html](${await FileAttachment("css_classes.html").url()}) Note that we can also apply multiple classes to a single element, as you can see in the important footnote.30:T538,## CSS ID Selectors ID selectors work similar to class selectors, but IDs may only be used once for an element in the DOM (as is often the case in HTML, this isn’t enforced by the browser, but you SHOULD definitely do it). ID selectors are identified by a leading hashtag/number/pound sign #, e.g., #header. You can use IDs as “anchors” to refer to a site by appending #idname to the URL. For example, following this link (#css-id-selectors) will scroll your browser to this section. But you can also use IDs to apply custom styles in CSS: ```html Simple CSS

Some text

Some other text

And this is an important footnote!

``` See output in your browser: [css_ids.html](${await FileAttachment("css_ids.html").url()}) However it is better if you use [CSS Grid Layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to lay out a potentially responsive web page.31:T5fb,## CSS Relationship Selectors CSS selectors let you match elements based on their relationship with other elements. While I will simply refer you to the [MDN Selectors webpage](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors) for the full reference, I want to highlight two particularly important ones: the child selector and the descendant selector. The child selector matches every time an element is directly enclosed by a different element. For example, consider the following rule involving the child selector: ```html Simple CSS

Here is text and this is bold within a paragraph.

Here is another example with something bold but this is not highlighted in blue because of the span.

These next few words are also bold but not within a paragraph.

Here is an example of a bold text that is highlighted by a descendant selector. A child selector doesn't match here.

``` See output in your browser: [css_relationships.html](${await FileAttachment("css_relationships.html").url()})32:T626,## Pseudo Classes Pseudo classes are selectors for states that can be combined with other selectors. Typical examples are [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover), [:visited](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited), or [:nth-child()](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) which can be used like this: ```html Simple CSS

Here is a paragraph and this text is hoverable

We can also hover over an element.

Pseudo-classes are also defined for various other things, like the "visited" property here.

Here's an example of using the nth-child selector:

Element 1
Element 2
Element 3
Element 4

``` See output in your browser: [css_pseudo.html](${await FileAttachment("css_pseudo.html").url()})33:T46d,## Other ways of declaring CSS You can provide CSS stylesheets as an external file. This is very useful when you want to share CSS rules across many different documents. In that case, you include the following element in your ``````: ```html ``` In this case, style.css should be an additional file that consists entirely of CSS rules. Finally, you can place CSS declarations directly inside an element. You do this using the style attribute, which most HTML elements support. For example, if you have this CSS rule: ```html

Here is text and this is bold and blue within a paragraph.

``` See output in your browser: [css_inline.html](${await FileAttachment("css_inline.html").url()}) It’s a bad idea to do this in HTML manually: you’re mixing content with presentation, and making it hard to reuse the declarations. We will be looking at writing code to generate elements in the DOM for us, and in that case, this will be a very common and good thing to do, because in that case reusability will be achieved in our Javascript source code.34:[{"id":"9222adeeb36722213adbfb72c88f038090c0fc5026a8cbb20e9aeef7aa37fda4911d98d890805acaa78d0546fa8ba2f808d32321c768010a9d34e468396d1158","href":"https://static.observableusercontent.com/files/9222adeeb36722213adbfb72c88f038090c0fc5026a8cbb20e9aeef7aa37fda4911d98d890805acaa78d0546fa8ba2f808d32321c768010a9d34e468396d1158","name":"css_pseudo.html","type":"text/html","lastModified":1641895668724.601,"size":1095},{"id":"ab6558e2fa6796ef5f4d065fbd81d50244a7898b0d3a1b4a441ccd66c877da63a2259ad0f8b227ca98f7f34e516299c0c3c50ed07a3c25199dfac33c39fa725e","href":"https://static.observableusercontent.com/files/ab6558e2fa6796ef5f4d065fbd81d50244a7898b0d3a1b4a441ccd66c877da63a2259ad0f8b227ca98f7f34e516299c0c3c50ed07a3c25199dfac33c39fa725e","name":"css_relationships.html","type":"text/html","lastModified":1641894846440.322,"size":857},{"id":"c71f83eb5f71d7a3e76e89741bb52a39b647dd40e91ffb295d676b3fafd32b09501da9fabf00ea887bb5d6393d0264f9f83fa7f4a3f2f253f051fa3ca11e5698","href":"https://static.observableusercontent.com/files/c71f83eb5f71d7a3e76e89741bb52a39b647dd40e91ffb295d676b3fafd32b09501da9fabf00ea887bb5d6393d0264f9f83fa7f4a3f2f253f051fa3ca11e5698","name":"css_inline.html","type":"text/html","lastModified":1641896466734.606,"size":98},{"id":"9e04e6e00d130eb9401161768b9c2f3e772d6721e1ff58b71962e0d1d7a46d874667fc1c3c4866bcc8c273d27324bbdf4eab4c1a1ed58f3a8480a28320710ad6","href":"https://static.observableusercontent.com/files/9e04e6e00d130eb9401161768b9c2f3e772d6721e1ff58b71962e0d1d7a46d874667fc1c3c4866bcc8c273d27324bbdf4eab4c1a1ed58f3a8480a28320710ad6","name":"css_ids.html","type":"text/html","lastModified":1641894635406.018,"size":520},{"id":"8f549aabb9ef69cd3a7c17ab9037e80f2b2a287822f12ca5298306f868442f7d19422f1319b8f2bab46f62b04e1a581190aa1b433e7e1d097dc98b2b0269665f","href":"https://static.observableusercontent.com/files/8f549aabb9ef69cd3a7c17ab9037e80f2b2a287822f12ca5298306f868442f7d19422f1319b8f2bab46f62b04e1a581190aa1b433e7e1d097dc98b2b0269665f","name":"css_classes.html","type":"text/html","lastModified":1641894468338.039,"size":584},{"id":"e8e8b15558aea6566b2834973777e6810156e08d7fce91f100c1a63e4de97276b2b7746cacad674e8994aada35dc16985ee839478a105008c5721763eea9161d","href":"https://static.observableusercontent.com/files/e8e8b15558aea6566b2834973777e6810156e08d7fce91f100c1a63e4de97276b2b7746cacad674e8994aada35dc16985ee839478a105008c5721763eea9161d","name":"Simple CSS-2.html","type":"text/html","lastModified":1641894217281.772,"size":500},{"id":"e1042f331ca5bddf52e7d1952220dc88e01e63f12959706cd3d311f11a9ab197785976a137a053645ac7ce6e2785906d5add952e71fc6a348f4ce115919130b4","href":"https://static.observableusercontent.com/files/e1042f331ca5bddf52e7d1952220dc88e01e63f12959706cd3d311f11a9ab197785976a137a053645ac7ce6e2785906d5add952e71fc6a348f4ce115919130b4","name":"simple_css@1.html","type":"text/html","lastModified":1641894050103.968,"size":339}] 2c:{"id":"ac7b14723b878292","slug":null,"title":"Cascading Style Sheets and Selectors","thumbnail":"b87effd155ddc606d3c01054f3620282990d4f588e11c2bec6db97167723c6d5","access_level":"public","create_time":"$D2022-01-06T17:18:27.907Z","update_time":"$D2022-01-11T10:40:55.757Z","view_time":null,"first_public_time":"$D2026-09-08T12:32:54.663Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":"starter_2024"},"version":99,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2c655c78fbcd400","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":null}],"members":[{"type":"individual","id":"b2c655c78fbcd400","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":null,"role":"editor"},{"type":"team","id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B.","avatar_url":"https://avatars-next.observableusercontent.com/46344c94420a04ba43365bb61ae1f9bf23098f4ad338667b410286a88244924f","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1e061c03cb460266","slug":"msdv-practicals","title":"MSDV - Practicals","owner":{"id":"2af9b653b6b1f015","login":"darlingit","name":"R.S.B."}},"type":"notebook","body":{"titling":"auto","title":"Cascading Style Sheets and Selectors","cells":[{"id":0,"value":"# Cascading Style Sheets and Selectors\n Acknowledgments: Thanks to Carlos Scheidegger, Kevin Sun, Alexander Lex \n\n\nHTML specifies the content of a web page, but plain HTML says relatively little about how the content looks. This is where CSS comes in. CSS stands for Cascading Style Sheets: they are external declarations that control the way your elements will get rendered by a web browser. A full discussion of CSS syntax is, as usual, given at the [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) website; we show the very basics here.\n\nA stylesheet will usually consist of a list of CSS rules that are inserted in `