cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- This is where you can enter HTML if you want to try out any experiments. Changes you make here will automatically update the rendered frame. -->
<h1>FullStack labs - CSS</h1>

<p>Hello, FullStack</p>
<p class="blue">I am a paragraph with a blue class, so my text is blue.</p>
<p class="green">I am a paragraph with a green class. Make my text green by adding to the <span class="bold">.green</span> CSS class. Follow the example on the <span class="bold">.red</span> class if you get stuck.</p>
<p>Notice how all of the elements in this example that had the <span class="bold">.green</span> class are now green.</p>
<p>This is a normal paragraph, but with a <span class="green">green span</a>. Make this <span class="orange">span orange</span> by adding a class with the appropriate property.</p>
<div class="border">
  <p>CSS supports Hexadecimal format to define colors like this <span class="primary-color bold">primary color</span>.</p>
  <p>Hexademical values are 6 digit codes that define the red, green, and blue values of the color. The value of each digit will be between 0-9, and A-F. A value close to 0 means there is none of the color, and a value close to F means there is all of the color.</p>
  <p>For example, #<span class="red">00</span><span class="green">00</span><span class="blue">00</span> is <span class="black">black</span>, #<span class="red">FF</span><span class="green">FF</span><span class="blue">FF</span> is <span class="white underline">white</span> and <span class="red">FF</span><span class="green">00</span><span class="blue">00</span> will be <span class="red">red</span>.</p>
  <p>Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool" target="_blank">Mozilla Color Picker Tool</a> to define a <span class="secondary-color bold">secondary color</span>.</p>
</div>
<p class="primary-color bold">Elements can have nearly as many classes as you want. This paragraph is bold and in the primary color.</p>
<p class="italic underline">Make this paragraph italic and underlined by modifying the <span class="bold">.italic</span> class with a <span class="bold">font-style</span> property that has an <span class="bold">italic</span> attribute.
 
<div>
  <p class="border thick-border">This paragraph has a border class and a thick-border class.</p>
  <p>Notice how the <span class="bold">.thick-border</span> class only modifies the border's width property. Since it doesn't change the style or color, they are inherited from the <span class="bold">.border</span> class.</p>
  <p class="border thick-border red-border">Make a new class named <span class="bold">.red-border</span> that has a red border.</p>
</div>
<div>
  <p><a href="qwerasdf">Links are underlined and blue by default.</a> Lets change this by making all links (no matter what class) have <a href="https://www.w3schools.com/cssref/pr_text_text-decoration.asp">no underline</a>, and be orange. If you get stuck, think about what element defines a link.</p>
  <p>Links frequently paired special selectors (called <span class="italic">pseudo selectors</span>) that define their state such as :hover :visited and :active.</p>
  <p>Add an <span class="bold">underline</span> to links when the user hovers over them (see the <span class="bold">a:hover</span> selector already setup), make the color of visited links (like <a href="https://google.com">google.com</a>) <span class="bold">pink</span>, and make the active state on links <span class="bold">red</span>.</p> 
</div>
<div class="callout">
  <p>Now that you've added dynamic states to links, lets add some to the <span class="bold">.callout</span> class.</p>
  <p>Make the background color of the callout class red when a user clicks on it. <span class="italic">Hint: This will use the same pseudo class as the link from the previous step.</span></p>
</div>
<div class="callout">
  <p>I don't like how close the text is to the edge of the callout. Lets add a <span class="bold">padding</span> property of <span class="bold">10px</span> to give us some breathing room.</p>
  <p>Actually, let's decrease the padding on the top to 0.</p>
  <p><span class="bold">Pro Tip! :</span> Attributes with a size of 0 in css <span class="bold">should not</span> have a unit specified.</p>
</div>
<p>Let's increase the space after each callout. Give the <span class="bold">.callout</span> class a <span class="bold">margin-bottom</span> of <span class="bold">50px</span>.</p>

