2a:null 2b:["$","title",null,{"children":"Mixing in CSS | Steve Oney | Observable"}] 30:[] 2e:{"id":"16641e95c3e9bf9e","slug":"mixing-in-css","title":"Mixing in CSS","thumbnail":"3f6a830bd0bbdfdb2826e3a9bd4e25311b003363aa509642b97e8411cdd96cb3","access_level":"public","create_time":"$D2020-12-30T19:36:05.168Z","update_time":"$D2023-10-02T17:43:31.613Z","view_time":null,"first_public_time":"$D2020-12-30T19:36:06.561Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":30,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Mixing in CSS","cells":[{"id":0,"value":"md`# Mixing in CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`CSS stands for **Cascading Style Sheets**. CSS determines how the HTML elements are displayed on the screen - it basically controls your documents' styles like font sizes, background colors, page layouts and more.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`\n## Insert CSS into your webpage\nThere are three common ways to insert a CSS style sheet\n\n### 1. External CSS\nExternal CSS refers to a standalone .css file that links to an HTML page. The advantage of using external CSS is that it can be applied to multiple pages of HTML once created. \n\nThe reference to the external style sheet is linked to the HTML page with a element, inside the head section of the HTML.\n\n\n\n**Example code:**\n
\n\n\\`\\`\\`HTML\n\n\n\n\n\n\n

Hello world!

\n\n\n\n\\`\\`\\`\n\nmystyle.css:\n\\`\\`\\`CSS\n/*setting the paragraph font to 18*/\np {\n font-size: 18px;\n text-decoration: underline;\n\n}\n\\`\\`\\`\n\n**Result:**\n

\n Hello world!\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n## 2. Inline CSS\nAn inline style CSS is used to apply a unique style on a single HTML element. It's put directly inside the HTML element.\n\n**Example Code:**\n\n\\`\\`\\`HTML\n

\n I used inline CSS so I have big and blue text.\n

\n\\`\\`\\`\n\n**results:**\n

\n I used inline CSS so I have big and blue text.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## 3. Internal CSS\nAn internal style sheet is often applied on a single HTML page with its own unique style. \n\nIt is defined in the \\`\\` section of the HTML page inside the \\`\n\n\n\n

This is an example of interanl CSS with a lightblue background and darkgrey font.

\n\n\n\\`\\`\\`\n\n**results:**\n

\n This is an example of internal CSS with a lightblue background and darkgrey font.\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\n## What happens when there are Multiple Style Sheets?\n\nThe last applied style sheet will be displayed if multiple properties (style sheet) have been defined for the same element. \n\n**Example of external style sheets:**\n\n\\`\\`\\`HTML\n\n\n\n\n\n\\`\\`\\`\n\nIn this case the \"mystyle2.css\" will be used.\n\n\n**Example of internal and external stylesheet:**\n\\`\\`\\`HTML\n\n\n\n\n\\`\\`\\`\n\nSince the internal style sheet is defined after the external style sheet, the \n paragraph will be blue\n .\n\n\n**Cascading order:**\nGeneral order of which style will be used when there is more than one style specified for an HTML element.\n1. Inline style (inside an HTML element)\n2. External and internal style sheets \n3. Browser default\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"