Print this chapterPrint this chapter

Inserting CSS

Inline style

Inline styles are defined within the HTML body. In this case, we place the style and our rules inside the element to which we want to apply the style.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
  </head>
  <body>
    <h2>Inline style</h2>
    <p>This is the default text</p>
    <p style= "color:red;"> This text would appear read! </p>
    <p style= "background-color: teal;"> This text has background color! </p>
    <p style= "text-transform: capitalize;"> This first letter of each word is capitalized! </p>
    <p style= "text-indent: 50px;"> This text has indent of 50px! </p>
    <p style= "letter-spacing: 3px;"> This text has letter spacing of 50px! </p>
  </body>
</html>


will create a page displayed as:

Inline style

Inline style is used when we want to apply a unique style to a specific element of our html. 

Styling text

The commonly used style properties for text are:

  • color for text color
  • background for background color
  • font‐family for text fonts
  • font‐size for text sizes
  • text‐align for text alignment

For more information about styling text: https://www.w3schools.com/css/css_text.asp