<div class="border">
  <p>Lets get efficient with our selectors by defining similar styles at the same time.</p>
  <p>Look at the CSS for <span class="one">one</span> and <span class="two">two</span>. Since both classes will have a dotted border, they are defined at the same time by separating each class with a comma.</p>
  <p>Since the similarities end there, I set up new selectors for .one and .two individually. Take a moment to digest that concept as the next step relies heavily on it.</p>
  <p>Got it? Good.</p>
  <p>Now we're going to setup a few different monster classes that have similarities between them.</p>
  <p>The <span class="bold">.kraken</span> and the <span class="bold">.sasquatch</span> classes should have the same styles as the <span class="bold">.monster</span> class, so lets start by defining the styles that .monster already has at the same time as .kraken and .sasquatch.</p>
  <p>Once all three monsters look the same, read the instructions on the Kraken and Sasquatch to give them their unique styles.</p>
  <p class="monster">I'm just a normal monster</p>
  <p class="kraken">I'm the Kraken! I should have a teal background and uppercase text.</p>
  <p class="sasquatch">I'm a sasquatch. My background should be brown, and my font-size should be 10px (because no one can find me)</p>
</div>
<div>
  <p>Lets try out some <a href="https://css-tricks.com/child-and-sibling-selectors/" target="_blank">advanced sibling and child selectors</a> on these unordered lists.</p>
  <p>Lets start by making all <span class="bold">li</span> elements have a <span class="bold">solid 1px black</span> border.</p>
  <p>Next, make only the <span class="bold">span</span> elements that are direct descendants of an <span class="bold">li</span> have a <span class="bold">solid 1px black</span> border. Notice how no other span elements on the page are impacted by this change.</p>
  <p>Lets make a visual distinction between both of these ULs by having any UL following another UL have a <span class="bold">solid 1px black</span> border. (Hint: This will use the '+' selector).</p>
  <p>Now follow the instructions in each LI below:</p>
  <ul class="first-ul">
    <li>This is the <span class="bold">.first-ul</span>. Make all of its child <span class="bold">li</span> elements have a maroon background and white text.</li>
    <li>Make all <span class="bold">li</span> elements following another li have gray text.</li>
    <li>Notice how the first LI of both groups is not impacted. This is becuase it isn't directly following any LI elements.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Cumque illo impedit voluptate praesentium quis omnis</li>
  </ul> 
  <ul class="second-ul">
    <li>This is the <span class="bold">.second-ul</span>. Make all of its child <span class="bold">li</span> elements have a teal background and bold weight.</li>
    <li>Make all of the li elements following another li have an italic font style. However, this change should only effect those LIs that are children of the <span class="bold">.second-ul</span>.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Cumque illo impedit voluptate praesentium quis omnis</li>
  </ul>  
</div>
<p>Once you've completed all the previous steps, view the hidden tips in the box below by setting the <span class="bold">.complete</span> class' <span class="bold">display</span> property to <span class="bold">block</span></p>
<div class="border">
  <br>
  <div class="complete">
    <h1>Congrats!</h1>
    <p>Now that you've gotten to the end of this workshop, I suggest checking out the <a href="http://slides.com/azanebrain/fullstack-css#/17" target="_blank">resources listed on the slides</a> and continuing your education. The CSS and Selector Reference pages are great places to get started.</p>
  </div>
</div>
<p>Thanks for going through the workshop and good luck! <br> <a href="https://twitter.com/azanebrain" target="_blank">~AJ Zane</a> | <a href="http://fullstacktalks.com" target="_blank">FullStack Talks</a></p>
            
          
!
            
              body{font-size: 150%;}.complete{display: none;}
/*
This is where you will enter your CSS. Changes you make here will automatically update the rendered frame. 
*/
.red{
 color: #FF0000;  
}
.green{
  
}
.blue{
  color: blue;
}
.black{
  color: #000000;
}
.white{
  color: #FFFFFF;
}
.primary-color{
  color: #9BD3B1;
}
.bold{
  font-weight: bold;
}
.italic{

}
.underline{
  text-decoration: underline;
}
a:hover{
  
}
.border{
  border: solid 1px black;
}
.thick-border{
  border-width: 10px;
}
.callout{
  background-color: #9BD3B1;
}
.one,
.two {
  border: dotted 1px salmon;
}
.one {
  background-color: teal;
}
.two {
  text-transform: uppercase;
}
.monster {
  background-color: maroon;
  color: #ffffff;
}
.kraken {
  
}
.sasquatch {
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console