microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

css tweaks

Browse Source
This commit is contained in:
Micah Godbolt
2019-03-03 21:51:15 -08:00
parent 6b69b0164c
commit 09e8d514ff
2 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
step1-02/README.md
View File

@@ -44,12 +44,3 @@ Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppst
<img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/> <img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/>
Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements. Selectors can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
Below is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
```css
```
## Next Step
[JavaScript Demo](../js-demo)

24
step1-02/exercise/index.html
View File

@@ -25,27 +25,29 @@
/* Bonus */ /* Bonus */
</pre> </pre>
<pre data-lang="html"> <pre data-lang="html">
&lt;!-- Without changing the below markup apply the styles asked for in the markup. Do not apply styles that a tag doesn't ask for -->
&lt;section&gt; &lt;section&gt;
&lt;h2&gt;1. Text Color: Red&lt;/h2&gt; &lt;h2&gt;1. Text Color: Red&lt;/h2&gt;
&lt;div&gt;2. Color Green (hint: Sibling Selector)&lt;/div&gt; &lt;div&gt;2. Color Green (hint: Sibling Selector)&lt;/div&gt;
&lt;main&gt;
&lt;ul class=&quot;myList&quot;&gt; &lt;ul class=&quot;myList&quot;&gt;
&lt;li&gt; &lt;li&gt;
3. Border Green 3. Border Green
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;main&gt; &lt;div class=&quot;myClass&quot;&gt;4. Background Green&lt;/div&gt;
&lt;div class=&quot;myClass&quot;&gt;4. Background Green&lt;/div&gt; &lt;div class=&quot;myClass otherClass&quot;&gt;
&lt;div class=&quot;myClass otherClass&quot;&gt; 5. Background Green &amp; Color White
5. Background Green &amp; Color White (Hint Qualified Selector)
(Hint Qualified Selector)
&lt;/div&gt; &lt;/div&gt;
&lt;div id=&quot;myId&quot; class=&quot;otherClass&quot;&gt;6. Background Yellow&lt;/div&gt; &lt;div id=&quot;myId&quot; class=&quot;otherClass&quot;&gt;6. Background Yellow&lt;/div&gt;
&lt;/main&gt; &lt;/main&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li&gt; &lt;li&gt;
Don't Style Me Don't Style Me
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;div&gt;Bonus: Border Pink&lt;/div&gt; &lt;div&gt;Bonus: Border Pink&lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
</pre> </pre>