// Tutorial Series // Show
How To Build a Website With CSS IntroductionIntroductionThis project-based tutorial series will introduce you to Cascading Style Sheets (CSS), a stylesheet language used to control the presentation of websites, by building a personal website using our demonstration site as a model. Though our demonstration site features Sammy the Shark, you can switch out Sammy’s information with your own if you wish to personalize your site. Alongside HTML and JavaScript, CSS is one of the core technologies of the World Wide Web. If you have some understanding of HTML and are looking to grow your front-end development skills, learning CSS is a great next step. The first half of this tutorial series will introduce CSS through hands-on exercises and the second half of the tutorial series will provide steps for recreating the demonstration website. If you want to start building the demonstration website right away, you can start with the tutorial How To Set Up Your CSS and HTML Website Project and proceed from there. By the end of this CSS tutorial series, you will have files ready for deploying a website to the cloud, as well as an understanding of how to continue modifying the site’s design with HTML and CSS. You will also have a foundation for learning additional front-end web development skills (such as JavaScript) and frameworks (like Tailwind). Prerequisites
Once you have your prerequisites ready, you will be ready to start your CSS website project in the tutorials ahead. Summary View detailed View // Tutorial //IntroductionThis tutorial will briefly introduce the historical origins of CSS and give a high-level overview of how CSS works with HTML. This tutorial will prepare you to follow the hands-on exercises and website building project in the tutorials ahead. History of CSSCSS was first introduced by Håkon Wium Lie in 1994 while working at the European Organization for Nuclear Research (CERN) alongside Tim Berners-Lee, the inventor of the World Wide Web. At the time, webpages were typically created exclusively with HTML, the Hypertext Markup Language that Berners-Lee had developed in the 1990s. However, HTML had been developed to describe the semantics of a web document’s components (such as its headings and paragraphs) rather than provide style instructions. As the growing use of HTML to style webpages became increasingly unwieldy, CSS was introduced to provide a more efficient method for styling the display and layout of a website in conjunction with HTML. How CSS Works With HTMLWebsites that are built with HTML and CSS will typically consist of an HTML file that contains content such as text, image links, and HTML tags, and a CSS file that contains
style rules that are applied to the HTML content. For example, an HTML file might have header text (marked up with the HTML tag CSS is also a powerful tool for arranging website content. By giving size, color, and other properties to HTML elements, you can use CSS to create content boxes that structure and style the layout of a webpage. ConclusionIn the tutorials ahead, you will use CSS to style text, image, and other HTML elements as well as style and control the layout of a webpage. To get started, you’ll first need to create a few files and folders where you’ll practice writing HTML and CSS code. In the next tutorial, you will be guided through the steps of setting up your CSS and HTML project using the freely-available code editor Visual Studio Code. // Tutorial //IntroductionIn this tutorial, you will set up the folders and files necessary for exploring CSS and building a website. Using a code editor, you will create a project directory for our website, a folder and file for our CSS code, a file for our HTML code, and a folder for images. This tutorial series uses Visual Studio Code, a code editor freely-available for Mac, Windows, or Linux, but you may use whichever code editor you prefer. Note that certain instructions may need to be slightly modified if you use a different editor. How To Create HTML and CSS Files and FoldersAfter opening your preferred text editor, open up a new project folder and name it To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called Next, create a new folder inside Save the file and leave it open. You also need to
create a file to add our HTML content—the text, images, and HTML elements that will be rendered in the browser. In the project directory Next, you need to add a line of code in the index.html
This code snippet tells the browser to interpret the HTML code according to the stylesheet located at Finally, create an additional folder inside You should now have a project folder named
If you are using Visual Studio Code, your editor should now display the following file tree and the open files: Notice that the file names include extensions ( Debugging and Troubleshooting CSS and HTMLPrecision is important when working with HTML and CSS. Even an extra space or mistyped character can keep your code from working as expected. If your HTML or CSS code is not rendering in the browser as intended, make sure you have written the code exactly as written in the tutorial. Though we encourage you to manually write out the code for the purpose of learning, copy and pasting can be helpful at times to ensure that your code matches the examples. HTML and CSS errors can be caused by a number of things. Check your markup and CSS rules for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. You should also make sure that you don’t accidentally use “curly” or “smart” quotation marks like Also, each time you change your code, make sure to save your file before reloading it in the browser to check your results. A Quick Note on Automatic HTML Support FeaturesSome code editors—such as the Visual Studio Code editor we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences. ConclusionYou are now ready to proceed with the tutorial series. In the next tutorial, you’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage. // Tutorial //IntroductionIn this tutorial, you will learn how to understand and create CSS rules (also known as rulesets) for styling and controlling the layout of HTML content. The tutorial will begin with an example
CSS rule that makes PrerequisitesTo follow this tutorial, make sure you have set up the necessary files and folders as instructed in the previous tutorial How To Set Up You CSS and HTML Practice Project. Exploring an Example CSS RuleBelow is an example of a CSS rule. Write the following rule into you styles.css
Save your The rule you have just added instructs the browser to give any HTML text content tagged with
the HTML element Next, add a piece of HTML content that is tagged with the index.html
Save the file and load the HTML file in your browser to check your results. (For instructions on viewing an HTML file in your browser, please visit our tutorial step How To View An Offline HTML File In Your Browser). In your browser, you should receive the following results: ![Webpage results] (https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/a-simple-title.png) If you don’t have the same results, make sure you have saved both your How To Understand the Components of a CSS RuleLet’s now examine the example CSS rule to understand each of its different components. In general, a CSS rule is composed of a selector, a declaration block, properties, and values. The diagram below illustrates how each of these parts are represented in a rule: Let’s now study each of these parts and how they relate to the example CSS rule.
Once you declare a rule for a selector, every piece of content in your HTML document marked with that selector will be displayed according to the rule. Exceptions will occur, however, if a conflicting CSS rule is given precedence. ConclusionIn this tutorial you examined all the components that are needed to write a complete CSS rule, including the selector, declaration block, properties, and values. In the next tutorial, you will add multiple properties to a CSS rule and create different CSS rules for a single HTML document. // Tutorial //IntroductionIn this tutorial, you will learn how to declare values for multiple properties in a CSS rule. Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all at once. We’ll also explore creating a variety of CSS rules that allow us to apply different styles to different pieces of content in a single HTML document. PrerequisitesTo 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. Creating a CSS Rule With Multiple DeclarationsTo add more than one declaration to a CSS rule, try modifying your
Save the file and reload your HTML document in your browser. (For instructions on loading an HTML file, please visit our tutorial
step How To View An Offline HTML File In Your Browser). Your text should now be located in the center of the page, have a size of 100 pixels, and render with the In the next section, we’ll add more CSS rules to extend the styling possibilities for the webpage’s content. Creating Multiple CSS Rules To Style HTML ContentIn this section we’ll add some more text to the In the index.html
Save the Next, let’s add a CSS rule to style the styles.css
Save the file and reload it in the browser window to check how the file is displayed. Your Now that you have CSS rules for the Further PracticeIf you want to continue experimenting with CSS rules, try creating CSS rulesets for different HTML text elements—such as styles.css
Save your file and then add the following HTML content to your index.html
Save the file and load ConclusionIn this tutorial you experimented with specifying values for multiple properties using CSS. You also created multiple CSS rules for styling text content in an HTML document. You will expand upon both these skills when you begin building the demonstration website later on in the tutorial series. In the next tutorial, you will begin exploring how to style images with CSS. // Tutorial //IntroductionIn this tutorial, you will learn how to style images with CSS to add a border, and change the shape, and size of the image. Using CSS to style images allows you to uniformly specify how images should appear across your website with only a few rulesets. PrerequisitesTo 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 Images To index.htmlFirst, you need to add an image to the Note: To download the image of Sammy the Shark, visit
this link and Once you have selected an image, save it to your Next, erase all the content in your index.html
This code snippet uses the Note: To copy the file path of your image using Visual Studio Code, hover over the icon of the image file in the left-hand panel, click Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working
directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if you decided to publish the website online. Since the end goal is to create a publishable website, you will start using relative paths now when adding You have also added the alternative text Save your If your image doesn’t display, check your code for errors and confirm that you have the correct file path for the image. Adding Styles To ImagesNow that styles.css
Save your In this CSS rule, you have specified values for
three different properties of the HTML
Exploring How Style is Applied To All ImagesNote that if you add any additional images to your HTML document, they will also have the same styling. To study how this works, add a second image to your index.html
Make sure to
change the highlighted section with your image file path. Save your To continue exploring style possibilities for images, try changing the values in the CSS rule you just created in the ConclusionIn this tutorial you explored how to style an image’s border size, color, appearance, height, width, and border radius. You will return to image styling when you begin building the demonstration website in the second half of this tutorial series. Now
that you are familiar with how to apply a set of style rules to all IntroductionIn this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element. PrerequisitesTo 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. How CSS Class Selectors WorkA CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as A CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the
To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class attribute in your HTML document like so:
Creating a CSS Class Using a Class SelectorLet’s begin exploring CSS classes in practice. Erase everything in your styles.css
After adding the code
snippet to your Return to your index.html
Note that the class name is not prepended here with a index.html
In this code snippet you have added text using the
HTML Save your You should receive a webpage with red text: Let’s add an additional CSS class to explore styling different pieces of
styles.css
This CSS rule declares that the class To apply this new CSS class, return to your index.html
In this code snippet, you have added some text content with the Note that you can add more than one class to an HTML tag. Try adding both classes to a single text element by adding the following line to your index.html
Note that the class names are only separated by a space. Save the file and reload it in the browser. You should receive something like this: Your third line of text should now be styled according to the property values set in the Adding CSS Classes to ImagesCSS classes can also be applied to other HTML elements, such as images. To explore using CSS classes
for images, erase the content in your styles.css
Here you have created CSS rules for three different classes that can be applied to the HTML
Save the index.html
Each of these three lines of HTML code add an image to the HTML document and assign it one of the three classes you just added to the Save your Your webpage should now display three images, each styled with the different specifications of their assigned class. To continue exploring CSS classes, trying creating new classes with different rulesets and applying them to different types of HTML content. Note that properties and values specified in class declaration blocks will only work on elements that they are intended for. For example, a ConclusionYou have now explored how to create classes, assign them specific property values, and apply them to text and image content. You will return to using classes when you begin building the website in the second half of this tutorial series. In the next tutorial, you will create CSS ID selectors, which work similarly as class selectors with the exception of some unique features. // Tutorial //IntroductionIn this tutorial, you will create CSS ID selectors and learn how and why to use them when building a website with CSS and HTML. CSS ID selectors function similarly to CSS class selectors. They allow you to create CSS rules that you can apply to HTML elements that have a unique ID attribute. Like classes, ID names are chosen by the developer when they create a CSS rule using the ID selector. However, IDs are different from classes in that you can only use an individual ID once in an HTML document. Thus, you would only define IDs for items that appear on a page once like a top logo, a site title, or a navigation bar. In general, CSS IDs are used sparingly. PrerequisitesTo 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. Creating a CSS ID SelectorWhen creating a rule for an ID, a
This CSS rule creates an ID named “my-first-id" and declares that any HTML text element assigned this ID will be blue. Let’s now explore how IDs work in practice. First, 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. Erase everything in your Next, return to your index.html
Save the file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial section How To View An Offline HTML File In Your Browser). You should receive something like this: In this exercise, you have created the CSS ID “my-first-id” in your ConclusionYou explored how to create and use IDs for styling elements that only appear once on your webpage. In the next tutorial, you’ll learn about CSS pseudo-classes, a special type of class activated by certain states that can be triggered by user behavior. // Tutorial //IntroductionIn this tutorial, you will create CSS pseudo-classes and learn how and why to use them. You will also practice using the Pseudo-classes are CSS classes that are activated only during certain states. For example, the pseudo-class Pseudo-classes are declared in CSS by appending a PrerequisitesTo 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. Creating a Pseudo-class with CSSLet’s now try a practical exercise to explore how pseudo-classes work. First, 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. Erase
everything in your styles.css
In this code snippet, you have added the highlighted pseudo-class index.html
Note that you are sourcing the image from an online location for convenience. You can also use your own image by specifying the file path as instructed in our tutorial How To Add Images To Your Webpage With HTML. Save your You should receive something like this: The webpage should now display an image of Sammy the
Shark. Try hovering your cursor over the image. A solid red border 10 pixels wide should appear around the image when your cursor moves over the image. Your browser automatically applies the pseudo-class You can use the styles.css
Save the index.html
Save your file and load it in the browser to check your results. You should receive a page with the text “Some text” that changes color and size when you hover your cursor over it: ConclusionIn this tutorial you explored how and why to use pseudo-classes. You also experimented with applying them to text and image based HTML elements. You will use pseudo-classes to build the footer of the demonstration website if you follow the second half of this tutorial series. In the next tutorial, you’ll learn about creating and styling the HTML IntroductionThis tutorial will introduce you
to styling the HTML Content Division element—or The PrerequisitesTo 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. Exploring the <div> Element in PracticeLet’s try a hands-on exercise to study how the
styles.css
Save the index.html
Notice that the Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule: Now that you have a styling rule for your To practice creating classes for
In this code snippet, you have created styling rules for three different classes: Save the index.html
Note that you have added the class as an attribute to the Your webpage should display three Adding and Styling Text in a <div> ContainerYou can put text inside a index.html
Save the file and reload it in your browser. You should now have text displayed in each of your You can add additional HTML elements to your text inside the
Save the file and reload it in your browser. The text inside the Note that the To style text inside the styles.css
Save your ConclusionIn
this tutorial you explored how to style the color and size of a IntroductionIn this tutorial, you will learn about the CSS Box Model, a model used to refer to the content, padding, border, and margins of an HTML element. Understanding the CSS Box Model is helpful for adjusting the size of any of these parts of an HTML element and understanding how the size and position of elements is determined. This tutorial will begin by explaining each of the boxes of the CSS Box Model and then move on to a practical exercise on adjusting their values using CSS style rules. PrerequisitesTo 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. The CSS Box ModelAn HTML element can be understood as a series of four overlapping boxes:
Now that you are familiar with the components of the CSS Box Model, you can practice styling these different boxes to explore how they work together to lay out and style an HTML element. You’ll start by creating a Adjusting The Content Size of an HTML Element With CSSFirst, 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. Erase everything in your styles.css
Save the Next, erase all the content in your index.html
Save the file and load it in the browser. You should receive the following results: Your webpage should display a yellow box that contains the text content you added to the HTML file. Currently, only the innermost box—the content box—has a size and value; the padding, border, and margin are all set to zero. Notice also that the width and height of the yellow box is automatically
determined by the size of the text content inside the Note: You can use Firefox’s Web Developer tools to view the box model of an HTML element and the values set for each box. Navigate to the Tools menu item in the top menu bar and select “Web Developer/Toggle Tools" from the dropdown menu. The Developer Tools should appear in the bottom of your window. Click the the arrow icon on the far left of the tool kit menu and then click on the element that you wish to inspect. The box model of the selected element will show up in the bottom right of the Developer Tools window pane. You may need to expand the window to view it. Next,
let’s specify the width of the styles.css
Save the file and load it in your browser. Your Note that you can also specify the height of a How To Adjust the Padding Size of an HTML Element With CSSNext, let’s increase the padding size to study how it changes the display of the
Save the You can change the size of the padding by adjusting the padding value size. You can also change the padding size of specific sides of the element by using the following properties:
Save the Knowing how to specify padding sizes for individual sides of an element can be useful when arranging content on a webpage. Adjusting the Border Size, Color, and Style of an HTML Element With CSSLet’s now practice setting values for the border of an HTML element. The border property lets you set the size, the color, and the style (such as
Try adding the following highlighted declaration to add a solid black border that is five pixels wide: styles.css
(You may want to erase your different padding declarations from the previous tutorial section and replace them with the single You can try changing the values to study how they change the display of the element in the browser. Like with padding, you can also specify the border side you’d like to adjust with the properties Adjusting the Margin Size of an HTML Element With CSSNext, let’s try adjusting the size of the margins of an element with CSS. In this exercise, we’ll give the margins a very large value so that it is easy to see how margin size is displayed in the browser. Add the following highlighted declaration to your ruleset in your styles.css
Save the Note: You may have noticed that the yellow box originally had a small margin of white space between its top and left side and the edges of the viewport. This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using Before moving on, add another styles.css
Save the file and return to your index.html
Save your The browser should now display a blue box that is 100 pixels wide and 1000 pixels high. This blue box should be 100 pixels below the yellow box on account of the yellow box’s margin. In general, surrounding elements will by default be pushed away from an element on account of its margin. Be aware, however, that the margins of adjacent elements will often overlap due to margin collapse. The size of the overlapping margin is determined by the size of the largest margin between the two elements. ConclusionIn this tutorial you learned about the CSS box model and how to adjust the size of each of its content, padding, border, and margin properties. Understanding the behavior of these properties and how to set values for them is useful when organizing and styling content on a webpage. This
knowledge will be useful when building the demonstration website in the remaining tutorials. In the next tutorial, you will set up an IntroductionIn this tutorial, you will set up the folders and files necessary for building a website with HTML and CSS. You will also prepare an PrerequisitesIf you have been following along with this tutorial series, you can continue using the Note: If you decide to create your own names for the folders or files, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Be aware also that you will need to modify your file paths in some of the steps throughout the remainder of this tutorial series to ensure that they correspond with the names of your files. You should have a project folder named
In the first step of this tutorial, you will prepare the How To Prepare Your index.html File For HTML ContentTo prepare your index.html
Make sure to change the highlighted site title with a title of your own choosing. Then save the
ConclusionYou
have now created all of the folders and files necessary for creating a website with HTML and CSS. You should also have an IntroductionIn this tutorial, you will explore the structure of the demonstration website and a plan for recreating it in the tutorials ahead. An Overview of the Demonstration WebsiteVisually, the site can be broken up into seven horizontal sections: In the previous overview image, each of the seven sections is labeled accordingly:
Each of these sections are created with the CSS properties for HTML elements that you explored in the first half of the tutorial series. In the remainder of this tutorial series, you will reconstruct each of these sections in their own separate tutorial. If you are just beginning to learn CSS, we recommend that you replicate the style choices in the tutorials including size, color, and background images to keep things consistent with the examples as you work through each tutorial. At the end of this tutorial series there are suggestions for experimenting with the style and layout of your website. These suggestions will demonstrate how to personalize the content and remix these tutorials to create new style and arrangement possibilities for your site. ConclusionIn this tutorial, you explored the structure of the demonstration website and an overview of the plan for recreating it. In the next tutorial, you’ll create a CSS rule to style the entire body of the webpage and learn why this rule is an important first step. // Tutorial //How To Style the Body of a Website With CSSPublished on October 12, 2020 · Updated on October 13, 2020 IntroductionIn this tutorial, you will style the body of a webpage with a CSS rule. You will use this rule to apply and style a background image and set the font family for the webpage. You will also create a style rule that changes the color of all hyperlinked text to a color that better matches the demonstration website’s color palette. This exercise will be used to recreate the style of the demonstration site but you can apply and modify the same rules used here for other HTML/CSS website projects. PrerequisitesTo 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. For this tutorial, we suggest you use the background image from the demonstration site which you can download from this link. You may use another image as your background, but make that sure that the image is large enough to fill the screen. Note: To download the background image of the demonstration site, visit this link and click Once you have selected an image, make sure it’s saved as “background-image.jpeg” in your Adding a Background Image To Your Website With CSSTo declare style rules for the body of a webpage, you will need to create a CSS rule for the To add a background image to your site, create a CSS rule using the styles.css
Take note of the highlighted file path, which tells the browser where to locate the background image. If you have changed the name or location of the image then you will need to adjust the file path here accordingly. Let’s pause briefly to understand each of the declarations in this ruleset:
Save your You should receive a page with no content except for the background image: If you don’t receive an image, check to make sure your file path is correct and that there are no errors in your Changing the Color of Hyperlinked TextNext, we’ll add a CSS rule that changes the color of all hyperlinked text to a color that better matches the website color palette. At the bottom of your styles.css
This ruleset will style any text marked up with an ConclusionYou should now have a webpage with a large background image. In addition, you declared a font family that will be applied when you begin to add text content. Using rulesets like these allow
you to change the font and background image of a webpage by creating a ruleset for the In the next tutorial, you’ll recreate the header section of the demonstration website. // Tutorial //IntroductionIn 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. PrerequisitesTo 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 HeaderOur 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 To add a title and subtitle to your site, add the following
highlighted code snippet in between the opening and closing index.html
In this code snippet, you have added the title Note that
you have also added the comment Adding and Styling a Small Profile Image To Your Webpage HeaderNext, 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 Now add the profile image to the webpage by using an index.html
Save the file and load it in the browser. Your webpage should now have a title, subtitle, profile image, and background image: 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
Before moving on, let’s review each line of code you just added:
Save the file and return to your index.html
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: 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 CSSYou will now define a
class with CSS to style and position the header content. Return to the styles.css
Let’s pause briefly to understand each line of the code that you just added:
Save your
Save the ConclusionYou 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 When you are ready, you can continue to the next tutorial where you will recreate the second section of the demonstration site. // Tutorial //IntroductionIn 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: PrerequisitesTo 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 Before proceeding, make sure your selected image is saved in your Creating Style Rules For Text and Image Content BoxesTo create these two content boxes, you will first define a column class in the Return to the styles.css
Before moving on, let’s pause to understand each of the rulesets we’ve just added. The first ruleset uses the “ 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 Some of the values and properties in this ruleset have not yet been covered in this tutorial series:
Adding the “About me” Content BoxNext, you will add the “About me” content box to the webpage using the
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: 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:
Adding the Profile Image Content BoxNext, 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 Return to the styles.css
In this code snippet you have added a comment to organize the CSS rules and created and defined the new class Next you will add a Save your
This code snippet creates a Save both files and reload ConclusionYou 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. // Tutorial //IntroductionIn this tutorial, you will recreate the tiled layout of the “Projects” section of the demonstration website by styling eight HTML PrerequisitesTo 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 and Styling a Header TitleTo get started, add the heading title “Projects" to a new section on the webpage, making sure not to delete any content you’ve added from the previous tutorials. Add the following code snippet after the last closing index.html
The first line of this code snippet is a comment to label the code you will add to create the third
section of the website. 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). The second line adds the title text “Projects” and assigns it the heading element Next, you will style the heading title by creating a styles.css
This code snippet defines the style for the Next you will add the “section-heading” class to the header title “Projects" in the HTML file. Return to the index.html
Save both files and load your web page 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. The header should now be centered on the page and its size, positioning, and color should be adjusted like in the following image: Adding and Styling Tiled Project BoxesNow you will add the eight project boxes below the section header. To get started, you’ll create a CSS class that allows us to style Return to the styles.css
In this code snippet you have defined the class
Next, you will create a class for each of the eight boxes so that you can style them differently, as well as add a featured image to the first and last box to match the demonstration site. To get started, save one or two images to use as a featured image in your images folder. If you don’t have an image, you can download the image of a right-facing robot and left-facing robot that you used in the demonstration site. Note:
To download the robot images, visit links and click To create a class for each project box, add the following code snippet to the bottom of your styles.css
If you are using your own images, make sure you have saved them to your images folder and that you have specified the correct file path in the
highlighted area in the ruleset for class Let’s pause briefly to review the code we’ve just written. In the rulesets for class In the rulesets for Next you will add a ruleset that changes the font size and positioning of the text that will be added to these project boxes. Add the following ruleset to the bottom of the styles.css
Save your index.html
Save your You should have two rows
of four boxes, each styled according to the You have also added the HTML line break element ( Next, you will add a pseudo-class to make the boxes change color when the user hovers their cursor over them. Changing Content Color With User InteractionIf you return to the demonstration website and hover your cursor over the boxes in the “Projects" section, you’ll notice that they change color. This color change is achieved by adding the As you may recall if you followed the tutorial on
pseudo-classes earlier in this series, pseudo-classes are created by appending a colon and the pseudo-class name to the name of the class you are trying to modify. To add the styles.css
In this code snippet you created Save the ConclusionYou have now laid out HTML content in boxes using CSS classes and added a In the next tutorial, you will add an “Employment" section to a website using HTML tables. // Tutorial //IntroductionIn this tutorial, you will recreate the “Employment” section of the demonstration website (or fourth section) using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you use here can be applied to other CSS/HTML website projects. To build this section, you will add and style a section heading, add and style a wide column, and add and style an HTML table inside of the column. PrerequisitesTo 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. Creating a Section Break and Section TitleTo get started, create a class that will add space between the content in the prior “Projects" section and this
“Employment" section. Add the following CSS comments and CSS ruleset to the bottom of your styles.css
In this code snippet you have added a CSS comment labeling the CSS rulesets for “Section 4” and a CSS comment explaining the purpose of the Return to your index.html
This code snippet adds an HTML comment to label the HTML code used for the fourth section of the website, and adds a Note: If you have not been following along with this tutorial series, you can add the
styles.css
Save your Styling a Wide Column and TableNext, you will create classes that will allow you to style the wide white column and the table you will place inside it. Add the following code snippet at the bottom of the styles.css
In the first ruleset, you have declared a number of style rules for the class If you want to learn more about the other declarations in this ruleset, please review the previous sections in this tutorial series on setting the sizes of content, padding, and margins. In the second ruleset, you have defined the class Adding the Column and TableNow you will add the column and table to the HTML file. Save your index.html
In this code snippet, you
have added a Save both files and reload your web page in the browser. Your webpage should now have a single wide column that contains a table with four rows and three columns as pictured at the beginning of this tutorial. Note that the first three ConclusionYou have now created and styled a table with CSS to display employment history content in a structured layout. Experiment with sizing and adding rows and columns to customize tables for different purposes. In the next tutorial, you will continue exploring table layout possibilities by creating a table for “Education" and “Skills". // Tutorial //IntroductionIn this tutorial, you will recreate the “Education” section and “Skills” section (or fifth section) of the demonstration website using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize your website. The methods you use here can be applied to other CSS/HTML website projects. To build these sections, you’ll create a CSS class that styles two equal-sized content boxes that can fit side by side on the webpage. You’ll then add a table inside each box where you will add text content. PrerequisitesTo 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. Creating and Styling Two Equal-Sized TablesFirst, copy and paste the
following code snippet at the bottom of your styles.css
This code snippet creates the class Save the Next, return to the index.html
This code snippet creates a column using the “column-2a” class and inserts a table styled with the Save the file and reload your browser to check that the table is showing up correctly. You should have table like the following screenshot: Next, you will add the second table that lists Sammy’s skills. Return to the index.html
This code snippet works exactly like the previous code snippet: it creates a column using the Save the file and reload your browser to check that the table is showing up correctly. You should now have two tables displayed side by side as shown in the image at the beginning of this tutorial. ConclusionYou have now added text content using styled tables. You can experiment with sizing and adding rows and columns to customize tables for different purposes. In the next tutorial, you will create a content box with a large featured quote on your website. // Tutorial //IntroductionIn 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. PrerequisitesTo 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. Creating Style Rules For the Featured Quote SectionTo 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
In this code snippet, you have added the CSS comment Note that the margin is set to You have also created the Save the Adding the Featured Quote SectionReturn to the index.html
Before moving on, let’s pause to examine each line of code:
Save the ConclusionIn 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. // Tutorial //IntroductionIn 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. PrerequisitesTo 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 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
Save the 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 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 index.html
Save your 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
Let’s pause briefly to review each of the rulesets we’ve created:
Now you will add the menu items to the webpage. Return to your index.html
This
code snippet adds two menu items (“about” and “credits”), links these menu items, and styles the text with the Save both files and reload your webpage in the browser. You should receive something like this: 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 styles.css
Let’s pause to review each ruleset:
Save your index.html
Make sure that you change the file paths and links with your own social media information. This code snippet creates a You have also added the alternative text that
describes each icon using the Save your ConclusionYou 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 ConclusionConclusionCongratulations! You have just built a website using CSS and HTML. You explored how to use CSS to style HTML elements by defining classes and pseudo-classes. You also implemented different website layout arrangements using a variety of HTML elements and CSS styles. Though there is a great deal more to learn with CSS, the methods that are covered in this series should provide a strong foundation for furthering your CSS skills and preparing you to explore additional front-end web development skills (such as JavaScript) and frameworks (like Tailwind). Feel free to continue modifying your website by adding additional content and styling. For some ideas on getting started, you may be interested in:
You should now also have all the files and folders necessary to deploy a finished website to the cloud. If you’d like to deploy your site through DigitalOcean’s App Platform for free, follow our beginner-friendly guide How To Deploy a Static Website To the Cloud With DigitalOcean App Platform. Check out all our Tutorial Series Want to learn more? Join the DigitalOcean Community!Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest. Sign up How do I copy a website using CSS?First, hover over the element you want to copy. Then, right-click on it and choose the option “Inspect”. On the left side is the HTML DOM tree, and on the right side, the CSS styles of the selected element. Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”.
How do you replicate an existing website?How to Clone a Website (A Step by Step Guide). Compatibility Test.. Move Your Website to a New Server.. Back up Your Website.. Clone Website for a Similar Project.. Take a Website Live.. Can you copy the design of another website?If you copy elements from another website, not only do you risk infringing their trade mark, but you also run the risk of infringing their copyright. Copying and republishing parts of a website without the permission of the copyright owner will generally constitute copyright infringement.
How do I copy a whole website code?Do the following:. Select the top most element, you want to copy. (To copy all, select <html> ). Right click.. Select Edit as HTML.. New sub-window opens up with the HTML text.. This is your chance. Press CTRL+A/CTRL+C and copy the entire text field to a different window.. |