One place for hosting & domains

      How To Use Color Values with CSS


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

      Introduction

      Color is a useful part of design and development when creating websites. It helps set a mood and communicate an aesthetic. Color also helps readers scan and identify content quickly.

      With CSS, there are four ways to generate colors, and each has its own unique strength. This tutorial will show you how to use color keywords, hexadecimal color values, the rgb() color format, and lastly the hsl() color format. You will use all four approaches with the same set of HTML to experience how each color format works with the same content. Throughout the tutorial, you will use the color, border, and background-color properties to apply these color formats to the HTML.

      Prerequisites

      Setting Up the Example HTML and CSS

      In this section, you will set up the HTML base for all the visual styles you will write throughout the tutorial. You will also create your styles.css file and add styles that set the layout of the content.

      Start by opening index.html in your text editor. Then, add the following HTML to the file:

      index.html

      <!doctype html>
      <html>
          <head>
          </head>
          <body>
          </body>
      </html>
      

      Next, go to the <head> tag and add a <meta> tag to define the character set for the HTML file, then the title of the page, the <meta> tag defining how mobile devices should render the page, and finally the <link> element that loads the CSS file you will make later.

      These additions are highlighted in the following code block:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
          <title>Colors With CSS</title>
          <meta name="viewport" content="width=device-width" />
          <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
          </body>
      </html>
      

      After adding the <head> content, next move to the <body> element, where content will be added from the Wikipedia article on color. Add the highlighted section from this code block to your index.html file in your text editor:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>Colors With CSS</title>
              <meta name="viewport" content="width=device-width" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
              <article>
                  <header>
                      <h1>About Color</h1>
                  </header>
                  <p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
                  <hr />
                  <p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
                  <footer>
                      Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
                  </footer>
              </article>
          </body>
      </html>
      

      The contents are in an <article> tag to define a designated area known as a landmark, which is a part of your design that you are drawing attention to. This element can have its own <header> and <footer> tags. The <header> contains an <h1> tag with the content title, and the <footer> element contains content for citing the source. Between the two <p> tags of the primary content is an <hr /> tag, which is a self-closing tag that creates a horizontal rule line. As a piece of content, the horizontal rule can be used to break up content or to indicate a shift in the content.

      That completes the work needed for index.html. Save your changes to the file, then open index.html in your web browser. The webpage will appear like the following image:

      Black text with large, bold title text and two paragraphs with a rule line between the paragraphs, all in a serif font.

      Now you will begin working on the base styles needed for this tutorial. Create a file called styles.css and open it in your text editor.

      To begin, create a body type selector and add font-famiy: sans-serif to use the browser’s default sans serif font. Then add a line-height: 1.5 to give a default line spacing between text of one and half the font-size:

      styles.css

      body {
          font-family: sans-serif;
          line-height: 1.5;
      }
      

      Next, add styles for the <article> element by creating a type selector for it with a margin, padding, width, and max-width, along with a box-sizing: border-box to redefine the Box Model for the <article>. This will make sure the padding value is not added to the full width of the container.

      Add the highlighted sections of the following code block for the values for each of the properties:

      styles.css

      ...
      article {
          margin: 2rem auto;
          padding: 2rem;
          width: 90%;
          max-width: 40rem;
          box-sizing: border-box;
      }
      

      First, the margin with a value of 2rem auto will center the article container on the page. The padding of 2rem will give ample space around the container as you add color properties later in the tutorial. The width allows the container to be fluid in width as screen size changes, until it reaches the max-width value of 40rem (which is equivalent to 640px).

      Next, write an h1 type selector and give the element a font-size of 2rem. Then, add a margin of 0 0 1rem to remove the default margin-top and provide a new value for the margin-bottom. Lastly, center the text by adding a text-align: center; to the selector block:

      styles.css

      ...
      h1 {
          font-size: 2rem;
          margin: 0 0 1rem;
          text-align: center;
      }
      

      Next, you will apply some base styles to the <hr> element. The browser defaults for the <hr> element create a box with no height, full width, and a border. Although this container is self-closing and does not contain content, it can accept a lot of styles.

      Start by giving it a height value of 0.25rem. Then, add a margin property of 2rem auto to create space above and below the <hr> and to center the element. Add a width: 90%; with a max-width: 18rem; so the <hr> element is always smaller than the article container and never larger than 18rem. Finally, use the border-radius property to round the ends of the <hr> element with a value of 0.5rem:

      styles.css

      ...
      hr {
          height: 0.25rem;
          margin: 2rem auto;
          width: 90%;
          max-width: 18rem;
          border-radius: 0.5rem;
      }
      

      Finally, create a footer selector block and add a margin-top property with a value of 2rem, followed by a font-size of 0.875rem:

      styles.css

      ...
      footer {
          margin-top: 2rem;
          font-size: 0.875rem;
      }
      

      Save your changes to styles.css. Then, return to index.html in your web browser and reload the page. The content is now ready to have colors applied to the base styles. The following image shows how it will render in your browser.

      Black text with large, bold title text and two paragraphs, with a narrow rounded rule line between the paragraphs, all in a sans serif font.

      In this section, you set up your HTML in the index.html file and created the base styles in the styles.css file. The next section will introduce you to color keywords, which you will use to apply colors to the content.

      Applying Colors With Keyword Values

      Starting off with colors on the web, it is helpful to work with the predefined color keywords. In this section, you will use some of the color keywords to apply color to the content of your HTML.

      There are well over one hundred color keyword values that have been added to the list over time. The World Wide Web Consortium has an exhaustive list of color keyword values on their Wiki. Color keyword values are useful for throwing together a quick design or identifying and debugging CSS problems, such as by setting the color property to magenta so the element stands out against a muted color palette. The keywords cover all hues with variations of shades and tints of each, including grays.

      Begin by going to the article type selector and adding background-color, border, and color properties. For the background-color, use the faint light brown seashell keyword. Give the border a thickness of 0.25rem, a solid style, and for the color use the sandybrown keyword. Lastly, for the color property use the maroon keyword:

      styles.css

      ...
      article {
          margin: 2rem auto;
          padding: 2rem;
          width: 90%;
          max-width: 40rem;
          box-sizing: border-box;
          background-color: seashell;
          border: 0.25rem solid sandybrown;
          color: maroon;
      }
      ...
      

      Save your changes to styles.css and return to you browser to refresh the index.html page. The page will now have a visually defined article area with a light brown background color and a slightly darker brown thick border. The text content will be a dark red, and may appear more as a dark brown in the context of the other brown colors. The following image shows how the page will appear in your browser:

      Brown text in a sans serif font, with a lighter tan background and border.

      Next, return to styles.css in your text editor. Go to the h1 selector and add a color property. Using a complementary color of brown hues, add the teal keyword for the color property value:

      styles.css

      ...
      h1 {
          font-size: 2rem;
          margin: 0 0 1rem;
          text-align: center;
          color: teal;
      }
      ...
      

      Now, carrying on with the concept of complementary colors, go to the hr element and add a border property of 0.25rem solid teal. After that, add a background-color property with the keyword darkturquoise as the value:

      styles.css

      ...
      hr {
          height: 0.25rem;
          margin: 2rem auto;
          width: 90%;
          max-width: 18rem;
          border-radius: 0.5rem;
          border: 0.25rem solid teal;
          background-color: darkturquoise;
      }
      ...
      

      Save these changes to your styles.css file and refresh index.html in your browser. The <hr> element between the two paragraphs will have a thick teal border with a lighter teal color inside, as shown in the following image:

      Brown text in a sans serif font, with a lighter tan background and a border with a title text in teal and a rule line between paragraphs.

      Next, return to your text editor and go to the footer selector in your styles.css file. Here, add a color property and use chocolate as the value:

      styles.css

      ...
      footer {
          margin-top: 2rem;
          font-size: 0.875rem;
          color: chocolate;
      }
      

      Save your changes to styles.css in your text editor, then return to your browser and refresh index.html. Your browser will render chocolate as a lighter brown hue than maroon, but not as light at the saddlebrown border:

      Sans serif text in a light brown color with a link in blue with an underline.

      Before returning to your code editor, take note of the color of the link in the <footer> element. It is using the default browser color for a link, which is blue, unless you have visited the link, in which case the color is purple. There is a special value for color you will now use called inherit, which instead of defining a specific color uses the color of its parent container, in this case the <footer>.

      To use the inherit value on a color property, return to styles.css in your text editor, and after the closing tag for your footer selector, add a new combinator of footer a to scope the styles to <a> elements inside of <footer> elements. Then, add a color property with a value of inherit, so the <a> will inherit the color value set on the footer, as shown in the highlighted section of the following code block:

      styles.css

      ...
      footer a {
          color: inherit;
      }
      

      Save your changes to the styles.css file and refresh index.html in your web browser. The <a> is now the same color as the other footer text and retains the underline, which distinguishes the text as a link. The following image shows how this will appear in your browser:

      Sans serif text in a light brown color with a link underlined.

      Note: The inherit value only works on colors that can accept the foreground color value, such as border-color and color. Other properties, such as background-color or box-shadow, can access the defined color value with a special value called currentColor. It works the same way as inherit, but for instances where inherit is not a valid value.

      You used color keywords in this section to set several colors of varying contrasts to the content. You also used the inherit value to reuse a color value without explicitly defining a value. In the next section, you will use the hexadecimal color code system to adjust the colors of the content.

      Applying Colors With Hexadecimal

      The hexadecimal, or hex, color value is the most common method of applying colors to elements on the web. In this section, you will use hex colors to redefine and adjust the visual style of the content.

      It is important to have an understanding of what the hexadecimal system is and how it works. Hexadecimal is a base 16 valuation system that uses 0-9 as their numerical values and the letters a-f as values ranging from 10-15. The hex values are used to control each of the primary colors (red, green, and blue) in intensity from 0, represented as 00, up to 255, represented as ff. The hex value follows a # to indicate that the color type is a hex color code, then two digits for each color channel, starting with red, then green, then blue.

      Hexadecimal color codes can be written in two ways. The first is the long form, which is more common and more detailed, containing six digits, two for each color channel. An example of this is yellow created with #ffff00. The second way of writing a hex color code is a short form, which can be written with only three digits that the browser will interpret as a doubling of each single value. In the short form, yellow can be created with #ff0. The short form hex color value allows for a quicker, but more limited palette if used exclusively.

      To begin using hex color codes, open up styles.css in your text editor and go the article element selector. For the background-color property value, use #f0f0f0, which is a very light gray. Next, for the border properties color value, use the short form hex code of #ccc, which is a middle gray. Finally, for the main text color properties, use the dark gray short form hex code #444:

      styles.css

      ...
      article {
          ...
          background-color: #f0f0f0;
          border: 0.25rem solid #ccc;
          color: #444;
      }
      ...
      

      Note: When working with text content, it is important to maintain a good color contrast between a background-color and the text color value. This helps the readability of the text for a broad range of readers and website users. To learn more about the importance of accessible color contrast ratios, watch this Designing with Accessible Color Contrast on the Web video series. Also, this contrast calculator provided by WebAIM is a great tool to test if your colors provide enough contrast to make text readable for an inclusive audience.

      Next, you will set the h1 color value to a dark red. Go to the h1 selector in your styles.css file and update the color property to have a value of #900, which turns on the red channel to about the midpoint and leaves the green and blue channels off:

      styles.css

      ...
      h1 {
          ...
          color: #900;
      }
      ...
      

      Carrying on with the red values, update the hr color properties to match the h1 element. Set the border property color to #bd0000, which requires the long form hex code, since the color is a value between #b00 and #a00. Then, set the background-color to a full red value with #f00. This is the hex value equivalent of the red keyword:

      styles.css

      ...
      hr {
          ...
          border: .25rem solid #bd0000;
          background-color: #f00;
      }
      ...
      

      Lastly, to carry on with the footer text being a lighter version of the main text, go to the footer property and change the color property to be a middle gray of #888:

      styles.css

      ...
      footer {
          ...
          color: #888;
      }
      ...
      

      Save your changes to styles.css and return to your browser to refresh index.html and review your changes. As is shown in the following image, the article container is now comprised of several gray colors with the heading and rule line variations of red:

      Dark gray text in a sans serif font with a lighter gray background and border. The title text is red and there is a rule line between paragraphs that is two shades of red.

      In this section, you used several hexadecimal color code values to define colors throughout the styles.css styles document. In the next section, you will translate these hexadecimal values to a more legible numeric value with the rgb() color code.

      Applying Colors With rgb()

      Where the hexadecimal color values are defined with a limited number of alphanumeric values, rgb() uses numeric only values ranging from 0 to 255 for each primary color channel. Using only numerical values for these allows for a much quicker comprehension of the colors created by the rgb() format than by the hexadecimal.

      Like the hexadecimal format and the structure of the rgb() format indicate, the colors are represented within the parenthesis as the red channel value, green channel value, and then blue channel value. A black color formatted in rgb() is rgb(0, 0, 0), while a white is formatted as rgb(255, 255, 255). This also means a full red color is rgb(255, 0, 0), while a full green is rgb(0, 255, 0), and so on.

      To begin refactoring your code to use rgb() values instead of hexadecimal values, it can be helpful to use a HEX to RGB converter, such as this HEX to RGB converter embedded in the Duck Duck Go search engine. Using a mathematical approach, the numerical value can be decoded using the hexadecimal value for each channel. In the case of a hex code for the red channel being fe, this means that the f indicates 15 iterations of 16 counts from 0-15, making the f equal to 16×15, or 240. The e of the hexadecimal fe is equal to 14 in the base-16 sequence. Add these two values together and the red channel for the rgb() value is 254.

      This chart will help you identify the values of each hexadecimal value to convert them to their numerical value needed for rgb(). The first row is the value for the first character in the hexadecimal sequence, which is the hex value multiplied by 16. The second row is the value for the second character in a hexadecimal sequence, which is the hex value multiplied by 1:

      Calculation 0 1 2 3 4 5 6 7 8 9 a b c d e f
      First Hex Digit x*16 0 16 32 48 64 80 96 112 128 144 160 176 192 208 224 240
      Second Hex Digit x*1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      Open your styles.css file and go to the article selector block in your text editor. Identify the background-color property with the value of #f0f0f0. Using either a conversion tool or the mathematical formula with the chart previous, this will come to be rgb(240, 240, 240), since the f in the sequence is in the second position and is equal to 240. Adding these two values together is 240:

      styles.css

      ...
      article {
          ...
          background-color: rgb(240,240,240);
          border: 0.25rem solid #ccc;
          color: #444;
      }
      ...
      

      Next, for both the border and color values since these are written as the short form, it’s helpful to expand these out to the long form when converting to rgb(). The #ccc short form becomes #cccccc in the long form. That creates a formula of (12 * 16) + 12, which results in 204. Applying that value to each channel, #ccc becomes rgb(204, 204, 204). After applying this new value, as shown in the following highlighted section, the same approach can be applied to the color value of #444, which becomes rgb(68, 68, 68):

      styles.css

      ...
      article {
          ...
          background-color: rgb(240,240,240);
          border: 0.25rem solid rgb(204, 204, 204);
          color: rgb(68, 68, 68);
      }
      

      Next, move on to the h1 and hr color properties. For all three of these properties, the colors only use the red channel, meaning the rgb() will be 0 for the green and blue channels:

      styles.css

      ...
      h1 {
          ...
          color: rgb(153, 0, 0);
      }
      
      hr {
          ...
          border: 2px solid rgb(189, 0, 0);
          background-color: rgb(255, 0, 0);
      }
      ...
      

      For the h1 color property, the #900 short form is expanded to #990000, and using the chart the 99 sequence can be calculated as (16 * 9) + 9, which equals 153 for a result of rgb(153, 0, 0). Following the same formula for the hr properties, the bd in the border hex value becomes 189. The f in the short form background-color property value is expanded to ff with a result of 255, which is the highest value of a color in both rgb() and hexadecimal color formats.

      Continuing to work in your text editor in the styles.css file, identify the footer selector and update the gray used on the color property. Since the value is the short form #888, it can be expanded to #888888, and using the chart and formula, the final value becomes rgb(136, 136, 136):

      styles.css

      ...
      footer {
          ...
          color: rgb(136, 136, 136);
      }
      ...
      

      Save your changes to the styles.css file then reload the index.html file in your web browser. There will be no difference from the previous step with the hexadecimal values as these rgb() values are equivalent.

      The hexadecimal and the rgb() formats equate to the same numerical value, but the rgb() format is more human readable, giving it an advantage over the former format. This allows developers to make informed changes faster and to adjust the intensity of a channel to produce a color, such as adding more red to make a color feel warmer.

      To demonstrate this, add 5 to the value of the red channel for each of the gray colors in the article and footer selectors. For the article properties, change the background-color red channel to 245, the border red channel to 209, and the color property red channel to 73. Then, change the footer selector’s color property red channel to 141. These changes are shown in the following code block:

      styles.css

      ...
      article {
          ...
          background-color: rgb(245,240,240);
          border: 0.25rem solid rgb(209, 204, 204);
          color: rgb(73, 68, 68);
      }
      ...
      footer {
          ...
          color: rgb(141, 136, 136);
      }
      ...
      

      Save your changes to styles.css, return to your browser, and refresh index.html. The gray colors will become a warmer tint as they have more red than green or blue. The following image shows a comparison between the cooler and warmer gray:

      Comparison of two styles. The left image has dark gray text in a sans serif font with a lighter gray background and border with a title text in red and a rule line between paragraphs. The right image has the same composition, with the grays in a slighting warmer variant.

      In this section, you learned about the rgb() color format and how to convert hexadecimal color values into numerical values, which can be easier to work with. You also added a bit more to the red channel of a rgb() color format to create a warmer variety of gray colors. In the next section, you will use the hsl() color format, which stands for hue, saturation, and lightness.

      Applying Colors With hsl()

      Where the hexadecimal and rgb() color formats have a closer connection to the combined values of the primary colors, hsl() uses a color from the color wheel with saturation and lightness levels and to generate a final color.

      Like the rgb() format, the hsl() format consists of three values in a comma-separated sequence. The first value is the hue, which is a degree marker on the color wheel. The second value is saturation, which is a percentage value where 100% means full color and 0% means no color, which results in white, black, or gray depending on the value of the final number in the sequence. Lightness is a percentage value that ranges from white at 100% to black at 0%.

      The color circle starts at 0 degrees, which is red, and goes around the rainbow to orange, yellow, green, blue, purple, and back to red as the circle completes at 360 degrees. This degree value is the first value of the sequence and can be represented by a number alone or using any of the angle units. The saturation and lightness are both percentage values and require the percent sign to be present, even if the value is 0.

      The biggest advantage to using the hsl() format is that colors can be more cohesive and complementary when there are similar values. For example, a monochromatic color scheme can be quickly put together by deciding a hue value and a saturation percentage, then setting all the other colors as variations of lightness. Likewise, colors with a similar saturation level will appear better matched despite the difference in hue or lightness levels.

      Converting from hexadecimal or rgb() to an hsl() formatted color is not as straightforward. A color conversion tool can help change values from hexadecimal to hsl().

      To begin working with the hsl() color format, open styles.css in your text editor and go to the article and footer selectors. Returning to the gray values from earlier in this tutorial, you can set the hue and lightness values to be 0 and 0%, respectively. Since these are grayscale, only lightness values need to be adjusted:

      styles.css

      ...
      article {
          ...
          background-color: hsl(0, 0%, 94%);
          border: 0.25rem solid hsl(0, 0%, 80%);
          color: hsl(0, 0%, 27%);
      }
      ...
      footer {
          ...
          color: hsl(0, 0%, 45%);
      }
      ...
      

      The background-color is a very light gray, and so it is closer to 100% at 94%. The border value of the article is a bit darker, but still a light gray with a lightness value at 80%. Next, the color value of the article comes in at a much darker 27%. Lastly, the color for the footer text uses a lightness value of 45%, giving a lighter but still readable gray for the citation reference text. Using only the lightness value, a monochromatic gray palette comes together quickly.

      Next, move down to the h1 and hr selector blocks. A similar setup will occur as with the article color properties: the hue and saturation values will remain unchanged for the next three properties. The hue value is set to 0 and the saturation is set to 100%, giving a full saturation red. Lightness will once again differentiate these red values:

      styles.css

      ...
      h1 {
          ...
          color: hsl(0, 100%, 25%);
      }
      
      hr {
          ...
          border: 2px solid hsl(0, 100%, 35%);
          background-color: hsl(0, 100%, 50%);
      }
      ...
      

      The h1 color gets a dark red by having a lightness value of 25%. While the hr will have a darker red border with a 35% lightness value, the background-color gets a pure red by having a lightness value of 50%. As the value goes up from 50%, a red becomes pink until it is white, and lower than 50% a red becomes more maroon until it is black.

      Save your changes to styles.css, return to your browser, and refresh index.html to find how your styles appear when written in the hsl() color format. The following image shows how this will appear:

      Dark gray text in a sans serif font with a lighter gray background and border with a title text in red and a rule line between paragraphs that is two shades of red.

      Now, return to your text editor and go to the article and footer selectors in your styles.css file. You will now adjust only the hue and saturation values, but leave the lightness value as is. Set the hue value to 200 on all four color properties across the two selectors. Then, for the color properties on the article selector, set the saturation value to 50%. Finally, set the saturation level for the footer color property to 100%. Reference the highlighted portions of the following code block for how these color values will appear:

      styles.css

      ...
      article {
          ...
          background-color: hsl(200, 50%, 94%);
          border: 0.25rem solid hsl(200, 50%, 80%);
          color: hsl(200, 50%, 27%);
      }
      ...
      footer {
          ...
          color: hsl(200, 100%, 45%);
      }
      ...
      

      Save your changes to the styles.css file and reload index.html in your web browser. As in the following image, the gray color is now a cyan color of varying lightness and saturation. The article colors are more muted due to the 50% saturation, while the footer color is much more vibrant with the 100% saturation.

      Dark blue text in a sans serif font with a lighter blue background and border, with a title text in red and a rule line between paragraphs that is two shades of red.

      One of the greatest advantages of working with the hsl() color format is creating complementary color palettes. A complementary color is always on the opposite side of the color circle. Red’s complementary color is green. With red at the 0 degree mark in the hue value, its complement is at the 180 degree mark. In the case of the article and footer colors having a hue value of 200, subtracting 180 will give a complementary hue value of 20, an orange color.

      Go to the h1 and hr selectors in the styles.css file in your text editor. For the hue values on each of the color properties, change the hue from 0 to 20 to set the colors from red to the complementary color of orange:

      styles.css

      ...
      h1 {
          ...
          color: hsl(20, 100%, 25%);
      }
      
      hr {
          ...
          border: 2px solid hsl(20, 100%, 35%);
          background-color: hsl(20, 100%, 50%);
      }
      ...
      

      Save your changes to styles.css and return to your web browser to refresh index.html. With a few modifications to the hue values, a pleasant color palette has come together. The following image shows how this will appear in your browser:

      Dark blue text in a sans serif font with a lighter blue background and border, with a title text in a dark orange and a rule line between paragraphs that is two shades of orange.

      In this section, you used the hsl() color format to create colors using the color theory aspects of hue, saturation, and lightness. You also were able to create a complementary color palette using a formula to get the opposite color on the color circle.

      Conclusion

      In this tutorial, you used the four methods of defining color on websites with CSS. The keyword color values allow for quick access to predefined colors as outlined by the CSS specifications. Hexadecimal colors are the most common and widely used format that hold a lot of information in a small number of characters. The rgb() color formation converts the values of the hexadecimal value to a more comprehensive format using numeric values in a comma-separated list. Lastly, the hsl() color format allows for the concepts of color theory to be applied to web site development by using the hues of the color circle, saturation, and lightness to create distinctive and complementary color palettes. All four of these formats can be used together on a single website, each playing to their own strength.

      If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.



      Source link

      How To Style Text Elements with Font, Size, and Color in CSS


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

      Introduction

      Cascading Style Sheets (CSS) is a language designed for two disciplines: that of the programmer and that of the designer. Working with text on the web is one of the clearest examples of this broad accessibility to the language. Styling text uses concepts from the graphic design world but adjusts naming conventions to be more broadly implemented.

      In this tutorial you will learn about web typography, the art of styling text. Similar to working with a printing press, you will set out your content, apply visual style to help communicate the content, and adjust the content for legibility and emphasis. The intent with styling text on the web is to create a visual hierarchy through color, size, shape, and space. This way, headings stand out from sub-headings, which stand out from paragraphs. These concepts help make text more readable and scannable for readers.

      You will start the tutorial by writing the HTML structure, which will consist of placeholder content from Cupcake Ipsum. You will work with different heading levels (h1h6) and content types (p, strong, and em) to apply multiple text-related CSS properties, including font-family, font-size, and color. You will also load custom fonts from Google Fonts, a third-party font-hosting service. Each step of this tutorial will introduce a new concept or set of properties to apply to the content. By the end you will have a custom-styled web page.

      Prerequisites

      Setting Up the Example 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 for you to practice styling.

      Open up the index.html file using a text editor, such as nano, Vim, or Visual Studio Code. 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.

      Next, you need some content to style. When creating text styles, often a project needs styles before the content is ready. In the graphic design world, placeholder content is used for this purpose. Designers will often use Latin text as a placeholder, known as Lorem Ipsum. There are many modern renditions of this placeholder text, including Cupcake Ipsum. This will be the reference copy used throughout the HTML.

      To start, the HTML needs to depict hierarchy, a clear distinction and order of content. In HTML that is done with heading tags, which span from <h1>, the top most heading, through <h6>, the bottom most heading. The browser default styles for the headings define the visual hierarchy by size alone, with the <h1> element’s default font-size being significantly larger than that of the <h6>. Throughout this tutorial you will use other principles of design, such as color and space, to provide visual hierarchy to the content.

      To create this hierarchical content, you will write out various headings and fill each heading with a few words from Cupcake Ipsum within the <body> tags in index.html. You will follow proper HTML semantics, which provide accurate meaning to the browser.

      To have proper HTML semantics:

      • There will only be one <h1> element on the page. This will usually be the title.
      • Subsequent heading levels will only be one lesser, equal, or any greater level. For example, the only heading level that comes after an <h3> will be either <h4>, another <h3>, or an <h2>, but never an <h5> or <h6>.

      With the rules of heading semantics, add the following highlighted HTML to index.html:

      index.html

      ...
        <body>
          <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
      
          <h2>Tootsie roll oat cake macaroon</h2>
      
          <h2>Jelly beans tiramisu pastry danish donut</h2>
      
          <h3>Lemon drops pastry marshmallow</h3>
      
          <h3>Apple pie pudding topping</h3>
      
          <h4>Gingerbread danish</h4>
      
          <h5>Carrot cake topping lollipop gummi bears</h5>
      
          <h6>Liquorice bonbon candy cotton candy liquorice</h6>
        </body>
      ...
      

      Next, you need some content to fill in space between each heading. These will be paragraphs of text designated by the <p> element to hold each paragraph. Use Cupcake Ipsum again to generate this content and place the paragraphs throughout the page.

      Add the highlighted portions of the following code block. This tutorial will use this format for code blocks throughout:

      index.html

      ...
        <body>
          <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
      
          <h2>Tootsie roll oat cake macaroon</h2>
      
          <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
      
          <h2>Jelly beans tiramisu pastry danish donut</h2>
      
          <h3>Lemon drops pastry marshmallow</h3>
      
          <p>I love marshmallow candy. Sesame snaps muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
      
          <h3>Apple pie pudding topping</h3>
      
          <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
      
          <h4>Gingerbread danish</h4>
      
          <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
      
          <h5>Carrot cake topping lollipop gummi bears</h5>
      
          <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
      
          <h6>Liquorice bonbon candy cotton candy liquorice</h6>
      
          <p>Cupcake donut topping chupa chups halvah chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
        </body>
      ...
      

      Finally, add in <strong>, <em>, and a combination of the two elements together. This will provide examples of phrases that are emphasized in the content:

      index.html

      ...
          <h2>Tootsie roll oat cake macaroon</h2>
      
          <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
      
          <h2>Jelly beans tiramisu pastry danish donut</h2>
      
          <h3>Lemon drops pastry marshmallow</h3>
      
          <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
      
          <h3>Apple pie pudding topping</h3>
      
          <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
      
          <h4>Gingerbread danish</h4>
      
          <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
      
          <h5>Carrot cake topping lollipop gummi bears</h5>
      
          <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
      
          <h6>Liquorice bonbon candy cotton candy liquorice</h6>
      
          <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
      ...
      

      Now that you have the HTML written, save index.html and open it in your browser to see what the page looks like with the browser default styles:

      Content of a web page with several headings and paragraphs all in a black, serif font on a white background.

      The text ranges in sizes across all the elements, with the default <h5> and <h6> styles being smaller than the <p> text.

      In this step you set up the HTML content that will be styled throughout the rest of the tutorial. Next, you will work with the font-family property, learn about the font stack, a list of fonts that the browser can use, and apply fonts to different elements.

      Using the font-family Property

      Next, you will work with the font-family CSS property and load an external font file from the Google Fonts service. The name of this property derives from a typography term that describes the collection of fonts and the variations of that font, including bold and italic versions. A font can have many of these variations, but can all be part of the same font-family, with those variations called with font-weight and font-style properties.

      To begin working with font-family, it is helpful to understand the particulars about its value options. The value of a font-family property is a list of fonts called a font stack. The font stack works as a fallback system. Consider the following font-family property value:

      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      

      The browser is first going to determine if Helvetica Neue is available for it to use, either as a font that is installed on the computer or as one provided by a website. If the browser doesn’t find a font called Helvetica Neue, then it goes down the list to Helvetica and then to Arial. If the browser is unable to find any of those fonts, then the last font in the list, sans-serif, will use whatever the browser has set as its default font for a sans-serif style font.

      Note: Font stacks provide their best feature not when a font is not found, but when a particular character is not found in the font. This is especially necessary for instances of using multiple language support, where one font may not have a character set that covers all languages needs. A font stack can contain a fallback font that provides the special characters and a similar visual feel to the primary font in the stack.

      Create a file called styles.css in the same directory as index.html. Open it up in your text editor and add a default font for the page:

      styles.css

      body {
        font-family: "Avenir Next", Calibri, Verdana, sans-serif;
      }
      

      In this code, you start with a body type selector with a font–family property. Next, for the font stack you start with "Avenir Next", which will be available on iOS and macOS browsers. Avenir Next is in quotes because the font name is two words. The next font is Calibri for Windows browsers. Be sure to put a comma between each font declaration. To provide a more generic font fallback, you then use Verdana, which has been widely available on computers since the early 2000s. Finally, since all these fonts are classified as sans serif fonts, you add the browser default sans-serif as the final font option in the font stack.

      Save styles.css, then open up index.html in your browser. You will find a new font in place of the browser default font for the content. If you are on an Apple operating system, Avenir Next will render in the browser. If you are on Windows, Calibri will render instead. The following image is what this font stack looks like on MacOS:

      The content of the web page deplayed with the Avenir Next font in various font weights.

      In this section you used the font-family property to set up a default font stack for the web page. You also set up a font-family property that applies specifically to heading text content. In the next section you will use the Google Fonts service to load a custom font file and use it on the page.

      Loading Custom Fonts With Google Fonts

      Now that you have used the font-family property with fonts already installed on your computer, it is time to load fonts from an external service. This will widen the range of fonts you can use to style your text. In this section, you will work with the Google Fonts service to load and use a font on the web page.

      Browsers have the ability to load any font, so long as it is provided the appropriate font file format for that browser. A font service, such as Google Fonts, alleviates the work of defining and hosting fonts by providing both the CSS and font files needed to load the font. There are many other services like Google Fonts, but Google Fonts hosts royalty and open source fonts and offers the service free of charge.

      To get started, open fonts.google.com in you browser.

      There are many different fonts you can choose from in Google Fonts. This tutorial will use two: Public Sans and Quicksand.

      From the search field on Google Fonts, search for Public Sans. When the font card shows up from the search result, a preview of the font is displayed. Click the card to go to the page for the font:

      Google Fonts page for the Public Sans font, displaying the font at different weights.

      The Public Sans font page will list all the variations of the font. These are known as weights, which range from 100 to 900. For the purposes of this tutorial, find the Regular (400) and the Bold (700) styles and press the + Select this style button next to each style variant, as well as their italic style.

      Once you select the first style, a selected family tool will slide in. This tool will provide you with the HTML and CSS needed to use these fonts:

      Selected font family tool, with the HTML and CSS lines needed to use Public Sans.

      Select the <link /> method to load the fonts in the browser and copy the provided HTML. Open index.html and add the code into the <head> element after the <link /> loading styles.css. Keep Google Fonts open, as you will return to it a couple more times:

      index.html

      ...
      <head>
          <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
      </head>
      ...
      

      At this point, reloading index.html in your browser won’t have any visual changes. The browser is loading the font, but the font needs to be added to the font stack to apply the font to the content.

      Return to Google Fonts to find the CSS rule that loads Public Sans. Google Fonts provides a font stack of Public Sans and the browser default sans-serif font with font-family: 'Public Sans', sans-serif;. Since you already have a font stack set up with fallback fonts, all that you need to take from Google Fonts’ example is the name to reference Public Sans.

      Using your existing font stack in styles.css, replace Avenir Next and Calibri with Public Sans:

      styles.css

      body {
        font-family: "Public Sans", Verdana, sans-serif;
      }
      

      Now that the base font stack has been declared all fonts on the page are now Public Sans.

      One common design practice to bring more attention to headings is to use a different font for the headings than for the main text. To apply this to your own HTML, return to Google Fonts and do a search for “Quicksand.” This will be the heading, or display font, for the <h1> through <h6> elements on the page.

      Once you have found Quicksand, select the font card and add the Semi-bold (600) and Bold (700) font weights to the selected fonts alongside Public Sans. Google Fonts will provide a new URL to load all the selected fonts and variants. Swap out the previous href value for the new link in your index.html file:

      index.html

      ...
      <head>
          <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet">" rel="stylesheet">
      </head>
      ...
      

      Now that Quicksand is set to load in the browser, you need to apply it to the heading tags. You will accomplish this by adding a comma-separated list of CSS selectors, called a group selector, to your styles.css file. In this case, use the font stack provided by Google Fonts with Quicksand followed by the browser default sans-serif font:

      styles.css

      ...
      h1, h2, h3, h4, h5, h6 {
        font-family: "Quicksand", sans-serif;
      }
      

      Save your changes to styles.css and return to your browser to reload index.html. Feel free to close Google Fonts at this point. When the browser loads, you will now find two fonts displayed. Quicksand is now on all the headings and Public Sans is on all other content, including the bold and italic content.

      The content of the website using fonts loaded from Google Fonts.

      In this section you loaded two fonts from the Google Fonts service and added those fonts to your existing font stacks. The next section will look at using the font variants to specify when and how to apply bold and italic to a font.

      Using font-weight and font-style Properties

      In this section you will use the font-weight and font-style properties to adjust how a font appears. There are many reasons to use these variations, such as to emphasize content, as part of a citation style guide, and to provide visual variation.

      Now that you are loading in custom fonts from Google Fonts, you can start to fine-tune the characteristics of the text. Starting with the font-weight property, you can change how thick or thin the font is displayed. The font-weight property has two common values: normal and bold. The normal value is the default font-weight for most text in a browser. The bold value is the default font-weight for headings and <strong> elements. But for this tutorial, you will need to use the numeric values instead of the name normal and bold values.

      Numeric font-weight values depend on the font that you are loading. When you added the Public Sans font from Google Fonts, you selected the Regular (400) and the Bold (700) weights. The numbers in parenthesis coincide with the values needed to reference and load that font. Additionally, the font-weight value of 400 is the numerical equivalent of normal, like 700 is the numerical equivalent of bold. Text that uses Public Sans, which is all but the headings, will automatically use these weights.

      Alternatively, the Quicksand font selections included the Semi-bold (600) and Bold (700) font weights. The 600 value does not have a numerical counterpart and needs to be defined using a numerical value.

      You will start by setting the font-weight of all headings to the 600 semi-bold variant of Quicksand. In your styles.css file, locate the group selector with all the heading values and add a font-weight: 600; declaration to the selector block:

      styles.css

      ...
      h1, h2, h3, h4, h5, h6 {
          font-family: "Quicksand", sans-serif;
          font-weight: 600;
      }
      

      Once you have made this change, save styles.css and reload index.html in your browser. You will see a slight thinning of the headings as they change from the 700 value of Quicksand to the 600 value.

      Now that you have set all the heading elements to use the Quicksand 600 weight, there are still places to use the 700 variation of the font. To start, create an h3 type selector in your styles.css file and add font-weight: 700; in the selector block:

      styles.css

      ...
      h3 {
          font-weight: 700;
      }
      

      This change will cause the h3 to stand out a bit as it is now bolder than the other headings. As the tutorial progresses, you will make additional changes to the h3 styles to make it stand out but still maintain its hierarchical order.

      Save your changes to styles.css and then create a new selector that targets text that is wrapped in both <em> and <strong> tags. In the case of the styles written so far, this kind of text will get the bold italic variant of Public Sans. Instead, set the styles to use the Quicksand font stack.

      Since the HTML to get a bold italic style is <strong><em>...</em></strong> and <em><strong>...</strong></em>, you will need to create a combinator group selector in your styles.css file and then apply the font-family property with "Quicksand", sans-serif as the value:

      styles.css

      ...
      strong em,
      em strong {
          font-family: "Quicksand", sans-serif;
      }
      

      Once you have made this addition to your styles.css file, save it and then reload index.html in your browser. The text that was bold italic now is using Quicksand and is italic, even though Google Fonts is not providing an italic version of the font. This is called a faux italic, where the browser understands that this content should be italic by default, but since an italic variation is not defined is instead artificially slanting the text.

      The property for handling whether text is italicized or not is font-style. The value options for the font-style property are normal and italic. Instead of using the faux bold, change the styles for this selector to have no italicization. Add to the strong em, em strong group selector in your styles.css file the font-style property with a value of normal:

      styles.css

      ...
      strong em,
      em strong {
          font-family: "Quicksand", sans-serif;
          font-style: normal;
      }
      

      This will change the instance of bold italic text to be only Quicksand bold.

      Save your changes to styles.css and reload index.html in your browser to see the change:

      The last sentence from the website content with text that is bold italic being bold only in the Quicksand font.

      You used the font-weight and font-style properties in this section to apply variations of the Quicksand font loaded from Google Fonts. Next, you will use the font-size property to create larger, more legible text with clearer hierarchy amongst the headings.

      Using the font-size Property

      In this section you will use the font-size property to apply different font sizes to the content throughout the page. The size of text is an important factor in communicating information. Well-sized text is easier to read and appropriately sized headings help convey hierarchy for easier skimming of the information. You will change the font-size of all the elements you created in index.html to create a document that is more readable.

      Start by setting a default font-size on the body element. The default browser font-size is 16px, but it can be helpful for increased legibility for many fonts to be just a little bigger. Open your styles.css file and add a font-size: 18px; to the body element:

      styles.css

      body {
          font-family: "Public Sans", Verdana, sans-serif;
          font-size: 18px;
      }
      ...
      

      Open index.html in your browser or refresh the page. The font-size change on the body element changed all the fonts on the page, increasing their size.

      The default font sizes for elements are relatively sized based on the parent element, in this case the <body> element, using a percent value for the font size. Using the formula (target / base) * 100% will give you a percentage value that is relative to the base font size set on the <body> element.

      To give this formula a try, you will work with setting a target font-size for the <h1> element to be 45px. Using the formula, the target size is 45px and the base size is 18px, so the formula for this will be (45 / 18) * 100%, which comes to 250%. This means that the intended size for the <h1> will be 2.5 times the size of the base font-size.

      Return to you styles.css file and add an element selector for h1 and add a font-size: 250%; property and value to set the font size:

      styles.css

      ...
      h1 {
          font-size: 250%;
      }
      ...
      

      Now that you have set a relative font size for the <h1> element, apply the same formula to the remaining heading elements. With each you can choose to either round, or keep the full decimal values. It can also be helpful to leave comments explaining the target size or even the formula.

      Open up your styles.css file and start by adding a comment after the h1 font-size property explaining the rendered size. Then for each heading apply the formula so the h2 has a font-size equivalent of 36px, the h3 equal to 32px, h4 to 26px, the h5 to 22px, and lastly the h6 to the base size of 18px. The default size of the <h6> element is smaller than the base size, so setting it to 100% will ensure that it does not go below the base value:

      styles.css

      ...
      h1 {
          font-size: 250%; /* 45px */
      }
      
      h2 {
          font-size: 200%; /* 36px */
      }
      
      h3 {
          font-size: 177.78%; /* 32px */
      }
      
      h4 {
          font-size: 162.5%; /* 26px */
      }
      
      h5 {
          font-size: 122%; /* 22px */
      }
      
      h6 {
          font-size: 100%; /* 18px */
      }
      ...
      

      Return to your browser and refresh index.html. All the headings will increase their font-size based relatively on the default font-size set on the <body> element. The following image shows how this change will render in a browser:

      The content of the website in black text with custom font sizes throughout with the main heading being 2.5 times larger than the base text size.

      With this step you used the font-size property to change the size of the text on the web page. You used the design concept of size to give hierarchy to the content beyond the default browser styles. In the next step, you will take the design of the content further with the color property.

      Using the color Property to Distinguish Text

      The focus of the next section is the color CSS property, using color to differentiate order and add meaning to the content. Color is one of the most common design considerations, in particular with defining different meaning to text. In this section you will use named colors to set your text color. Named colors are a collection of predefined colors that has grown over the years; they match to other web color values, such as hexadecimal color codes. This section will use the named color list found on Wikipedia’s page on Web colors. You may want to keep the Wikipedia Web colors page open in your browser for reference.

      Like you did with font-size, you are going to set a default color to the whole document. This will affect all content on the page, as color is an inherited value for most elements. It is important to keep color contrast in mind, as it helps legibility, especially when it comes to making the web accessible to all levels of vision. Since the background-color will remain the default white, using bold, darker colors is a good guide. If you wish to learn more about designing with accessible color contrast, watch this short video series on the topic.

      To begin using color, return to your styles.css file in your text editor. As you did with the font-size section, find the body selector and add a color property. The default color for text in most browsers is black. For accessible color contrast, it is important to keep the base color dark when on a light background. Use the named color DarkSlateGray, which is only camel case here for legibility, but can be all lowercase if you wish:

      styles.css

      body {
          font-family: "Public Sans", Verdana, sans-serif;
          font-size: 18px;
          color: DarkSlateGray;
      }
      ...
      

      Save your styles.css file and refresh index.html in your browser. The color of the content will change from black to a dark blue-green:

      A portion of the content of website on a white background with a dark blue-green color.

      Now that the base color is set, you can start using other colors to provide more visual hierarchy. Start with the h1 selector in your styles.css file and add a color property with a value of Indigo:

      styles.css

      ...
      h1 {
          font-size: 250%; /* 45px */
          color: Indigo;
      }
      ...
      

      Save your styles.css file, return to your browser, and refresh index.html. The <h1> text now has a deep purple color instead of the default dark blue-green color:

      The main heading of the page in a dark puple color.

      Next, you will apply colors to the other headings. Quicksand is a fun, rounded font and you’re using the quirky Cupcake Ipsum sample content, so create a bright and peppy color scheme by using a different color on each heading. Return to styles.css and, for each of the heading selectors, add a color property and color value. For the h2 element use MediumVioletRed, for the h3 use LimeGreen, for the h4 add Chocolate, for the h5 use Crimson, then finally for the h6 use DeepSky Blue:

      styles.css

      ...
      h2 {
          font-size: 200%; /* 36px */
          color: MediumVioletRed;
      }
      
      h3 {
          font-size: 177.78%; /* 32px */
          color: LimeGreen;
      }
      
      h4 {
          font-size: 162.5%; /* 26px */
          color: Chocolate;
      }
      
      h5 {
          font-size: 122%; /* 22px */
          color: Crimson;
      }
      
      h6 {
          font-size: 100%; /* 18px */
          color: DeepSkyBlue;
      }
      ...
      

      Once you have added the color properties to the headings, save styles.css and return to the browser to refresh index.html. Your content is now full of color:

      The full final page with various colored text on a white background with different font sizes.

      With the color property you learned about web color named values and how you can use color to provide meaning. You also used the color property to give the content personality by adding a colorful palette to the content of the web page.

      Conclusion

      Working with text is a major part of writing CSS for the web. Text conveys meaning not only in what it says, but also in how it looks. Using the tools you have learned with the font-family, font-weight, font-style, font-size, and color properties, you can manipulate text to help provide meaningful context to your website. These properties are not limited to the headings covered in this article: they can be used with any element containing text.

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



      Source link

      Reference: CSS Color Names


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      HEX, RGB(a) & HSL(a) are all great, but with can also use keyword names for 140 colors. Here’s a reference for all of them, along with their HEX equivalent, in alphabetical order. Note that there’s really 147 in there, but 7 of them have duplicates (grey and gray for example). Everything is included along with the new color names from CSS3 and rebeccapurple from CSS Color Level 4:

      Name HEX Color
      aliceblue #F0F8FF
      antiquewhite #FAEBD7
      aqua #00FFFF
      aquamarine #7FFFD4
      azure #F0FFFF
      beige #F5F5DC
      bisque #FFE4C4
      black #000000
      blanchedalmond #FFEBCD
      blue #0000FF
      blueviolet #8A2BE2
      brown #A52A2A
      burlywood #DEB887
      cadetblue #5F9EA0
      chartreuse #7FFF00
      chocolate #D2691E
      coral #FF7F50
      cornflowerblue #6495ED
      cornsilk #FFF8DC
      crimson #DC143C
      cyan #00FFFF
      darkblue #00008B
      darkcyan #008B8B
      darkgoldenrod #B8860B
      darkgray #A9A9A9
      darkgreen #006400
      darkgrey #A9A9A9
      darkkhaki #BDB76B
      darkmagenta #8B008B
      darkolivegreen #556B2F
      darkorange #FF8C00
      darkorchid #9932CC
      darkred #8B0000
      darksalmon #E9967A
      darkseagreen #8FBC8F
      darkslateblue #483D8B
      darkslategray #2F4F4F
      darkslategrey #2F4F4F
      darkturquoise #00CED1
      darkviolet #9400D3
      deeppink #FF1493
      deepskyblue #00BFFF
      dimgray #696969
      dimgrey #696969
      dodgerblue #1E90FF
      firebrick #B22222
      floralwhite #FFFAF0
      forestgreen #228B22
      fuchsia #FF00FF
      gainsboro #DCDCDC
      ghostwhite #F8F8FF
      gold #FFD700
      goldenrod #DAA520
      gray #808080
      green #008000
      greenyellow #ADFF2F
      grey #808080
      honeydew #F0FFF0
      hotpink #FF69B4
      indianred #CD5C5C
      indigo #4B0082
      ivory #FFFFF0
      khaki #F0E68C
      lavender #E6E6FA
      lavenderblush #FFF0F5
      lawngreen #7CFC00
      lemonchiffon #FFFACD
      lightblue #ADD8E6
      lightcoral #F08080
      lightcyan #E0FFFF
      lightgoldenrodyellow #FAFAD2
      lightgray #D3D3D3
      lightgreen #90EE90
      lightgrey #D3D3D3
      lightpink #FFB6C1
      lightsalmon #FFA07A
      lightseagreen #20B2AA
      lightskyblue #87CEFA
      lightslategray #778899
      lightslategrey #778899
      lightsteelblue #B0C4DE
      lightyellow #FFFFE0
      lime #00FF00
      limegreen #32CD32
      linen #FAF0E6
      magenta #FF00FF
      maroon #800000
      mediumaquamarine #66CDAA
      mediumblue #0000CD
      mediumorchid #BA55D3
      mediumpurple #9370DB
      mediumseagreen #3CB371
      mediumslateblue #7B68EE
      mediumspringgreen #00FA9A
      mediumturquoise #48D1CC
      mediumvioletred #C71585
      midnightblue #191970
      mintcream #F5FFFA
      mistyrose #FFE4E1
      moccasin #FFE4B5
      navajowhite #FFDEAD
      navy #000080
      oldlace #FDF5E6
      olive #808000
      olivedrab #6B8E23
      orange #FFA500
      orangered #FF4500
      orchid #DA70D6
      palegoldenrod #EEE8AA
      palegreen #98FB98
      paleturquoise #AFEEEE
      palevioletred #DB7093
      papayawhip #FFEFD5
      peachpuff #FFDAB9
      peru #CD853F
      pink #FFC0CB
      plum #DDA0DD
      powderblue #B0E0E6
      purple #800080
      rebeccapurple #663399
      red #FF0000
      rosybrown #BC8F8F
      royalblue #4169E1
      saddlebrown #8B4513
      salmon #FA8072
      sandybrown #F4A460
      seagreen #2E8B57
      seashell #FFF5EE
      sienna #A0522D
      silver #C0C0C0
      skyblue #87CEEB
      slateblue #6A5ACD
      slategray #708090
      slategrey #708090
      snow #FFFAFA
      springgreen #00FF7F
      steelblue #4682B4
      tan #D2B48C
      teal #008080
      thistle #D8BFD8
      tomato #FF6347
      turquoise #40E0D0
      violet #EE82EE
      wheat #F5DEB3
      white #FFFFFF
      whitesmoke #F5F5F5
      yellow #FFFF00
      yellowgreen #9ACD32



      Source link