One place for hosting & domains

      Section

      How To Create a Featured Quote Box On Your Website Using CSS (Section 6)



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will add a featured quote to your website using CSS as displayed in the sixth section of the demonstration website. You might use this section to feature a favorite quote, a testimony about your work, or a message to your site visitors. You can also hyperlink this quote to another webpage if you wish. The methods you use here can be applied to other CSS/HTML website projects.

      Featured quote section on demonstration website

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      To create the featured quote section, you will create a class to style the container and a class to style the featured text. In your styles.css file, add the following code snippets:

      styles.css

      . . .
      
      /* Section 6: Featured Quote  */
      
      .column-quote {
        width: 90%;
        height: 475px;
        padding: 40px;
        padding-left:70px;
        padding-right: 70px;
        padding-bottom:100px;
        margin:auto;
        margin-bottom:150px;
        border: 20px solid #FEDE00;
      }
      
      .quote {
        font-size:80px;
        font-weight:bold;
        line-height: 1;
        text-align: center;
      }
      

      In this code snippet, you have added the CSS comment /* Section 6: Featured Quote */ to label this section of the CSS code. Then, you have defined the class column-quote, which you will use to style the quote box, and specified the size, padding, margins, and border of the container.

      Note that the margin is set to auto, which horizontally centers the container in the middle of the page. In addition, the bottom margin is set to 200 pixels to give some space to the bottom of the page. If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of content, padding, borders, and margins.

      You have also created the quote class, which you will use to style the text of the featured quote. Note that you have set the line-height property to 1, which shrinks the space between text lines from the default setting of 1.6. Experiment with changing this value to determine what line spacing you prefer.

      Save the styles.css file.

      Return to the index.html file. After the last closing </div> tag, add the following code snippet:

      index.html

      . . .
      
      <!--Section 6: Featured Quote-->
      
      <div class="section-break"> </div>
      <div class="column-quote">
        <p class="quote">There are many fish in the sea, but only one Sammy!</p>
      </div>
      

      Before moving on, let’s pause to examine each line of code:

      • The HTML comment <!--Section 6: Featured Quote--> labels this section of code in the index.html file and will not be displayed by the browser.
      • The <div class="section-break"> </div> element creates a section break using a class you may have defined in a previous tutorial. If you did not follow that tutorial, you can add that class by adding the CSS rule .section-break {margin:50px; height:500px;} to your styles.css file. This element creates space between the content in the previous section and the featured quote section.
      • The <div class="column-quote"> tag and its closing </div> tag create a container for the featured quote with the style rules you declared for the column-quote class in your styles.css file.
      • The <p class="quote">There are many fish in the sea, but only one Sammy! </p> inserts the text content into the <div> container you opened in the line above and styles it according to the rules you declared for the quote class selector in your styles.css file. If you change the length of your text content, you may want to modify one of the classes in this section to change the size of the font or the size of the container to make sure the text still fits.

      Save the index.html file and reload it in your browser. Your webpage should now display a large featured quote in a transparent container with a solid background:

      Featured quote section on demonstration website

      Conclusion

      In this tutorial, you created a featured text box on your website and modified its style for different website layouts. If you wish to hyperlink your quote to a new website page, please visit our tutorial How To Create and Link To Additional Website Pages With HTML.

      In the next and final tutorial of the tutorial series, you will create a static footer, which “sticks” in a fixed position at the bottom of the viewport as the visitor scrolls down the page.



      Source link

      Creating the Top Section of Your Homepage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      We will now begin adding content by replicating the top section of the demonstration website.

      Top section of demonstration website

      This top section is composed of a large background image, a small profile image, a text header, a text subheader, and a link. Each of these pieces of content are styled and positioned with HTML.

      In the remaining tutorials of this series, we’ll learn how to use HTML to recreate this content on a new webpage.



      Source link

      How To Add a Background Image to the Top Section of Your Webpage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.

      Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

      Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.

      Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body>:

      . . .
      <body>
      <!--First section-->
      <div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
      </div>
      </body>
      </html>
      

      Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.

      Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.

      Save the file and reload it in the browser. You should receive something like this:

      Background image in top section

      Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:

      ...
      <body>
       <div style="background-color: #f4bc01; height:540px;"> 
      </div>
      </body>
      </html>
      

      Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

      If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

      To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:

      <body style=“margin:0;”>

      Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.

      You should now know how to add a <div> container with a background image to structure the top section of a webpage.



      Source link