fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993)
* fix: converted blockquotes to code fences
This commit is contained in:
Randell Dawson
committed by
Oliver Eyton-Williams
Oliver Eyton-Williams
parent
08c4807b09
commit
df8659ab8c
@ -9,7 +9,17 @@ videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
<section id='description'>
|
||||
CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.
|
||||
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
|
||||
<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,11 @@ videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
|
||||
<strong>Note:</strong> This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
|
||||
Here's how you do it:
|
||||
<blockquote>background: var(--penguin-skin, black);</blockquote>
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
This will set background to black if your variable wasn't set.
|
||||
Note that this can be useful for debugging.
|
||||
</section>
|
||||
|
||||
@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
## Description
|
||||
<section id='description'>
|
||||
Font size is controlled by the <code>font-size</code> CSS property, like this:
|
||||
<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
## Description
|
||||
<section id='description'>
|
||||
To create a CSS Variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
|
||||
<blockquote>--penguin-skin: gray;</blockquote>
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.
|
||||
Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
|
||||
</section>
|
||||
|
||||
@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
<section id='description'>
|
||||
You can set an element's background color with the <code>background-color</code> property.
|
||||
For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:
|
||||
<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -18,7 +18,13 @@ Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-
|
||||
<code><h1 id="orange-text"></code>
|
||||
Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
|
||||
Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:
|
||||
<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
<strong>Note:</strong> It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
<section id='description'>
|
||||
You can set which font an element should use, by using the <code>font-family</code> property.
|
||||
For example, if you wanted to set your <code>h2</code> element's font to <code>sans-serif</code>, you would use the following CSS:
|
||||
<blockquote>h2 {<br> font-family: sans-serif;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
<section id='description'>
|
||||
CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.
|
||||
For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:
|
||||
<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
There are several default fonts that are available in all browsers. These generic font families include <code>monospace</code>, <code>serif</code> and <code>sans-serif</code>
|
||||
When one font isn't available, you can tell the browser to "degrade" to another font.
|
||||
For example, if you wanted an element to use the <code>Helvetica</code> font, but degrade to the <code>sans-serif</code> font when <code>Helvetica</code> isn't available, you will specify it as follows:
|
||||
<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
|
||||
</section>
|
||||
|
||||
|
||||
@ -15,7 +15,13 @@ Every HTML page has a <code>body</code> element.
|
||||
<section id='instructions'>
|
||||
We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.
|
||||
We can do this by adding the following to our <code>style</code> element:
|
||||
<blockquote>body {<br> background-color: black;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
<section id='description'>
|
||||
Classes are reusable styles that can be added to HTML elements.
|
||||
Here's an example CSS class declaration:
|
||||
<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.
|
||||
You can apply a class to an HTML element like this:
|
||||
<code><h2 class="blue-text">CatPhotoApp</h2></code>
|
||||
|
||||
@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
## Description
|
||||
<section id='description'>
|
||||
After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
|
||||
<blockquote>background: var(--penguin-skin);</blockquote>
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
This will change the background of whatever element you are targeting to gray because that is the value of the <code>--penguin-skin</code> variable.
|
||||
Note that styles will not be applied unless the variable names are an exact match.
|
||||
</section>
|
||||
|
||||
@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.
|
||||
However, an <code>id</code> is not reusable and should only be applied to one element. An <code>id</code> also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the <code>id</code> will be applied.
|
||||
Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:
|
||||
<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
You have been given <code>id</code> or <code>class</code> attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.
|
||||
Let's bring out CatPhotoApp again to practice using CSS Selectors.
|
||||
For this challenge, you will use the <code>[attr=value]</code> attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute <code>type</code> and a corresponding value of <code>radio</code>:
|
||||
<blockquote>[type='radio'] {<br> margin: 20px 0px 20px 0px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,9 +11,22 @@ With CSS, there are hundreds of CSS <code>properties</code> that you can use to
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
|
||||
That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
|
||||
At the top of your code, create a <code>style</code> block like this:
|
||||
<blockquote><style><br></style></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
|
||||
<blockquote><style><br> h2 {color: red;}<br></style></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.
|
||||
We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
|
||||
In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.
|
||||
<blockquote>body {<br> color: #000000;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -15,7 +15,13 @@ The RGB value for white looks like this:
|
||||
Instead of using six hexadecimal digits like you do with hex code, with <code>RGB</code> you specify the brightness of each color with a number between 0 and 255.
|
||||
If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So <code>RGB</code>, which starts counting from zero, has the exact same number of possible values as hex code.
|
||||
Here's an example of how you'd change the body background to orange using its RGB code.
|
||||
<blockquote>body {<br> background-color: rgb(255, 165, 0);<br>}</blockquote>
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 165, 0);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
Reference in New Issue
Block a user