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

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

     

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

     

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Next Step Leave tour

HTML

            
              <div id="test" class="class-0 class-1 class-2 class-3 class-4 class-5 class-6 class-7 class-8 class-9 class-10 class-11 class-12 class-13 class-14 class-15 class-16 class-17 class-18 class-19 class-20 class-21 class-22 class-23 class-24 class-25 class-26 class-27 class-28 class-29 class-30 class-31 class-32 class-33 class-34 class-35 class-36 class-37 class-38 class-39 class-40 class-41 class-42 class-43 class-44 class-45 class-46 class-47 class-48 class-49 class-50 class-51 class-52 class-53 class-54 class-55 class-56 class-57 class-58 class-59 class-60 class-61 class-62 class-63 class-64 class-65 class-66 class-67 class-68 class-69 class-70 class-71 class-72 class-73 class-74 class-75 class-76 class-77 class-78 class-79 class-80 class-81 class-82 class-83 class-84 class-85 class-86 class-87 class-88 class-89 class-90 class-91 class-92 class-93 class-94 class-95 class-96 class-97 class-98 class-99 class-100 class-101 class-102 class-103 class-104 class-105 class-106 class-107 class-108 class-109 class-110 class-111 class-112 class-113 class-114 class-115 class-116 class-117 class-118 class-119 class-120 class-121 class-122 class-123 class-124 class-125 class-126 class-127 class-128 class-129 class-130 class-131 class-132 class-133 class-134 class-135 class-136 class-137 class-138 class-139 class-140 class-141 class-142 class-143 class-144 class-145 class-146 class-147 class-148 class-149 class-150 class-151 class-152 class-153 class-154 class-155 class-156 class-157 class-158 class-159 class-160 class-161 class-162 class-163 class-164 class-165 class-166 class-167 class-168 class-169 class-170 class-171 class-172 class-173 class-174 class-175 class-176 class-177 class-178 class-179 class-180 class-181 class-182 class-183 class-184 class-185 class-186 class-187 class-188 class-189 class-190 class-191 class-192 class-193 class-194 class-195 class-196 class-197 class-198 class-199 class-200 class-201 class-202 class-203 class-204 class-205 class-206 class-207 class-208 class-209 class-210 class-211 class-212 class-213 class-214 class-215 class-216 class-217 class-218 class-219 class-220 class-221 class-222 class-223 class-224 class-225 class-226 class-227 class-228 class-229 class-230 class-231 class-232 class-233 class-234 class-235 class-236 class-237 class-238 class-239 class-240 class-241 class-242 class-243 class-244 class-245 class-246 class-247 class-248 class-249 class-250 class-251 class-252 class-253 class-254 class-255 class-256 class-257 class-258 class-259 class-260 class-261 class-262 class-263 class-264 class-265 class-266 class-267 class-268 class-269 class-270 class-271 class-272 class-273 class-274 class-275 class-276 class-277 class-278 class-279 class-280 class-281 class-282 class-283 class-284 class-285 class-286 class-287 class-288 class-289 class-290 class-291 class-292 class-293 class-294 class-295 class-296 class-297 class-298 class-299 class-300 class-301 class-302 class-303 class-304 class-305 class-306 class-307 class-308 class-309 class-310 class-311 class-312 class-313 class-314 class-315 class-316 class-317 class-318 class-319 class-320 class-321 class-322 class-323 class-324 class-325 class-326 class-327 class-328 class-329 class-330 class-331 class-332 class-333 class-334 class-335 class-336 class-337 class-338 class-339 class-340 class-341 class-342 class-343 class-344 class-345 class-346 class-347 class-348 class-349 class-350 class-351 class-352 class-353 class-354 class-355 class-356 class-357 class-358 class-359 class-360 class-361 class-362 class-363 class-364 class-365 class-366 class-367 class-368 class-369 class-370 class-371 class-372 class-373 class-374 class-375 class-376 class-377 class-378 class-379 class-380 class-381 class-382 class-383 class-384 class-385 class-386 class-387 class-388 class-389 class-390 class-391 class-392 class-393 class-394 class-395 class-396 class-397 class-398 class-399 class-400 class-401 class-402 class-403 class-404 class-405 class-406 class-407 class-408 class-409 class-410 class-411 class-412 class-413 class-414 class-415 class-416 class-417 class-418 class-419 class-420 class-421 class-422 class-423 class-424 class-425 class-426 class-427 class-428 class-429 class-430 class-431 class-432 class-433 class-434 class-435 class-436 class-437 class-438 class-439 class-440 class-441 class-442 class-443 class-444 class-445 class-446 class-447 class-448 class-449 class-450 class-451 class-452 class-453 class-454 class-455 class-456 class-457 class-458 class-459 class-460 class-461 class-462 class-463 class-464 class-465 class-466 class-467 class-468 class-469 class-470 class-471 class-472 class-473 class-474 class-475 class-476 class-477 class-478 class-479 class-480 class-481 class-482 class-483 class-484 class-485 class-486 class-487 class-488 class-489 class-490 class-491 class-492 class-493 class-494 class-495 class-496 class-497 class-498 class-499 class-500">You can't override an ID with classes only!</div>
!

CSS

            
              @import "compass/css3";

