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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
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.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<h1 id="red-din-ako">Idina Menzel</h1>
<p class="red-text">Idina Kim Menzel (/ɪˈdiːnə mɛnˈzɛl/; née Mentzel; born May 30, 1971) is an American actress, singer, and songwriter. Menzel rose to prominence when she originated the role of Maureen Johnson in the Broadway musical Rent. Her performance earned her a Tony Award nomination in 1996. She reprised the character in the musical's 2005 film adaptation. In 2003, Menzel originated the role of Elphaba in the Broadway musical Wicked, a performance for which she won the 2004 Tony Award for Best Actress in a Musical. Menzel returned to Broadway as Elizabeth Vaughan in the 2014 musical If/Then, which earned her a third Tony Award nomination. </p>
<h2>Career</h2>
<h3 class="red-text">Theater career</h3>
<p>In 1995, Menzel auditioned for Rent, which became her first professional theatre job and her Broadway debut. Rent opened Off-Broadway at the New York Theatre Workshop on January 26, 1996, but it moved to Broadway's Nederlander Theatre due to its popularity. For her performance as Maureen Johnson in the original cast of the musical, Menzel received a Tony nomination as Best Featured Actress in a Musical losing to Ann Duquesnay for Bring in 'da Noise, Bring in 'da Funk. Her final performance in the musical was on July 1, 1997.</p>
<p>Following the success of Rent, Menzel released her first solo album entitled Still I Can't Be Still on Hollywood Records, Menzel also originated the role of Dorothy in Summer of '42 at Goodspeed Opera House in Connecticut, starred as Sheila in the New York City Center Encores! production of Hair and appeared on Broadway as Amneris in Aida. Menzel earned a Drama Desk Award nomination for her performance as Kate in the Manhattan Theatre Club's 2000 Off-Broadway production of Andrew Lippa's The Wild Party. Her other Off-Broadway credits include the pre-Broadway run of Rent and The Vagina Monologues.</p>
<h3>Music career</h3>
<p>Menzel performed at the 1998 Lilith Fair summer concert festival and continues to write and perform original music. She has toured extensively and frequently performs in various venues throughout New York City. She produced and released her debut album, Still I Can't Be Still, for Hollywood Records in 1998. One single from the album, "Minuet," made the Radio & Records CHR/Pop Tracks chart at number 48 in October 1998. Following the album release, she embarked on her Still I Can't Be Still Tour, but after selling fewer than 10,000 copies in the US and missing the Billboard 200, Menzel's label put the album out of print, and she was dropped from the label. However, the album was re-released once she began to rise to greater fame with her Tony-winning performance in Wicked. </p>
<h2>Artistry</h2>
<p>Menzel is usually classified as a mezzo-soprano. Writing for the Pittsburgh Post-Gazette, Sharon Eberson wrote, "Possessing a voice that could be categorized as coquettish to flat-out belter and everything in between—and with a stage presence to match—she usually is labeled a mezzo-soprano. But why pigeonhole someone so intriguingly offbeat? Ms. Menzel interprets songs as much as an actress as a singer, and therein lies her connection to the music and her fans." Describing Menzel as a loud, "full-volume soprano" similar to Broadway actress Ethel Merman, Stephen Holden of The New York Times wrote of Menzel's voice, "The sound she creates when she belts in her high soprano register is a primal cry embedded in her being that insists that we listen and pay attention." Holden continued, "Depending on the song, [her voice] can sound babyish and demanding, or it can sound grand and imperial."</p>
<p>Describing Menzel as a singer with a "husky voice, which sometimes veers toward shrieking until she effortlessly reins herself in or, amazingly, kicks it up another notch," Melissa Ruggieri of The Atlanta Journal-Constitution concluded that she possesses "a superior instrument" both in-studio and live. On her own vocal technique, Menzel revealed that she prefers to avoid moving her shoulders while singing, telling The Philippine Star, "I actually try to take a smaller breath for a bigger, longer note because there's less air that will come pummeling out." Professionally trained as a classical singer from age eight, Menzel decided to pursue other genres, specifically R&B and jazz, when she entered high school. Upon becoming a wedding singer, Menzel was eventually exposed to a wide variety of genres, ranging from jazz and rock to Motown.</p>
.red-text,
#red-din-ako {
color: red;
}
Also see: Tab Triggers