From d747a422ea76e5a33536b115525d3bbfb08035e4 Mon Sep 17 00:00:00 2001 From: "Restyled.io" Date: Sun, 10 Apr 2022 11:20:29 +0000 Subject: [PATCH] Restyled by prettier-markdown --- src/pages/blog/adding-css-to-your-html.md | 69 ++++++++++++----------- 1 file changed, 35 insertions(+), 34 deletions(-) diff --git a/src/pages/blog/adding-css-to-your-html.md b/src/pages/blog/adding-css-to-your-html.md index 32d0222318..87807378a4 100644 --- a/src/pages/blog/adding-css-to-your-html.md +++ b/src/pages/blog/adding-css-to-your-html.md @@ -16,6 +16,7 @@ tags: show_author_bio: true cmseditable: true --- + # Adding CSS To Your HTML For beginners … very picture heavy since CSS is such a visual discipline! @@ -41,14 +42,14 @@ For beginners … very picture heavy since CSS is such a visual discipline! -- _To connect your CSS sheet to your HTML page, use the link tag like so._ -- Many developers use External pre-written CSS stylesheets for consistent design. -- You can connect multiple stylesheets. +- _To connect your CSS sheet to your HTML page, use the link tag like so._ +- Many developers use External pre-written CSS stylesheets for consistent design. +- You can connect multiple stylesheets. ### CSS Selectors -- `CSS Selector` : Applies styles to a specific DOM element(s), there are various types: -- `Type Selectors` : Matches by node name. +- `CSS Selector` : Applies styles to a specific DOM element(s), there are various types: +- `Type Selectors` : Matches by node name.
- `Class Selectors` : Matches by class name. @@ -87,8 +88,8 @@ For beginners … very picture heavy since CSS is such a visual discipline! #### **Class Selectors** -- Used to select all elements of a certain class denoted with a `.[class name]` -- You can assign multiple classes to a DOM element by separating them with a space. +- Used to select all elements of a certain class denoted with a `.[class name]` +- You can assign multiple classes to a DOM element by separating them with a space. #### **Compound Class Selectors** @@ -101,8 +102,8 @@ For beginners … very picture heavy since CSS is such a visual discipline!
-- i.e. .box.yellow will select only the first element. -- **KEEP IN MIND** that if you do include a space it will make the selector into a _descendant selector_. +- i.e. .box.yellow will select only the first element. +- **KEEP IN MIND** that if you do include a space it will make the selector into a _descendant selector_. @@ -111,12 +112,12 @@ For beginners … very picture heavy since CSS is such a visual discipline! font-style: italic; } -- When we want to target all `h1` tags with the id of `heading`. +- When we want to target all `h1` tags with the id of `heading`. #### **CSS Combinators** -- CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful! -- Be careful not to use too many of them as they will make your CSS far too complex. +- CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful! +- Be careful not to use too many of them as they will make your CSS far too complex. #### `Descendant Selectors` @@ -136,7 +137,7 @@ For beginners … very picture heavy since CSS is such a visual discipline!
Belka
Strelka
Laika
-- Belka would be the only element selected. +- Belka would be the only element selected. #### `Adjacent Sibling Selectors` @@ -171,8 +172,8 @@ For beginners … very picture heavy since CSS is such a visual discipline! > Some common pseudo-classes that are frequently used are: -- `active` : 'push down', when elements are activated. -- `checked` : applies to things like radio buttons or checkbox inputs. +- `active` : 'push down', when elements are activated. +- `checked` : applies to things like radio buttons or checkbox inputs.
- `disabled` : any disabled element. @@ -190,9 +191,9 @@ For beginners … very picture heavy since CSS is such a visual discipline! #### `Pseudo-Selectors` -- Used to create pseudo-elements as children of the elements to which the property applies. -- `::after` -- `::before` +- Used to create pseudo-elements as children of the elements to which the property applies. +- `::after` +- `::before` @@ -209,13 +210,13 @@ For beginners … very picture heavy since CSS is such a visual discipline!

This is the second paragraph

This is the third paragraph

-- Will add some blue smiley faces before the p tag elements. +- Will add some blue smiley faces before the p tag elements. #### **CSS Rules** -- `CSS Rule` : Collection of single or compound selectors, a curly brace, zero or more properties -- `CSS Rule Specificity` : Sometimes CSS rules will contain multiple elements and may have overlapping properties rules for those same elements - there is an algorithm in CSS that calculates which rule takes precedence. -- `The Four Number Calculation`** : listed in increasing order of importance.** +- `CSS Rule` : Collection of single or compound selectors, a curly brace, zero or more properties +- `CSS Rule Specificity` : Sometimes CSS rules will contain multiple elements and may have overlapping properties rules for those same elements - there is an algorithm in CSS that calculates which rule takes precedence. +- `The Four Number Calculation`** : listed in increasing order of importance.** 1. Who has the most IDs? If no one, continue. 2. Who has the most classes? If no one, continue. @@ -239,13 +240,13 @@ For beginners … very picture heavy since CSS is such a visual discipline!
-- Coming back to our example where all the CSS Rules have tied, the last step 4 wins out so our element will have a `purple border`. +- Coming back to our example where all the CSS Rules have tied, the last step 4 wins out so our element will have a `purple border`. ### CSS: Type, Properties, and Imports #### **Typography** -- `font-family` : change the font. +- `font-family` : change the font.
- Remember that not all computers have the same fonts on them. - You can import web fonts via an api by using @@ -265,27 +266,27 @@ For beginners … very picture heavy since CSS is such a visual discipline! #### **Background-Images** -- You can use the background-image property to set a background image for an element. +- You can use the background-image property to set a background image for an element. ### CSS: Colors, Borders, and Shadows #### **Colors** -- You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value. -- rgba() is used to make an rbg value more transparent, the `a` is used to specify the `alpha channel`. -- **Color** : Property used to change the color of text. -- **Background-Color** : Property to change the backgrounf color of an element. +- You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value. +- rgba() is used to make an rbg value more transparent, the `a` is used to specify the `alpha channel`. +- **Color** : Property used to change the color of text. +- **Background-Color** : Property to change the backgrounf color of an element. #### **Borders** -- Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border. +- Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border. #### **Shadows** -- There are two kinds of shadows in CSS: `box shadows` and `text shadows`. -- Box refers to HTML elements. -- Text refers to text. -- Shadows take values such as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread radius, and of course the colors. +- There are two kinds of shadows in CSS: `box shadows` and `text shadows`. +- Box refers to HTML elements. +- Text refers to text. +- Shadows take values such as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread radius, and of course the colors. ### My Blog: