One place for hosting & domains

      How To Select HTML Elements to Style with CSS


      The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      The core functionality of CSS is performed by two features: cascade and specificity. Cascade deals with how CSS properties are read and applied to elements. Specificity directs a browser to find the correct element and apply the styles. The starting point of specificity is a selector, which tells the browser what element to find. When it comes to styling, the larger a web page or website, the greater the need for more specific, or higher specificity, selectors.

      Selecting the right element and providing the right visual styles is the basis of writing CSS code. Whenever you need to adjust how an element on a webpage looks, using selectors is key.

      This tutorial will build your skill set and help you develop visually rich websites by showing you how to select the right element in a given scenario. You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely. Lastly, you will group several selectors to apply the same styles to different elements.

      Prerequisites

      Setting Up the HTML

      In this first step, you will set up the HTML that you will style throughout the rest of the tutorial. The purpose of the HTML in this tutorial is to provide various elements and situations to style.

      Open up the index.html file in your editor and add the following boilerplate HTML to give the file necessary baseline code:

      index.html

      <!doctype html>
      <html>
        <head>
          <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
        </head>
        <body>
        </body>
      </html>
      

      The <link /> element already loads in the styles.css file, so be sure to have that file ready as well.

      Now, you need some content. Start by adding in <header> and <article> elements inside the <body> element. In the following code block, highlighted sections will help you identify what is new or has changed:

      index.html

      <!doctype html>
      <html>
        ...
        <body>
          <header></header>
          <article></article>
        </body>
      </html>
      

      The relationship between the <body> and the <header> elements is referred to as parent and child, since the <header> element is nested inside the <body> tags. This also means the <header> and <article> tag have a sibling relationship, since they are at the same nesting level within the parent <body> tags.

      Next, you will add a child element within the <header> to give the page a title:

      index.html

      ...
      <header>
        <h1>About Coral Reefs</h1>
      </header>
      ...
      

      Inside <article>, add four children: one <header> element and three <section> elements. The <article> element provides what is called a landmark, a designation for a browser to aid those using assistive technologies. There should only be one <header> within a landmark. In this case the <header> will contain the title for this article of the page. The <section> elements will contain different information blocks:

      index.html

      ...
      <article>
        <header></header>
        <section></section>
        <section></section>
        <section></section>
      </article>
      ...
      

      Now, provide a title in the <header> for the <article>. Use an <h2> here since it logically works as a second-level heading beneath the <body>’s <header> with a top-level heading. Add in <strong> tags around the word “Biodiversity” to strongly emphasize the text. When you load index.html in your browser, this text won’t look any different due to the browser defaults. You will style this later to distinguish between the heading and the <strong> text.

      index.html

      ...
      <article>
        <header>
          <h2>Coral Reef <strong>Biodiversity</strong></h2>
        </header>
        ...
      </article>
      ...
      

      Next, add in the first section content. This will be two paragraphs, contained in <p> tags giving some details about coral reefs. In the first paragraph, add an <em> tag and a <strong> tag around some phrases to emphasize that content:

      index.html

      ...
      <article>
        <header>
          ...
        </header>
        <section>
          <p>Coral reefs are teeming with life. They are known as the <em>rainforests of the sea</em> with how many various speieces live within their waters. The defining feature of these ecosystems are the plant-like coral, which are really colonies of tiny invertabrates called <strong>polyps</strong>.</p>
          <p>Sadly, many reefs around the world are in danger due to rising ocean temperatures, pollution, and overfishing.</p>
        </section>
        ...
      </article>
      ...
      

      In the second section, add an <h3> tag for a heading for this section of the article. Like the <h2> before, this is set as an <h3> since it is a subset of content. In the <h3>, add a <strong> tag around a phrase in the heading like in the <h2>. Then write out an unordered list using the <ul> tag to define the list and <li> to define each item in the list. In one of the list items, wrap the content in a <strong> tag:

      index.html

      ...
      <article>
        <header>
          ...
        </header>
        <section>
          ...
        </section>
        <section>
          <h3><strong>Animal Life</strong> in a Coral Reef</h3>
          <ul>
            <li>Angelfish</li>
            <li>Clownfish</li>
            <li>Octopus</li>
            <li><strong>Sharks</strong></li>
            <li>Barracuda</li>
          </ul>
        </section>
        ...
      </article>
      ...
      

      With the last section, set up content similar to the second section with an <h3> section title and a <strong> element around a word in the title. Instead of an unordered list, make an ordered list with an <ol> tag to define the list, but still define each item with the <li> tag. Once again, in one of the list items, add a <strong> element around the content:

      index.html

      ...
      <article>
        <header>
          ...
        </header>
        <section>
          ...
        </section>
        <section>
          ...
        </section>
        <section>
          <h3>Sammy's <strong>Favorite</strong> Reef Food</h3>
          <ol>
            <li>Sea Grass</li>
            <li><strong>Kelp</strong></li>
            <li>Sea Grapes</li>
            <li>Sea Lettuce</li>
          </ol>
        </section>
      </article>
      ...
      

      Save your file.

      That covers the HTML for this tutorial and provides elements for which you can begin to write styles. Now that you have finished with index.html, leave it open in your editor for reference as needed. Then open index.html in your browser to see the default styles of your browser, which will appear similar to the following image:

      The content of the website in the browser default rendering with black serif font on a white background.

      Next, you’ll apply styles to the HTML page you created.

      Selecting Elements With the Type Selector

      In this section, you will work with the type selector, more commonly referred to as the element selector. The type selector finds elements on the page by tag name, making it broadest in terms of specificity. You will write several selectors to learn the breadth of this selector throughout the index.html page.

      First, take a look at index.html in the browser. This what the page looks like using browser defaults. These are predefined styles provided by the browser to give visual information to the content of the page. This is a helpful starting place for the styles; in the examples ahead you will only modify a couple of properties to customize the look of the page.

      Next, open the styles.css file in your editor. The default browser font is typically a serif font, a typography term referring to the decorative ends on the characters, like those found in Times New Roman. To change the font across the whole page, you can make a change in one place.

      Create a type selector for the HTML <body> element by typing out the word in the tag, body, followed by an opening and closing curly brace. Inside the curly braces, add a new line and then add the CSS property font-family with a value of sans-serif. This addition of the font-family will change the font for the whole document to a sans serif font. Unlike a serif font, a sans serif font lacks decorative ends on the characters, such as in Helvetica or Arial:

      styles.css

      body {
        font-family: sans-serif;
      }
      

      Once you have made these changes, save styles.css and refresh your browser to verify the text has all changed to the browser’s default sans-serif font. The reason the font changed throughout the whole page is due to a feature of CSS called inheritance. Inheritance is when a child element inherits property values from the parent element, unless otherwise specified. This feature does not affect all CSS properties or elements, but it is most notable among properties that affect text.

      Next, adjust the font-weight of the <h2> and <h3> elements on the page. By default, the browser applies styles to make these elements a bold font. Create an h2 and an h3 type selector and in each add the font-weight property with a value of normal. This will change the default from bold to a normal weight:

      styles.css

      body {
        font-family: sans-serif;
      }
      
      h2 {
        font-weight: normal;
      }
      
      h3 {
        font-weight: normal;
      }
      

      Save and return to your browser and refresh the index.html page. The content of the <h2> and <h3> elements have changed from a bold to a normal font weight, except for the text in the <strong> elements. This is a case where an explicit value is set for the font-weight in the browser defaults, so the <strong> element does not inherit the change to its parent element.

      The primary purpose with any design is to aid in communication. In this case, the design is working to emphasize a particular part of the content through contrasts in font weight. Next, you will apply color to help encourage this contrast. Start with an em type selector and apply a background-color of yellow to give it a highlighter effect. Next, to help draw further attention to the <strong> content, create a strong type selector with a color property set to red:

      styles.css

      ...
      h3 {
        font-weight: normal;
      }
      
      em {
        background-color: yellow;
      }
      
      strong {
        color: red;
      }
      

      Save styles.css and refresh index.html in your browser to find the changes you have made to the design of the website. As shown in the following image, the whole of the text on the page has changed to a sans-serif font, the <h2> and <h3> content headings are no longer bold, all the <strong> element content is now red, and the <em> element content has a yellow highlighter background:

      Content of website in a black sans-serif font, with bold content in red and italic content with a yellow background.

      In this step you worked with multiple type selectors to create specific styles for each selector. The type selector tells the browser to find an element by the element’s name and is the broadest in specificity. Next, you will learn about simplifying your CSS through the use of selector groups.

      Selecting Elements With the Combinator Selector

      In this section, you will work with the combinator selector to make more specific element selection. This selector uses the nested relationship of HTML elements to select the appropriate element. You will use this selector to make the same element type look different when contained in other element types.

      Open up index.html in the browser. As you look over the styles, there are pops of red every so often due to the strong selector that is applying color: red; to all instances of <strong> on the page. In this step you will work through to change the color value on <strong> elements when they meet certain criteria, based on their ancestry, a series of parent and child element relationships.

      A combinator selector is defined by a space character between selectors, with the HTML ancestry reading left to right. The right-most selector is the intended target. This can be as complex or as simple as necessary to scope, or provide sufficient specificity, to the intended element. To understand how combinator selectors work, open styles.css and add at the bottom of the file a p type selector followed by a space, then a strong type selector followed by an open and close curly bracket:

      styles.css

      ...
      p strong {
      }
      

      This is a combinator selector that is targeting <strong> elements that are ancestrally descendent of a <p> element. This means the <p> element does not have to be the direct parent of the <strong> element in order for this combinator selector to be true. Now change the color of <strong> elements that meet this criteria by placing a color property within the combinator selector:

      styles.css

      ...
      p strong {
        color: coral;
      }
      

      Save the changes and return to the browser to refresh index.html.

      Content of website in a black sans-serif font, with bold content in red and italic content with a yellow background, except the bold content in a paragraph, which is light orange.

      Next, add more variety of color to the <strong> elements throughout the file. Start with the <strong> element that is a descendant of an <h3> and turn those blue:

      styles.css

      ...
      p strong {
        color: coral;
      }
      
      h3 strong {
        color: blue;
      }
      

      Finally, to add some more color, change the color for <strong> elements in an unordered list to dodgerblue, which is a rich light blue, and the color for <strong> elements in an ordered list to green. Here is where it is helpful to understand ancestry requirements of a combinator selector. You may think you would need to write out ul li strong and ol li strong to target these elements correctly. But this can be simplified to ul strong and ol strong since the ul and ol are specific enough:

      styles.css

      ...
      h3 strong {
        color: blue;
      }
      
      ul strong {
        color: dodgerblue;
      }
      
      ol strong {
        color: green;
      }
      

      Return to your browser and hit refresh. The <strong> element in the unordered list is now a rich light blue color and the <strong> element in the ordered list is now a green, as seen in the following image:

      Content of website in a black sans-serif font, with bold content in the secondary heading red, bold content in paragraph content light orange, content in the third-level heading blue, bold content in an unordered list a light blue, and bold content in an ordered list green.

      In this section, you learned about the combinator selector. You used the selector with two type selectors multiple times to create custom colors for various instances of <strong> elements. The next section will look at how to simplify your CSS by applying similar styles to multiple element types with the selector group.

      Selecting Multiple Elements With the Selector Group

      In this section, you will select HTML elements using a selector group. There is a principle of programming called Don’t Repeat Yourself, or DRY. The purpose of DRY code is to write code that is more maintainable. Using the selector group is one of the quickest ways to put the DRY principle in practice when writing CSS.

      Open up styles.css in your editor. Earlier in the tutorial you wrote out two styles to change a browser default weight from bold to normal:

      styles.css

      ...
      h2 {
        font-weight: normal;
      }
      
      h3 {
        font-weight: normal;
      }
      ...
      
      

      Since the h2 and h3 type selectors have the same property and value in the selector block, this can be consolidated with a selector group. A selector group is done by putting a comma between selectors. In this case, you can remove the h3 selector block, then add a comma then the h3 type selector after the h2 type selector. It can be helpful to put each selector on a new line to help legibility of the list.

      styles.css

      ...
      h2,
      h3 {
        font-weight: normal;
      }
      ...
      

      Open up the browser and reload index.html to verify nothing has changed. Both the h2 and the h3 now share the same styles thanks to the selector block. However, you are not limited to keeping the styles looking the same. You can still have individual h2 and h3 type selectors to provide specific styles to each element. Create each of these type selectors, then add a different color to each selector block:

      styles.css

      ...
      h2,
      h3 {
        font-weight: normal;
      }
      
      h2 {
        color: maroon;
      }
      
      h3 {
        color: navy
      }
      ...
      

      Refresh index.html in your browser to find that the h2 and h3 still have the same shared style of a normal font-weight, yet have their individual color properties.

      Selector groups are not limited to a particular kind of selector and can bring together various kinds of selectors to have the same style. This feature of grouping could be used in any number of ways. To bring in the selectors discussed already, add one of the combinator selectors to the h2, h3 selector group.

      styles.css

      ...
      h2,
      h3,
      ol strong {
        font-weight: normal;
      }
      ...
      

      After refreshing index.html in your browser, the <strong> element in the ordered list will no longer be bold and instead will have a normal font-weight, as in the following image:

      The <strong> text in the ordered list is still green, but now is no longer bold like the base <h2> and <h3> elements.

      Note With the selector group, you can bring different styles together into one selector block. But there is a balance to be struck between DRY CSS and human-readable CSS, with a best practice that errs on the side of human-readable. As an extreme example, it is possible to write several large group selectors so no single property is repeated, but that will be harder for developers to understand. In this case, developer readability is preferred.

      In this section, you worked with the group selector and turned repetitive CSS properties into a single selector block. You also added in a combinator selector with a selector group to write reusable properties with high specificity.

      Conclusion

      In this tutorial, you learned about the baseline selectors needed to write CSS. You can now effectively find an element on a page with CSS that is nested deep in HTML and give it specific styles. You also learned about the DRY programming principle, which is helpful to write concise and manageable CSS. These selectors can be paired with many other CSS selectors to get to the exact element and situation you wish to style.

      If you would like to read more CSS tutorials, check out our CSS topic page.



      Source link

      How To Style Images With CSS



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

      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 Images To index.html

      First, you need to add an image to the images folder. You can download the image from the demonstration website or use any image in a JPEG/JPG or PNG format. This exercise will also work better if the dimensions of your image are around 150-200 pixels by 150-200 pixels.

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

      Once you have selected an image, save it to your images folder as small-profile.jpeg. If you save it as a different file name, you’ll need to modify the image file path in the step below.

      Next, erase all the content in your index.html file (except for the first line of code: <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">) and add the following code snippet:

      index.html

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

      This code snippet uses the <img> tag to insert an image and gives the browser the location of the image file (images/small-profile.jpeg). Make sure the highlighted file path is correct if you have changed the file name of your image.

      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 CTRL + Left Click (on Macs) or Right Click (on Windows), and select “Copy Path.” For an illustration of the process, please see the gif below:

      Gif of how to copy an image file path

      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 <img> elements to the document.

      You have also added the alternative text Sammy the Shark, DigitalOcean’s mascot 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 your 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 receive a blank page with your image displayed:

      Small profile image displayed in browser

      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 Images

      Now that index.html displays an image of Sammy the Shark (or the image of your choice), you’ll add a CSS rule to style the image. In your styles.css file, erase everything (if you’ve been following along the tutorial series) and add the following ruleset at the bottom of the document:

      styles.css

      . . .
      img {
        border: 2px solid red;
        border-radius: 8px;
        width: 200px;
      }
      

      Save your styles.css file and reload your index.html file in your browser. You should now receive an image with new style properties:

      Webpage with styled small profile image

      In this CSS rule, you have specified values for three different properties of the HTML <img> element. Let’s pause to examine each of the different properties and values:

      • The border property allows you to add a border to your image and specify the size, style, and color of the border. Notice that you can add multiple values for this CSS property. In this rule, you have specified a solid, red border with a width of 2px.

      • The border-radius property defines the radius of an element’s corners, allowing you to round the edges of an element. In this rule, you have specified 8 pixels as the size of the radius. Try changing this number to see how it affects the display of the image.

      • The width property defines the width of the image. In this rule, you have specified the width to be 200 pixels wide. Note that if you leave the height undefined, the height of the image will automatically adjust to maintain the original proportions of the image. Try changing both the height and width at the same time to check what happens.

      Exploring How Style is Applied To All Images

      Note 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 file using the HTML <img> element. (You can copy and paste the first <img> element if you don’t have a second image handy):

      index.html

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

      Make sure to change the highlighted section with your image file path. Save your index.html file and load it in the browser. Your webpage should display two images styled with the same CSS ruleset for the <img> tag:

      Webpage displaying two images with the same style

      To continue exploring style possibilities for images, try changing the values in the CSS rule you just created in the styles.css file, saving the file, and reloading the index.html to check the results.

      Conclusion

      In 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 <img> elements, you may be curious how to apply different style rules to individual or groups of <img> elements. In the next tutorial, you will create CSS classes, which allow developers to sort HTML elements into different classes for different CSS styling.



      Source link

      How To Style the HTML <div> element with CSS



      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

      This tutorial will introduce you to styling the HTML Content Division element—or <div> element—using CSS. The <div> element can be used to structure the layout of a page and break up a webpage into separate components for individual styling. In this tutorial, you will create and style <div> elements, as well as learn how to add and style other elements inside a <div> container. These skills will prepare you to use <div> elements as layout tools later on in the series when you begin recreating the demonstration website.

      The <div> element is used by adding opening and closing </div> tags to an HTML document. On its own, the <div> element typically has little visual effect on the presentation of a webpage. To specify the size, color, and other properties of a <div> element, you can assign it style rules using CSS.

      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.

      Exploring the <div> Element in Practice

      Let’s try a hands-on exercise to study how the <div> element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the <div> tag selector:

      styles.css

      div {
       background-color: green; 
       height: 100px;
       width: 100px;
      }
      

      Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">) and add the following code snippet:

      index.html

      <div></div>
      

      Notice that the <div> element has opening and closing tags but does not require any content. Save the index.html file and reload it 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 webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:

      Webpage with green <div> box.

      Now that you have a styling rule for your <div> element, every <div> element you add to your page will be styled in the precisely the same manner. However, when creating a website, it is unlikely that you will want all of your HTML <div> elements to be styled in the same way. For this reason, developers often create classes that they can use to style <div> elements in different ways.

      To practice creating classes for <div> elements, erase the CSS rule you just created and add the following new three CSS rulesets to the styles.css file:

      .div-1 {
        background-color: blue; 
        height: 50px;
        width: 50px;
      }
      
      .div-2 {
        background-color: red; 
        height: 100px;
        width: 100px;
      }
      
      .div-3 {
        background-color: yellow; 
        height: 200px;
        width: 200px;
      }
      

      In this code snippet, you have created styling rules for three different classes: div-1, div-2, and div-3. Note that you have added a . before the class selector as required when declaring CSS rules for classes.

      Save the styles.css file and return to your index.html file. Erase the <div> element you just created and, add the three <div> elements to your index.html file, applying a class to each one that corresponds to the CSS class selectors that you defined in styles.css:

      index.html

      <div class="div-1"></div>
      <div class="div-2"></div>
      <div class="div-3"></div>
      

      Note that you have added the class as an attribute to the <div> tag by adding the class attribute and class name to each opening <div> tag. Save the file and reload it in your browser. You should receive something like this:

      Webpage with three <div> elements styled with different classes

      Your webpage should display three <div> elements, each styled with a different color and size according to their assigned CSS style rules. Note that each <div> element starts on its own new line as <div> elements are block-level elements and have this default behavior.

      Adding and Styling Text in a <div> Container

      You can put text inside a <div> container by inserting text in between the opening and closing <div> tags. Try adding text inside each of the <div> elements in your index.html file:

      index.html

      <div class="div-1">Blue</div>
      <div class="div-2">Red</div>
      <div class="div-3">Yellow</div>
      

      Save the file and reload it in your browser. You should now have text displayed in each of your <div> containers:

      Webpage with `<div>` elements containing text

      You can add additional HTML elements to your text inside the <div> elements. For example, try adding the HTML heading tags (<h2> to <h4>) to your text inside the <div> tags in your index.html file:

      <div class="div-1"><h2>Blue</h2></div>
      <div class="div-2"><h3>Red</h3></div>
      <div class="div-3"><h4>Yellow</h4></div>
      

      Save the file and reload it in your browser. The text inside the <div> containers should now be styled according to the default properties of the <h1> to <h4> tags:

      Webpage with header text inside `<div>` containers

      Note that the <div> elements have also adjusted their positions slightly. This repositioning is caused by the default margin properties of the <h2> through <h4> elements. You’ll learn more about margins in the next tutorial on the CSS Box Model, but for now it is fine to ignore them

      To style text inside the <div> containers, you can specify text property values in the rulesets for your <div> classes. Try adding the properties and values to your rulesets in your styles.css file as highlighted in the in the following code snippet:

      styles.css

      .div-1 {
        background-color: blue; 
        height: 50px;
        width: 50px;
        font-size: 10px; 
        color: white; iu
      }
      
      .div-2 {
        background-color: red; 
        height: 100px;
        width: 100px;
        font-size: 20px; 
        color: yellow; 
      }
      
      .div-3 {
        background-color: yellow; 
        height: 200px;
        width: 200px;
        font-size:30px;   
        color: blue; 
      }
      
      

      Save your styles.css file and reload the index.html file in your browser. The text inside the <div> containers should now be styled according to the CSS rules in your styles.css file:

      Webpage with styled header text inside <div> containers

      Conclusion

      In this tutorial you explored how to style the color and size of a <div> element and how to add and style text inside a <div> element. You will use the <div> element to control the layout of a page when you begin building the website. In the next tutorial, you will learn about the CSS Box Model, and how to use it to adjust the size of an element’s content, padding, borders, and margin.



      Source link