Inline Styles

Lesson material made by Jason. Can be found on GitHub.

A beginner lesson companion for adding style directly to HTML elements with the style attribute.

Today we focus on:
  • Inline styles
  • Text color and font properties
  • Width and height

HTML = Content

Elements like paragraphs, headings, lists, links, and images.

CSS = Style

Rules that control how content looks.

JS = Functionality

Code that makes the page interactive.

1

Inline Styles

The style attribute adds styles to one specific element.

Example

Red text!

Code

<p style="color: red;">Red text!</p>

Notes

  • style is an HTML attribute.
  • color changes the text color.
  • The style only affects this one paragraph.
2

Multiple Styles

Separate multiple style rules with semicolons.

Example

Red text with a black background!

Code

<p style="color: red; background-color: black;">
  Red text with a black background!
</p>

Notes

  • Each rule looks like property: value;.
  • background-color changes the color behind the text.
  • The semicolon separates one style from the next.
3

Text Color And Background Color

Styles can control foreground and background colors.

Example

Hello!

Another color combination

Code

<p style="color: white; background-color: royalblue;">
  Hello!
</p>

Notes

  • color controls the text.
  • background-color controls the element background.
  • Many color names work, like red, pink, and black.
4

Font Family

The font family changes the shape and style of letters.

Example

  • Georgia
  • Tahoma
  • Impact
  • Times New Roman
  • Arial

Code

<p style="font-family: Impact;">
  Impact
</p>

Notes

  • font-family chooses the font.
  • Fonts with spaces need quotes, like 'Times New Roman'.
  • If a computer does not have a font, the browser uses a fallback.
5

Font Size

The font size property makes text smaller or larger.

Example

16px text

40px text

72px text

Code

<p style="font-size: 72px;">
  Really big text
</p>

Notes

  • px means pixels.
  • Bigger numbers make bigger text.
  • Try changing the number to see how the text changes.
6

Font Weight

Font weight controls how thick or bold text appears.

Example

Normal text

Bold text

Bolder text

Code

<p style="font-weight: bold;">
  Bold Text
</p>

Notes

  • Common values include normal, bold, bolder, and lighter.
  • Not every font supports every weight.
  • Bold can help important words stand out.
7

Italics

The font style property can italicize text.

Example

Normal text

Italic Text

Code

<p style="font-style: italic;">
  Italic Text
</p>

Notes

  • font-style: italic; slants the text.
  • Use italics for emphasis or special words.
  • The property is font-style, not just style.
8

Text Decoration

Text decoration adds lines such as underline, overline, or line-through.

Example

Underlined text

Overlined red wavy text

Line-through text

Code

<p style="text-decoration: overline red wavy;">
  Overlined text
</p>

Notes

  • text-decoration can set the line position.
  • It can also include color and line style.
  • Underline is common, but links are often underlined too.
9

Width And Height

Width and height choose how many pixels an element takes up on the screen.

Example

300px wide x 180px high

150 x 70

Code

<img src="pixels.jpg" style="width: 300px; height: 200px;">

<img src="pixels.jpg" style="width: 150px; height: 100px;">

Notes

  • width controls how wide the element is.
  • height controls how tall the element is.
  • Changing only one dimension can avoid squashing images.

Mini Playground: Style A Paragraph

Use the controls to change a paragraph, then compare it with the inline style code.

Example

Styled text!

Code

<p style="color: red; background-color: pink; font-size: 32px; font-weight: bold;">
  Styled text!
</p>
  • Inline styles are useful for quick experiments.
  • The same element can have many style properties.
  • Later, full CSS lets us style many elements at once.