One place for hosting & domains

      Section

      How To Create a Static Footer With HTML and CSS (Section 7)



      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 the final tutorial of the CSS series, you will create a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. This tutorial will recreate the footer in the demonstration website but you can use these methods for other website projects as well.

      Gif of static footer 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.

      This tutorial uses several social media icons as content in the footer. If you’d like to use these icons, download them now from our demonstration site and save them to your images folder as:

      To download these images, click on the linked filename above and then click CTRL + Left Click (on Macs) or Right Click (on Windows) while hovering on the image and select “Save Image As”. Save the images with the instructed file names to your images folder.

      Once you have your icons saved, you can proceed to the next section.

      First you will define a “footer” class by adding the following code snippet to the bottom of the styles.css file:

      styles.css

      . . .
      
      /* Footer */
      
      .footer {
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height: 90px;
        background-color: #D0DAEE;
      }
      

      Save the styles.css file. In this code snippet you have added a comment to label the CSS code for the Footer section. You then defined a class named footer and declared several style rules. The first rule declares its position as fixed, which means the element will not move from the location you specify as the user scrolls down the page. This location is specified by the next two declarations: bottom:0 and left:0, which specifies a location zero pixels from the left and zero pixels from the bottom of the browser’s viewport.

      By changing these values, you can change the location of the element on the page. Note, however, that any value aside from zero needs to include the px suffix after the number. The ruleset also specified the width, height, and background color of the footer class.

      You are now ready to add the footer content in the next section of this tutorial.

      To add the footer content, you will add a <div> container to the webpage and assign the footer class that you just created. Return to your index.html file and paste the following code snippet after the end of the last closing </div> tag:

      index.html

      . . .
      
      <!--Section 7: Footer-->
      
      <div class="footer">
      </div>
      

      Save your index.html file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).
      You should now have an empty footer section at the bottom of your webpage that stays in place as you scroll up and down the page:

      Gif of blank fixed footer

      Next you will add content to the newly created footer.

      In this step, you will add and style the menu items to the left side of the footer. These menu items can be used to link to other pages on your site. Currently, there is only one webpage on your site, so you can use the links we provide for demonstration purposes. Later on, if you add additional pages to your website you can create menu items here and add the correct links. You can learn how to create and link to new webpages with this tutorial on How to Build a Website with HTML.

      Return to your styles.css file and add the following code snippet to the bottom of the file:

      styles.css

      . . .
      
      .footer-text-left {
        font-size:25px;
        padding-left:40px;
        float:left;
        word-spacing:20px;
      }
      
      a.menu:hover {
        background-color:yellow;
        font-size:20px;
      }
      

      Let’s pause briefly to review each of the rulesets we’ve created:

      • The first ruleset defines a class named footer-text-left that will be used to style the menu item text. Note that you are setting the float property to left so that the text assigned to this class will float to the left of the page. You are also using the word-spacing property to grant extra space between the menu items. If any of your menu items are more than one word, you’ll need to create a class for styling the menu items (instead of just changing the word spacing value).

      • The second ruleset uses the hover pseudo-class to add a yellow background color to the text when the user hovers their cursor over the text.

      Now you will add the menu items to the webpage. Return to your index.html file and add the following highlighted code snippet inside the footer container that you’ve already created:

      index.html

      . . .
      
      <div class="footer">
        <p class="footer-text-left">
          <a href="https://www.digitalocean.com/community/tutorials/index.html" class="menu">home</a>
          <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
          <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
        </p>
      </div>
      
      

      This code snippet adds two menu items (“about” and “credits”), links these menu items, and styles the text with the footer-text-left and a.menu classes you just created.

      Save both files and reload your webpage in the browser. You should receive something like this:

      Gif of footer with menu items

      Next you will add the social icons to the footer, which you can use to link to your social media accounts. If you want to use icons for different social media platforms, you can search for free icons on the web and download them to your images folder. Return to your styles.css file and add the following three rulesets to the bottom of your file:

      styles.css

      . . .
      
      .footer-content-right {
        padding-right:40px;
        margin-top:20px;
        float:right;
      }
      
      .icon-style {
        height:40px;
        margin-left:20px;
        margin-top:5px;
      }
      
      .icon-style:hover {
        background-color:yellow;
        padding:5px;
      }
      

      Let’s pause to review each ruleset:

      • The first ruleset defines the class footer-content-right and assigns it specific padding, margin, and float values. You will use this ruleset to style a <div> element that will hold the social media icons.

      • The second ruleset creates the class icon-style that will provide height and margin values to the size and position of the social media icons.

      • The third ruleset uses the hover pseudo-class to add a yellow background to the icon when the user hovers their cursor over the text.

      Save your styles.css file. You will now add the social media icons to the footer. Return to your index.html file and add the following code snippet after the last closing </a> tag of the menu items:

      index.html

      . . .
      
      ...
      <div class="footer-content-right">
        <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
        <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
        <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
      </div>
      

      Make sure that you change the file paths and links with your own social media information.

      This code snippet creates a <div> container, which is assigned the style of footer-content-right the class. Inside this div container, you have added three social media icons using the HTML <img> tag, and linked each image using the HTML <a> tag.

      You have also added the alternative text that describes each icon using the alt attribute. When creating websites, alternative text should be added to all images to support site accessibility for individuals who use screen readers. To read more about using alternative text with HTML, please visit the section on alternative text in our guide How To Add Images To Your Webpage Using HTML.

      Save your index.html file and reload it in the browser. You should now have a fixed footer with three social media icons on the right that link to your accounts. The links should change color when the user hovers their cursor over them. To confirm your results, you can compare them to the gif at the beginning of this tutorial.

      Conclusion

      You have now created a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. You can continue exploring footer design and content possibilities by changing values in the CSS classes that you created, or add different types of content to your index.html file. For more ideas on exploring design and layout possibilities for your website, the conclusion of this tutorial series has more suggestions for things to try like rearranging content sections, adding links to other pages, and changing layout styles using the box model.





      Source link

      How To Build the Header Section of Your Website With CSS (Section 1)



      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 recreate the top header section of the demonstration website using HTML and CSS. You can switch out Sammy’s information with your own if you wish to experiment or personalize the size. The methods that you use here can be applied to other CSS/HTML website projects.

      Screenshot of header section of 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.

      Adding the Title and Subtitle To Your Webpage Header

      Our website header includes the title (“Sammy the Shark”), a subtitle (“SENIOR SELACHIMORPHA AT DIGITALOCEAN”), and a small profile image. These elements are wrapped inside a <div> container that is styled with a class defined in the CSS stylesheet. You will recreate this section by adding the text and image content, creating a class for the <div> container, and then wrapping the text and image content in a <div> container that is assigned the newly-created class.

      To add a title and subtitle to your site, add the following highlighted code snippet in between the opening and closing <body> tags in the index.html file. Switch out Sammy’s information with your own if you would like to personalize your site:

      index.html

      . . .
      
      <body>
      
      <!--Header content-->
         <h1>Sammy the Shark<h1>
         <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
      </body>
      

      In this code snippet, you have added the title Sammy the Shark and assigned it the <h1> heading tag as it is the most important heading of this webpage. You have also added the subtitle SENIOR SELACHIMORPHA AT DIGITALOCEAN and assigned it the <h5> heading tag, as it is a less important heading.

      Note that you have also added the comment <!--Header content--> just before the title. A comment is used to save explanatory notes on your code for future reference and is not displayed by the browser to site visitors (unless they view the source code of the webpage). In HTML, comments are written between <!-- and --> as demonstrated in the code snippet above. Make sure to close your comment with the ending comment tag (-->) or all of your content will be commented out.

      Adding and Styling a Small Profile Image To Your Webpage Header

      Next, you’ll add a small profile image to the header section. Pick a profile photo that you want to include on your site. If you don’t have a profile photo, you can use any alternative image (such as the profile image of Sammy) or create an avatar through a site like Getavataaars.com.

      Once you have selected an image, save it to your images folder as small-profile.jpeg.

      Now add the profile image to the webpage by using an <img> tag and the src attribute assigned the file path of your profile image. Add the following highlighted code snippet to your index.html file just after the <!--Header content--> line and before the <h1>Sammy the Shark<h1> line:

      index.html

      . . .
      
        <body>
      
        <!--Header content-->
             <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
             <h1>Sammy the Shark<h1>
             <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
         </body>
      </html>
      

      Save the file and load it in the browser. Your webpage should now have a title, subtitle, profile image, and background image:

      Webpage with profile image, title, and subtitle

      Notice that the image does not have the same styling as the profile image in the demonstration site. To recreate the shape, size, and border of the profile image in the demonstration site, add the following ruleset to your styles.css file:

      styles.css

      . . .
      /*Top header profile image*/
      .profile-small {
         height:150px;
         border-radius: 50%;
         border: 10px solid #FEDE00;
      }
      

      Before moving on, let’s review each line of code you just added:

      • /*Top header profile image*/ is a CSS comment for labeling the code.
      • The text .profile-small refers to the name of the class we’re defining with the ruleset. This class will be applied to the profile image in the next step.
      • The declaration height:150px; sets the height of the image to 150 pixels and automatically adjusts the width to maintain the image size proportions.
      • The declaration border-radius: 50%; rounds the edges of the image into a circular shape.
      • The declaration border: 10px solid #FEDE00; gives the image a solid border that is 10 pixels wide and has the HTML color code #FEDE00.

      Save the file and return to your index.html file to add the profile-small class to your <img> tag like so:

      index.html

      . . .
             <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" class="profile-small" alt="Sammy the Shark, DigitalOcean’s mascot">
      . . .
      

      Save the file and reload it in your browser. Your profile image should now have a height of 150 pixels, a circular shape, and a yellow border:

      Header with styled profile image

      In the next step, you’ll apply additional styling to the title, subtitle, and profile image as a whole.

      Styling and Positioning the Header Content With CSS

      You will now define a class with CSS to style and position the header content. Return to the styles.css file and create the header class by adding the following CSS ruleset:

      styles.css

      . . .
      /* Header Title */
      .header {
        padding: 40px;
        text-align: center;
        background: #f9f7f7;
        margin:30px;
        font-size:20px;
      }
      

      Let’s pause briefly to understand each line of the code that you just added:

      • The /* Header Title */ is a comment, which is not displayed by the browser.
      • The text .header is the name of the class selector we’re creating and defining with this ruleset.
      • The padding: 40px; declaration creates 40 pixels of padding between the content and the border of the element.
      • The text-align: center; declaration moves the content to the center of the element. You can also adjust the value to left or right to align the text accordingly.
      • The background: #f9f7f7; declaration sets the color to the specific HTML color code used in the demonstration website. This tutorial will not cover HTML color codes in this tutorial series, but you can also use HTML color names (black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, and aqua) to change the color value of this property.
      • The margin:30px; declaration creates a margin of 30 pixels between the perimeter of the element and the perimeter of the viewport or any surrounding elements.
      • The font-size:20px; declaration increases the size of both the title and subtitle.

      Save your styles.css file. Next, you will apply this header class to your header content. Return to the index.html page and wrap the header content (that you already added to your file) in a <div> tag that is assigned the header class:

      . . .
      <!--Section 1: Header content-->
         <div class="header"> 
           <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" class="small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
           <h1>Sammy the Shark<h1>
           <h5>SENIOR SELACHIMORPHA AT DIGITALOCEAN<h5> 
         </div> 
        </body>
      </html>
      

      Save the index.html file and reload it in your browser. Your title, subtitle, and profile image should now be styled inside a <div> container according to the rules you declared with the header class:

      Header content now centered and styled

      Conclusion

      You have now recreated the header section of the demonstration website on your webpage using HTML and CSS. You added and styled a title, subtitle, and profile image using <div> containers and CSS classes. If you are interested, you can continue to explore design possibilities by modifying your CSS rules for your header content.

      When you are ready, you can continue to the next tutorial where you will recreate the second section of the demonstration site.



      Source link

      How To Build the About Me Section of Your Website With CSS (Section 2)



      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 recreate the second section of the demonstration website using CSS. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you learn here can be applied to other CSS/HTML website projects.

      The second section of the site contains two content boxes, one that contains text and one that contains a large profile photo:

      Screenshot of the second section of the website

      Prerequisites

      To follow this tutorial, make sure that 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.

      You will need a profile image to place in the content box on the right. If you don’t have a profile image, you can use this image for demonstration purposes.

      Note: To download the large profile image, visit this link and click CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as large-profile.jpeg to your images folder.

      Before proceeding, make sure your selected image is saved in your images folder as large-profile.jpeg.

      Creating Style Rules For Text and Image Content Boxes

      To create these two content boxes, you will first define a column class in the styles.css file that styles the boxes for this purpose. Then you will add the text and image content to the HTML document.

      Return to the styles.css file and copy and paste the following rulesets at the bottom of the file:

      styles.css

      . . .
      /* Include padding and border in total box size*/
      * {
        box-sizing: border-box;
      }
      
      /* Create two equal columns that float next to each other */
      .column-2 {
        float: left;
        width: 45%;
        padding: 40px;
        padding-left:70px;
        padding-right: 70px;
        height: 475px;
        margin:30px;
        margin-right:30px;
        margin-bottom: 70px;
        background-color: #FEDE00;
        line-height:2;
      }
      

      Before moving on, let’s pause to understand each of the rulesets we’ve just added.

      The first ruleset uses the “*” selector to indicate that the ruleset should be applied to all HTML elements and classes. This ruleset declares the box-sizing property’s value as border-box, which adjusts the total calculated width and height of a CSS element to include its padding and border size. By default, width and height sizes of an element refer only to the content of an element. Setting the box-sizing property to border-box makes it easier to adjust the total width and height of an element and can be helpful when laying out content on a page. To read more about the CSS box model, please visit our tutorial How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS.

      The second ruleset defines a class named “column-2” with sizing specifications that allow for two columns to be displayed side by side on the page. This class is named column-2 to differentiate it from columns with other sizes that you will create classes for later on in the tutorial.

      Some of the values and properties in this ruleset have not yet been covered in this tutorial series:

      • The float:left; declaration instructs the element to float to the left side of the container it’s inside (in this case the viewport itself) while allowing surrounding content to flow around its right side. You can also set the float property value to right or none, though this tutorial uses the left value to recreate the demonstration website.
      • The width: 45%; declaration sets the element’s width to 45% of the width of its container, which in this case is the viewport itself. Setting sizes (such as width) in percentages instead of pixels can be useful when you want the element to resize according to the size of the container in which it’s situated. Note, however, that dynamic sizing can be a tricky process—there are multiple methods for creating responsive elements which can be implemented after establishing a foundation in CSS.
      • The background-color: #FEDE00; sets the element’s background color to the HTML color code “#FEDE00″.
      • The line-height:2; increases the spacing between lines.
      • 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, and margins.

      Adding the “About me” Content Box

      Next, you will add the “About me” content box to the webpage using the column-2 class that you just created. Save your styles.css file and return to the index.html file. Add the following code after the closing </div> tag in your header section, before the closing </body> tag :

      . . .
      <!--Section 2: About me-->
      
              <div class="column-2">
                  <h1>About me</h1>
                  <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
                  <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
              </div>
      
      . . .
      

      Save the file and load it in the browser. For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser.

      You should now have a yellow box on the left side of the webpage that contains text:

      Webpage with yellow div box with un-styled text

      Note that your webpage should still contain the header content you added in the previous tutorial of this series How To Build the Header Section of Your Website With CSS.

      Let’s briefly review how this HTML code is functioning:

      • The first line in this code snippet (<!--Section 2: About me-->) is a comment that helps organize the HTML content. It will not display in the browser and is included here for reference later.
      • The next line of code (<div class="column-2" style="background-color:#FEDE00;">) creates a <div> container, assigns it the style of the column-2 class you defined in the styles.css file, and uses the HTML inline style attribute to assign it the background color #FEDE00.
      • The <h1> and <p> tags that follow contain the text you are inserting into the “About me” text box. Notice that you have closed the <div> container at the end of this text. You can switch out Sammy’s text with your own text if you plan on personalizing your website.

      Adding the Profile Image Content Box

      Next, you will add the second content box that contains the large profile image. There are a number of ways you can add an image box, but in this tutorial you’ll add the large profile image by making it the background image of another <div> container that is assigned the column-2 class.

      Return to the styles.css file and add the following code snippet to the bottom of the document:

      styles.css

      . . .
      /* Large profile image */
      .large-profile {
        background: url('../images/large-profile.jpeg');
        background-size: cover;
        background-position: center;
      }
      

      In this code snippet you have added a comment to organize the CSS rules and created and defined the new class large-profile that you’ll use to style the box that holds the large profile image. In this ruleset, the background: url('images/large-profile.jpeg'); declaration tells the browser to use the image found at the specified file path as the background image of the element. The background-size: cover declaration fits the image to cover the space of the container in which it is situated, the background-position:center declaration centers the image inside the container.

      Next you will add a <div> container that is assigned both the column-2 class and the large-profile class to recreate the box with the large profile image.

      Save your styles.css file and return to the index.html file. Add the following code snippet below the closing </div> tag of your first column and above the closing </body> tag:

      . . .
        <div class="column-2 large-profile">
        </div>
      

      This code snippet creates a <div> container styled according to the rules declared in the column-2 class and the profile-picture class.

      Save both files and reload index.html in your browser. Your webpage should now have the text box and image box as styled in the demonstration website (and pictured in the first image of this tutorial). Note that your webpage should also still include the header content you created in the previous tutorial. You can continue experimenting with the declared values in the column-2 and profile-large classes to explore different design possibilities.

      Conclusion

      You have now created and styled content boxes for text and images using CSS. In the next tutorial, you will recreate the third section of the website. In the process, you will arrange content into two rows of four boxes and apply a pseudo-class that will cause the boxes to change color when the user hovers over them with their cursor.



      Source link