#test {
  background: red;
}
div {
  width: 200px;
  height: 3em;
  padding: 1em;
  color: #fff;
  font-weight: bold;
  position: relative;
  text-align: center;
}
.class-0.class-1.class-2.class-3.class-4.class-5.class-6.class-7.class-8.class-9.class-10.class-11.class-12.class-13.class-14.class-15.class-16.class-17.class-18.class-19.class-20.class-21.class-22.class-23.class-24.class-25.class-26.class-27.class-28.class-29.class-30.class-31.class-32.class-33.class-34.class-35.class-36.class-37.class-38.class-39.class-40.class-41.class-42.class-43.class-44.class-45.class-46.class-47.class-48.class-49.class-50.class-51.class-52.class-53.class-54.class-55.class-56.class-57.class-58.class-59.class-60.class-61.class-62.class-63.class-64.class-65.class-66.class-67.class-68.class-69.class-70.class-71.class-72.class-73.class-74.class-75.class-76.class-77.class-78.class-79.class-80.class-81.class-82.class-83.class-84.class-85.class-86.class-87.class-88.class-89.class-90.class-91.class-92.class-93.class-94.class-95.class-96.class-97.class-98.class-99.class-100.class-101.class-102.class-103.class-104.class-105.class-106.class-107.class-108.class-109.class-110.class-111.class-112.class-113.class-114.class-115.class-116.class-117.class-118.class-119.class-120.class-121.class-122.class-123.class-124.class-125.class-126.class-127.class-128.class-129.class-130.class-131.class-132.class-133.class-134.class-135.class-136.class-137.class-138.class-139.class-140.class-141.class-142.class-143.class-144.class-145.class-146.class-147.class-148.class-149.class-150.class-151.class-152.class-153.class-154.class-155.class-156.class-157.class-158.class-159.class-160.class-161.class-162.class-163.class-164.class-165.class-166.class-167.class-168.class-169.class-170.class-171.class-172.class-173.class-174.class-175.class-176.class-177.class-178.class-179.class-180.class-181.class-182.class-183.class-184.class-185.class-186.class-187.class-188.class-189.class-190.class-191.class-192.class-193.class-194.class-195.class-196.class-197.class-198.class-199.class-200.class-201.class-202.class-203.class-204.class-205.class-206.class-207.class-208.class-209.class-210.class-211.class-212.class-213.class-214.class-215.class-216.class-217.class-218.class-219.class-220.class-221.class-222.class-223.class-224.class-225.class-226.class-227.class-228.class-229.class-230.class-231.class-232.class-233.class-234.class-235.class-236.class-237.class-238.class-239.class-240.class-241.class-242.class-243.class-244.class-245.class-246.class-247.class-248.class-249.class-250.class-251.class-252.class-253.class-254.class-255.class-256.class-257.class-258.class-259.class-260.class-261.class-262.class-263.class-264.class-265.class-266.class-267.class-268.class-269.class-270.class-271.class-272.class-273.class-274.class-275.class-276.class-277.class-278.class-279.class-280.class-281.class-282.class-283.class-284.class-285.class-286.class-287.class-288.class-289.class-290.class-291.class-292.class-293.class-294.class-295.class-296.class-297.class-298.class-299.class-300.class-301.class-302.class-303.class-304.class-305.class-306.class-307.class-308.class-309.class-310.class-311.class-312.class-313.class-314.class-315.class-316.class-317.class-318.class-319.class-320.class-321.class-322.class-323.class-324.class-325.class-326.class-327.class-328.class-329.class-330.class-331.class-332.class-333.class-334.class-335.class-336.class-337.class-338.class-339.class-340.class-341.class-342.class-343.class-344.class-345.class-346.class-347.class-348.class-349.class-350.class-351.class-352.class-353.class-354.class-355.class-356.class-357.class-358.class-359.class-360.class-361.class-362.class-363.class-364.class-365.class-366.class-367.class-368.class-369.class-370.class-371.class-372.class-373.class-374.class-375.class-376.class-377.class-378.class-379.class-380.class-381.class-382.class-383.class-384.class-385.class-386.class-387.class-388.class-389.class-390.class-391.class-392.class-393.class-394.class-395.class-396.class-397.class-398.class-399.class-400.class-401.class-402.class-403.class-404.class-405.class-406.class-407.class-408.class-409.class-410.class-411.class-412.class-413.class-414.class-415.class-416.class-417.class-418.class-419.class-420.class-421.class-422.class-423.class-424.class-425.class-426.class-427.class-428.class-429.class-430.class-431.class-432.class-433.class-434.class-435.class-436.class-437.class-438.class-439.class-440.class-441.class-442.class-443.class-444.class-445.class-446.class-447.class-448.class-449.class-450.class-451.class-452.class-453.class-454.class-455.class-456.class-457.class-458.class-459.class-460.class-461.class-462.class-463.class-464.class-465.class-466.class-467.class-468.class-469.class-470.class-471.class-472.class-473.class-474.class-475.class-476.class-477.class-478.class-479.class-480.class-481.class-482.class-483.class-484.class-485.class-486.class-487.class-488.class-489.class-490.class-491.class-492.class-493.class-494.class-495.class-496.class-497.class-498.class-499.class-500 {
  background: blue;
}
!

JS

            
              var max_classes = 500, classes = [], class_name = 'class-';

for(var i = 0; i <= max_classes; i++){
  classes.push(class_name+i);
}

$('body').append('<style>.'+classes.join('.')+' {background: blue;}</style><p>.'+classes.join(' .')+' div {<br>&nbsp;&nbsp;background: blue;<br>}</p>');

$('#test').addClass(classes.join(' '));
!
999px
🕑 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 ..................

Console