One place for hosting & domains


      How To Understand and Create CSS Rules

      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.


      In 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 <h1> HTML elements blue to study how CSS rules work in action before explaining each of the components of a CSS rule.


      To 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 Rule

      Below is an example of a CSS rule. Write the following rule into you styles.css file:


      h1 {
        color: blue;

      Save your styles.css file. Note that you have indented color: blue two spaces to the right. This indentation is a recommended best practice for writing CSS style rules as it makes the code more easily read by developers.

      The rule you have just added instructs the browser to give any HTML text content tagged with the HTML element <h1> a blue color. (For a refresher on how HTML elements work, please visit our tutorial How To Use and Understand HTML elements).

      Next, add a piece of HTML content that is tagged with the <h1> element to the index.html file (right below the <link rel="stylesheet" href=""> line at the top of the document) :


      <h1>A Sample Title</h1>

      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

      If you don’t have the same results, make sure you have saved both your index.html file and your styles.css file and that there are no errors in your code.

      How To Understand the Components of a CSS Rule

      Let’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:

      Diagram of a CSS rule

      Let’s now study each of these parts and how they relate to the example CSS rule.

      • The selector indicates which type of content is to be styled by the CSS rule. The selector is placed at the beginning of the CSS rule and outside of the opening curly bracket. In the CSS example, the selector is the <h1> HTML element, which is a tag selector. We’ll learn about other types of selectors later on in the tutorial series.
      • The declaration block is the part of the CSS rule that declares a style rule for the selector. The declaration block is placed inside of the curly brackets. In the CSS example, the declaration block is color:blue;.
      • The property refers to the property of the HTML content that the CSS rule will modify, such as font-size or color. In the CSS example, the property is color. Note that a colon is appended after the property.
      • The value refers to the specific value assigned to the property, such as 16px or blue. In the example CSS rule, the value is blue. Note that a semicolon is appended after the value.

      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.


      In 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.

      Source link

      How To Use and Understand HTML Elements

      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.

      HTML documents are composed of HTML elements. Most HTML elements contain content (such as text or an image) along with HTML tags that tell the browser how to interpret the content (such as a heading or paragraph text). HTML elements can be used to add structure, semantics, and formatting to different parts of an HTML document. An HTML element is often created—but not always—by opening and closing HTML tags, which wrap around a piece of content.

      Below is an illustration that labels each of the parts of an HTML element:

      Diagram of an HTML element

      Let’s try exploring HTML in practice. Try pasting the following line into your “index.html” file that you created when Setting Up Your HTML Project:

      <strong>My strong text</strong>

      In this example, the <strong> tag adds strong formatting by enclosing the text with a pair of opening and closing <strong> tags. Note that closing tags are always denoted by a forward slash (/).

      Note: You may note that the <strong> tag acts very similar to adding bold styling to the text. You can achieve the same styling effect by using the bold <b> tag, however the <strong> tag adds bold styling and semantic meaning that indicates the text is of strong importance. If you are using the bold styling because you want to note the importance of the text, make sure to use the <strong> tag, which will enable screen readers to announce their importance to the user.

      Similarly, the emphasis tag <em> adds italic styling and semantic meaning that indicates the text is emphasized. The italics tag <i> only adds the italic styling to the text. If you are using the italic styling because you want to emphasize the text, make sure to use the <em> tag, which will enable screen readers to announce their emphasis to the user.

      To check the results of this HTML code, we can load the “index.html” file in our browser. Though your file is not online, the browser will still be able to interpret the HTML file as if it were a web page document. Make sure to save your index.html file before loading it in the browser as only saved updates will be rendered.

      Loading an HTML File

      You can load an offline HTML file in the browser in several ways:

      • Drag and drop the file into your browser
      • CTRL + Left Click (on Macs) or Right Click (on Windows) to open the file with a browser
      • Copy the full path of your file and paste the file in your browser bar

      If you are using the Visual Studio Code text editor, you can copy the file path using CTRL + Left Click (on Macs) or Right Click (on Windows) on the file index.html in the left hand panel and selecting “Copy Path.” Then paste the path in your web browser as illustrated in the gif below:

      Gif of how to copy a file path and load it in your browser

      Note: To load the file in the browser, it’s important that you copy the absolute path, (which refers to the file location relative to the root directory), rather than the relative path, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial.

      After loading the file in your browser, you should receive a page that contains the following:

      My bold text

      Let’s try experimenting with other HTML elements. On the next line of your “practice.html” file, try adding the <em> element, which adds emphasis.

      <strong>My bold text</strong>
      <em>My emphasized text</em>

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

      My bold text My emphasized text

      The first phrase should be styled with strong formatting and the second phrase should be styled with emphasis. However, you may be surprised by the side-by-side placement of the two phrases. If you added <em>My emphasized text</em> to the second line of the text editor, you may have expected “My emphasized text” to show up on the line below “My bold text” in the web browser. However, certain HTML elements, such as <strong> and <em>, require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.

      Source link