By using the CSS FONT and TEXT properties, the style of the headline and the printed text on the web page can be highlighted and beautified.

TEXT properties:

  • color
  • background-color
  • text-shadow
  • text-decoration
  • text-align
  • text-transform

FONT properties:

  • font-size
  • font-weight
  • font-style
  • font-family
  • font-variant

Examples CSS text style

    <p class="a">CSS text style example</p>

<style>
      .a {
               font-weight: bold;
               font-style: italic;
               font-size: 45px;
               color: blue;
               text-shadow: 1px 1px 0px red;
    }
</style>

CSS text style example

    <p class="b">CSS text style example</p>

<style>
      .b {
               font-weight: bold;
               font-style: italic;
               font-size: 45px;
               color: green;
               text-shadow: 1px 1px 0px red;
    }
</style>

CSS text style example

    <p class="c">CSS text style example</p>

<style>
      .c {
               font-size: 45px;
               font-weight: bold;
               background-color: #0451BC;
               color:#646464;
               -webkit-text-stroke: 1px lightgray;
    }
</style>

CSS text style example

<div id="box">
    <p class="d">CSS text style example</p>
</div>

<style>
      #box {
             background-color: #cbcbcb;
    }
      .d {
               font-size: 60px;
               font-weight: bold;
               background-color: #666666;
               -webkit-background-clip: text;
               -webkit-background-clip: text;
               -webkit-background-clip: text;
               color: transparent;
               text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
    }
</style>

CSS text style example

<div id="max">
    <p class="g">CSS text style example</p>
    <p class="h">CSS text style example</p>
</div>

<style>
      #max {
             background-color: #00BFFF;
    }
      p {
               font-size:55px;
               font-weight: bold;
               text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
    }
      .g {
               color: maroon;
    }
      .h {
               color: white;
    }
</style>


CSS text style example

CSS text style example


JSFiddle