css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <!-- 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>
<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.
  <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>
  <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 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 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>
<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>
  <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 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>
<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">
  <div class="complete">
    <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>
<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. 
 color: #FF0000;  
  color: blue;
  color: #000000;
  color: #FFFFFF;
  color: #9BD3B1;
  font-weight: bold;

  text-decoration: underline;
  border: solid 1px black;
  border-width: 10px;
  background-color: #9BD3B1;
.two {
  border: dotted 1px salmon;
.one {
  background-color: teal;
.two {
  text-transform: uppercase;
.monster {
  background-color: maroon;
  color: #ffffff;
.kraken {
.sasquatch {
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................