Name: Modify Font Style in CSS
Uploaded: 2018-10-16T00:14:08-05:00
Description: Text used within elements can be modified with CSS. This includes the type of the font (font-family) as well as the weight, size, and style. Let's customize our H1 with different properties and then condense it all into a shorthand property.

Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

Text used within elements can be modified with CSS. This includes the type of the font (font-family) as well as the weight, size, and style. Let's customize our H1 with different properties and then condense it all into a shorthand property. 

https://app.egghead.io/api/v1/lessons/css-modify-font-style-in-css/subtitles

Instructor: [00:00] One of the most basic things we can do with our text is affect the size of it by using font size. When we apply 34 pixels to our H1, we'll see that it grows a little bit and that the styles are applied. Another fun trick is giving it this font style of italic. We'll see it italicize our H1 here. There are a couple different options such as normal, oblique, and unset, as well.

[00:24] If we looked at our computed font family property, we'll see that it's currently at Times. If we update our H1 to say font family as Open Sans, Sans-Serif, and refresh, we'll see that we have the power to change the font style of our font. It now says Open Sans. This is only possible because inside of our HTML head we're linking to Google Fonts to download this font family.

[00:49] Some other font-related resources, we can do letter spacing, which is the width between each letter. Here, we're spacing it out a little more by two pixels. We can text transform to uppercase, which is going to make all of our text uppercase instead of manually having our HTML be uppercase. Then we can also do font weight, which defines the thickness of the text. At 300, we're pretty thin here.

[01:16] It's important to note that you can only use the font weights that you have available. From our Google Fonts, we're getting 300, 400, and 700. Using 300 here is actually going to do something to our text. We can condense some of our styles here and just do font italic 300 34 pixels and our Open Sans, Sans-Serif.

[01:37] We can remove our font weight, our font family, our font style, and our font size. We'll see that when we refresh the page, our H1 stays the exact same because we're applying all of those with this shorthand property of font. Using the shorthand helps us do more by writing less.

[01:55] To recap, there are a lot of different ways we can style our fonts. Each of these properties have different options that can be used to really customize your site.

Modify Font Style in CSS

Share this video with your friends

Course

CSS Fundamentals