acbrent25
9/2/2017 - 11:51 AM

Basic CSS Example: Margin, font-size, color, text-align, text-decoration, background-color

Basic CSS Example: Margin, font-size, color, text-align, text-decoration, background-color

basic-css.html
content_copyfile_download
<!-- Basic CSS Example -->

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>Basic CSS Example</title>

  <!-- Introducing the Style Tag! -->
  <!-- ========================== -->

  <!-- Now you can customize the look of your sites. Each rule in the style tag changes the appearance of its associated element (notice how each rule names an element from the HTML body). -->
  <style>
    /*
			NOTE: Commenting is a bit different in CSS. 
		  They start with forward-slash + asterisk 
		  and end with back-slash + asterisk.
		  */
    /* h1 heading tag */
    
    h1 {
      /* Put a 15-pixel margin at the bottom of the heading. */
      margin-bottom: 15px;
      /* Change the size of your font to 60 pixels high. */
      font-size: 60px;
      /* This will color the heading font white. */
      color: white;
      /* Align the text to the center of its enclosing element (e.g. div). */
      text-align: center;
      /* Underline the text. */
      text-decoration: underline;
      /* The background of the heading element will now be black. */
      background-color: black;
    }
    /* h2 heading tags */
    
    h2 {
      /* Put a 15-pixel margin at the top of all h2 headings. */
      margin-top: 15px;
      margin-bottom: 15px;
      font-size: 40px;
      text-align: center;
    }
    /* h3 heading tags */
    
    h3 {
      margin-top: 15px;
      font-size: 20px;
      text-align: center;
    }
    /* All img tags */
    
    img {
      /* 
				Center a block element in the middle of its enclosing tag.
				When you use the "auto" rule on both left and right margins, 
				your browser will do the math necessary to center a block element.
				*/
      margin-left: auto;
      margin-right: auto;
      /* Block display (more on this later) */
      display: block;
    }
    /* All p tags */
    
    p {
      text-align: center;
      font-size: 20px;
      /* Bold the text. */
      font-weight: bold;
    }
    /* All unordered list tags */
    
    ul {
      text-align: center;
      font-size: 35px;
      /* Give an element a solid border. */
      border-style: solid;
      /* Render the border 5 pixels thick. */
      border-width: 5px;
      /* Include bullets in the content flow. */
      /* More info here: http://www.w3schools.com/cssref/pr_list-style-position.asp */
      list-style-position: inside;
    }
  </style>
</head>

<body>

  <h1>Awesome Header</h1>
  <h2>Smaller Awesome Header</h2>
  <h3>Even Smaller Header</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequatur unde aut dolores odio hic, accusamus recusandae ipsam illum enim voluptatibus obcaecati totam tempora eum quod sapiente. Corporis, quidem, culpa?</p>
  <img src="https://pbs.twimg.com/media/BsgYfMQCQAAWVKH.jpg" alt="Awesome" width="25%">

  <h3>Menu Links</h3>
  <ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.facebook.com">Facebook</a></li>
    <li><a href="https://www.twitter.com">Twitter</a></li>
  </ul>

</body>

</html>