That means changing the size of the first paragraph will require me to use a style attribute that contains the CSS font-size property set to "20px." The other elements on the page are not targeted by inline CSS and therefore remain their default sizes. I’m using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The other paragraph and headings on the page will remain their default sizes. Same as above, I’m going to start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. That means, in addition to the default font type being Helvetica, the default font size of paragraphs will be 16px, heading 2s will be 32px, and heading 3s will be 28px. For this example, I’m still going to use CodePen, but I’m going to load Bootstrap CSS on the page. To continue to rewrite the first example that used the obsolete font tag, let’s change the font size of a paragraph to 20px with CSS. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag. Set it to the value you want and place it inside a style attribute. To change font size in HTML, use the CSS font-size property.
Now that we understand how to change font type using inline and internal CSS, let’s turn our attention to font size. See the Pen GRrBpyQ by Christina Perricone ( on CodePen. That means changing the typeface of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-family property to "Arial." The headings on the page will remain Times New Roman. Since I’m using the CodePen editor, the default typeface is Times New Roman. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the page. For example, internal CSS can be placed in the head section of the HTML doc to style multiple elements on the page.įor example, let’s say I want to change the font of every paragraph element to Arial. While inline CSS works perfectly for changing a single element on the page, other styles of CSS are recommended over inline CSS.
See the Pen oNBMjeB by Christina Perricone ( on CodePen. That means changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family property set to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman. Since I’m using the CodePen Editor, the default typeface is Times New Roman. The other paragraph and headings on the page will remain as Times New Roman. I’m going to add the style attribute to the first paragraph element, which means only this paragraph will be styled. It’s important to note that I’m using CodePen, which uses Times New Roman as its default typeface. Let’s rewrite the example above using CSS to change the font type of a paragraph. CSS text formatting is a more lightweight and flexible alternative to the HTML font tag - and it’s not difficult to learn. It has been replaced by a much more effective way to change the appearance of text: namely, CSS.
However, this font tag was deprecated back in 1998 so it doesn't work with the latest version of HTML, HTML5. You would have written the following line of HTML: So say you wanted to change your font to Arial, size 20px, and a nice orange color. You used to be able to simply use the font tag to change the style of text in HTML. So, technically, you’ll be changing font “in HTML.” Inline CSS means your HTML and CSS will be placed together in the body section of your HTML doc. To change font type in HTML, use the CSS font-family property.