Basic text styling

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments
<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <style>
     h2 {
       color: blue;
       font-size: 40px;
       margin: 0px; /* remove standard margin on all sides */
     }
   </style>
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

We’ve removed the margin around the text on the top, bottom, left and right. Let’s add some margin and see what happens.

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <style>
     h2 {
       color: blue;
       font-size: 40px;
       margin: 50px; /* add 50 px margin on all side of h2 text */
     }
   </style>
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

Let’s add background colour to h2 text

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <style>
     h2 {
       color: blue;
       font-size: 40px;
       margin: 50px; /* margin of 50px around h2 text */
       background-color: yellow; /* yellow background */
     }
   </style>
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

Centering the text using text-align

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <style>
     h2 {
       color: blue;
       font-size: 40px;
       margin: 50px; /* margin of 50px around h2 text */
       background-color: yellow; /* yellow background */
       text-align: center; /* center the text */
     }
   </style>
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

Styling another tag, the paragraph tag <p> with css. We can use colors as hex format or RGB as well.

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <style>
     h2 {
       color: blue;
       font-size: 40px;
       margin: 50px; /* margin of 50px around h2 text */
       background-color: yellow; /* yellow background */
       text-align: center; /* center the text */
     }
     p {
       color: #55CC77;
       background-color: rgb(120,20,56);
     }
   </style>
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

Putting this style information in a single file. We have now created a stylesheet called style.css which looks as follows.

h2 {
  color: blue;
  font-size: 40px;
  margin: 50px; /* margin of 50px around h2 text */
  background-color: yellow; /* yellow background */
  text-align: center; /* center the text */
}
p {
  color: #55CC77;
  background-color: rgb(120,20,56);
}

We have modified the main html to read this file and removed the actual css from the html.

<!DOCTYPE html>
<html>
  <head>
    <title>My website</title>
   <meta charset="UTF-8">
   <link rel="stylesheet" a href="style.css">
  </head>
  <body>
    <div>
      <section>
        <h2>Latest Deals</h2>
        <h3>See latest holiday deals here</h3>
        <article>
          <h4>Holiday 1</h4>
          <p>A lovely break in spain</p>
        </article>
      </section>
    </div>
  </body>
</html>

When we load this into our browser, we see it looks exactly the same except the css is now completely separate from out HTML code.

Leave a Reply