CSS Foundation 2

MINTER3
targets
cascade
 css

targets
target { property: value;}
targets
tags
ids
classes
pseudo-classes
HTML CSS

<section id=”content”> p{
<p>This is the first paragraph Lorem ipsum color:blue;
dolor sit amet, consectetur adipiscing elit. }
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae #content {
porta augue auctor vitae.</p> background-color:yellow
<p>Quisque rhoncus augue quis condimentum ;
tristique. Curabitur id feugiat enim. Cras padding:30px;
consequat bibendum sem ac tempus. Vestibulum }
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p> .largetext{
</section> font-size:24px;
}
<section>
<p class=”largetext” >Ut non eros accumsan, p:first-of-type{
aliquet felis non, fermentum nibh. Interdum color:red;
et malesuada fames ac ante ipsum primis in }
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
HTML CSS

<section id=”content”>
<p>This is the first paragraph Lorem ipsum
dolor sit amet, consectetur adipiscing elit.
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae
porta augue auctor vitae.</p>
<p>Quisque rhoncus augue quis condimentum
tristique. Curabitur id feugiat enim. Cras
consequat bibendum sem ac tempus. Vestibulum
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p>
</section>

<section>
<p class=”largetext” >Ut non eros accumsan,
aliquet felis non, fermentum nibh. Interdum
et malesuada fames ac ante ipsum primis in
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
HTML CSS

<section id=”content”> p{
<p>This is the first paragraph Lorem ipsum color:blue;
dolor sit amet, consectetur adipiscing elit. }
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae
porta augue auctor vitae.</p>
<p>Quisque rhoncus augue quis condimentum
tristique. Curabitur id feugiat enim. Cras
consequat bibendum sem ac tempus. Vestibulum
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p>
</section>

<section>
<p class=”largetext” >Ut non eros accumsan,
aliquet felis non, fermentum nibh. Interdum
et malesuada fames ac ante ipsum primis in
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
HTML CSS

<section id=”content”> p{
<p>This is the first paragraph Lorem ipsum color:blue;
dolor sit amet, consectetur adipiscing elit. }
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae #content {
porta augue auctor vitae.</p> background-color:yellow
<p>Quisque rhoncus augue quis condimentum ;
tristique. Curabitur id feugiat enim. Cras padding:30px;
consequat bibendum sem ac tempus. Vestibulum }
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p>
</section>

<section>
<p class=”largetext” >Ut non eros accumsan,
aliquet felis non, fermentum nibh. Interdum
et malesuada fames ac ante ipsum primis in
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
HTML CSS

<section id=”content”> p{
<p>This is the first paragraph Lorem ipsum color:blue;
dolor sit amet, consectetur adipiscing elit. }
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae #content {
porta augue auctor vitae.</p> background-color:yellow
<p>Quisque rhoncus augue quis condimentum ;
tristique. Curabitur id feugiat enim. Cras padding:30px;
consequat bibendum sem ac tempus. Vestibulum }
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p> .largetext{
</section> font-size:24px;
}
<section>
<p class=”largetext” >Ut non eros accumsan,
aliquet felis non, fermentum nibh. Interdum
et malesuada fames ac ante ipsum primis in
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
HTML CSS

<section id=”content”> p{
<p>This is the first paragraph Lorem ipsum color:blue;
dolor sit amet, consectetur adipiscing elit. }
Donec fermentum sapien quis bibendum
facilisis. Aenean bibendum lacus massa, vitae #content {
porta augue auctor vitae.</p> background-color:yellow
<p>Quisque rhoncus augue quis condimentum ;
tristique. Curabitur id feugiat enim. Cras padding:30px;
consequat bibendum sem ac tempus. Vestibulum }
facilisis lectus a facilisis malesuada. Sed
vehicula bibendum nunc vel vehicula.</p> .largetext{
</section> font-size:24px;
}
<section>
<p class=”largetext” >Ut non eros accumsan, p:first-of-type{
aliquet felis non, fermentum nibh. Interdum text-indent:20px;
et malesuada fames ac ante ipsum primis in }
faucibus. Quisque convallis et est eget
finibus. Duis sed sem nisi.</p>
</section>
 resources
https://www.w3schools.com/css/css_pseudo_classes.asp
 css

cascade
body{ BODY
some black text
color:black
}
SECTION some black text

DIV 1 DIV 2
some black text some black text

ELEMENT A ELEMENT B

some black text some black text

body{ BODY
some black text
color:black
}
SECTION some black text
DIV1{
color:white; DIV 1 DIV 2
}
some white text some black text

ELEMENT A ELEMENT B

some white text some black text

body{ BODY
some black text
color:black
}
SECTION some black text
DIV1{
color:white; DIV 1 DIV 2
}
some black text some black text

ELEMENTB{
color:yellow; ELEMENT A ELEMENT B
}

some black text some yellow text

codepen demo
interactive learning
https://flukeout.github.io/