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 Lay Out Text with CSS


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

      Introduction

      The way text is presented on a web page determines how legible the content is and how willing the reader is to read the content. Web typesetting, the art of laying out text, is about controlling the content to present the reader with a pleasant and efficient reading experience.

      This tutorial will teach you how to use the CSS properties that are most effective at laying out text content. You will use properties like line-height, letter-spacing, and text-transform with demo content to optimize for reading and define a content hierarchy by giving headings prominence. These concepts and approaches will help you better present content on your websites.

      Prerequisites

      Setting Up the HTML and CSS Files

      In this section you will set up the HTML content that you will style throughout the tutorial. The purpose of the HTML in this tutorial is to provide various elements and situations to style. You will also create your CSS file and set a base style.

      To begin, open index.html in your text editor and add the following HTML to the file:

      index.html

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

      Next, in the <head> tag, you will add a meta tag for the character set for this page, a title element for the title of the page, a meta tag defining how the page should be handled on mobile devices, and the CSS files to load:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>Text Layout</title>
              <meta name="viewport" content="width=device-width" />
              <link rel="preconnect" href="https://fonts.gstatic.com" />
              <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;family=Quicksand:wght@700&amp;display=swap" rel="stylesheet" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
          </body>
      </html>
      

      Notice that the CSS files include a couple of fonts from Google Fonts and the styles.css file you will create later in this section. If you’d like to learn more about how to use Google Fonts, check out How To Style Text Elements with Font, Size, and Color in CSS.

      Now you will set up the HTML content contained within the page’s <body> tag. This content will be contained in an <article>, which will have an <h1> element, a couple each of <h2> and <h3> elements, and several <p> elements throughout. You will fill these tags with text content from the Cupcake Ipsum filler text generator. This filler content will provide all that is needed to apply visual styles for this tutorial.

      Apply the HTML to your index.html, as shown in the highlighted sections of the following code block:

      index.html

      <!doctype html>
      <html>
          <head>
              ...
          </head>
          <body>
              <article>
                  <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 <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
                  <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>
                  <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>
                  <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>
                  <h3>Apple pie pudding topping</h3>
                  <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>
                  <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
              </article>
          </body>
      </html>
      

      Save all these additions to your index.html file and then open the file in your web browser. As you write your styles, have the index.html file loaded in your browser to check how your styles are applied to the content:

      Content in a serif font with black text on a white background.

      Next, create a file in the same directory as index.html called styles.css and open the new file in your text editor.

      There are two font families that you will load from Google fonts. The first font will be the default font for the page, as it will be used by all content on the page.

      Create a body type selector and add a font-family property with the font stack 'Public Sans', sans-serif to set this as the new default font:

      styles.css

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

      This applies the font to the body element. All the content in this example will inherit that font, without needing to be declared individually. The font name is Public Sans, and it will have a fallback font that uses the browser’s default sans-serif font. Fonts should always have a fallback font using a comma separated list called a font stack. Fallback fonts provide a readable option if the custom font doesn’t load or lacks a special character.

      Next, the heading elements, h1, h2, and h3, will get a special font for the rest of the page called Quicksand. Create a group selector consisting of the three headers h1, h2, h3 and apply the same font stack setup as the body with Quicksand:

      styles.css

      body {
          font-family: 'Public Sans', sans-serif;
      }
      
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
      }
      

      Save your changes to styles.css and return to your browser to reload index.html. The custom font will now load, as shown in the following image:

      Content with black text on a white background with heading text in a rounded sans serif font and the paragraphs in sans serif font.

      For the last part of setting up your files, return to your styles.css file in the text editor. Create singular type selectors for the h1, h2, h3, and p elements to define a font-size for each. Use the rem unit for value, setting the h1 to 2.5rem, the h2 to 1.875rem, the h3 to 1.5, and the p to 1.25rem:

      styles.css

      ...
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
      }
      
      h1 {
          font-size: 2.5rem; /* 40px */
      }
      
      h2 {
          font-size: 1.875rem; /* 30px */
      }
      
      h3 {
          font-size: 1.5rem; /* 24px */
      }
      
      p {
          font-size: 1.25rem; /* 20px */
      }
      

      The code block includes a comment that indicates what each rem value will return as a px unit. The rem unit gives the user more control over adjusting the font-size to a preferable ratio than the px value allows. For more on these units, read through How To Use Common Units in CSS.

      Save your changes to styles.css and return to your browser to reload the index.html file. The text font sizes will adjust to look similar to the following image:

      Content with black text on a white background with heading text in a rounded sans serif font and the paragraphs in sans serif font with various sized text.

      In this section you set up your HTML content in index.html and created your styles.css file. You applied the Google Font typefaces to the CSS globally on the body element and specifically to the h1, h2, and h3 elements. You also set the font-size values for all the text elements on the page. In the next section you will use the width property to create more readable line lengths.

      Improve Line Lengths Using width and max-width

      In this section, you will use the width and max-width properties to set an appropriate line length for the text.

      An often overlooked aspect of web typography is how long a line of text is presented. For both users in need of accessibility assistance and those without, the length of a line contributes significantly to the effort needed to read the text. The longer a line of text is the more likely the reader will have difficulty keeping track of the text. Shorter lines of text help the reader navigate and scan the content.

      Open styles.css in your text editor and write an article type selector to apply a width of 90% and add a margin property with a value of 0 auto. This combination will make sure the content is set to be 90% of the screen’s width, and the auto value in the margin will keep the content block in the middle of the page:

      styles.css

      ...
      article {
          margin: 0 auto;
          width: 90%;
      }
      

      Save these changes to styles.css and reload index.html in your browser. The text will be centered, but the lines of text will be very long. See the following image for how this will appear in your browser:

      Text content in black taking up 90% of the width, with equal spacing on either side.

      The ideal line length is between 45 and 75 characters, as explained by Clarissa Peterson in her talk on Responsive Typography. Longer than 75 characters and the reader can begin to lose track of what line they are reading. On the other hand, shorter than 45 characters and the readers eyes can become fatigued from the constant moving from line to line.

      Setting a width based on a character count is possible with a unit called the character unit, represented by ch in code. The ch unit is determined by the size of the zero character (0) in the font. Since the ideal line length is between 45–75 characters, you can set a max-width value in that range, and the article element will stop growing once it has reached that size.

      Return to the styles.css file in your text editor and, after the width property in the article type selector, add a max-width property and give it a value of 70ch:

      styles.css

      ...
      article {
          margin: 0 auto;
          width: 90%;
          max-width: 70ch;
      }
      

      This means that the maximum width the element is allowed to grow is the width of 70 zero characters of the font used in that space, which is the font set on the body element.

      Save these changes to your styles.css file and reload index.html in your browser. You will find the content centered in the page at a maximum width of approximately 70 characters long. Try resizing the width of your browser to watch the article container transition from a 90% width to its maximum width, as shown in the following animation:

      Animation showing a browser window with content growing in width with the window until the content reaches a maximum width.

      Note: Chris Coyier, of CSS Tricks, created a handy bookmarklet tool that will highlight the range of characters between 45 and 75 to help find the best width to set your content.

      In this section you learned that accessibility and legibility share a common ground with the line length of text content. You used the width property with the max-width property to set a size limiting the text length to 45–75 characters using the ch unit. In the next section, you will use the line-height property to set the appropriate spacing between lines of text.

      Using the line-height Property to Help Readability

      You will use the line-height property in this section to expand and contract the space between the lines of text. You may find that headings typically have less space between lines and that paragraph text tends to have more space. The goal for this spacing is to make the content easier to read. Similar to the width of lines of text, if the lines are too close together, the reader may be distracted by the line above or below. On the other hand, if the text is too far apart, the reader’s eyes can grow tired of jumping over the space between lines and find the text much harder to scan.

      Open your styles.css file in your text editor and go to the body selector. Like the font-family, you will use line-height to set a default distance between lines for the whole document. Add the line-height property and give a value of 1.5. This value is a measurement of the distance between baselines, the line on which the bottom of text rests:

      styles.css

      body {
          font-family: 'Public Sans', sans-serif;
          line-height: 1.5;
      }
      ...
      

      The default for line-height is tied to the keyword value of normal, which is equal to 1.2 of the font size. This means if the font-size is 16px, then the line-height when set to normal is approximately 19.2px. This is a good median value; however, paragraph text usually needs a bit more space, while a heading sometimes needs a bit less.

      Next, go to the group selector targeting h1, h2, h3 and set a line-height value to 1.15. This will bring the text between lines a bit closer together, and can help the presentation of long heading titles. Add the highlighted line in the following code block:

      styles.css

      ...
      h1, h2, h3 {
          font-family: 'Quicksand', sans-serif;
          line-height: 1.15;
      }
      ...
      

      Save your changes to styles.css and return to the browser to reload index.html. You will find the length of the content expand as more space is placed between lines of text. See the following image for how this appears in the browser:

      Text content in black on white with headlines closer together vertically and paragraph lines of text further apart.

      The value for the line-height property can accept fixed unit values, as well as pixel (px) or rem, but it is better to leave no unit as the default behavior is to multiply the value by the font-size.

      You used the line-height property in this section to make the content on the page more legible and easier to scan for the reader. In the next section, you will use the margin properties to set a defined amount of space between types of content as defined in the HTML.

      Using the margin Properties for Spacing

      In this section, you will use the margin property along with the adjacent sibling selector to apply different vertical spacing between the text elements. Where the line-height property gives control between lines of text in an element, margin can be used to adjust the spacing between content elements.

      To begin, return to styles.css in your text editor and find the h3 selector. In this situation, you will add spacing to the element to have more space above the text and less space beneath. This will cause it to be farther from the content above and closer to the content below.

      Add a margin property with a value of 2em 0 0.5em. This will apply spacing that is relative to the font-size value, meaning the top margin will be double the font-size at 48px and the bottom will be half the font-size at 12px:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
      }
      ...
      

      Since the margin works on the outside of the element, each element’s margin properties will overlap. This means that even though the h3 margin on the bottom side is equivalent to 12px, the <p> element’s margin is larger and therefore defines the space between the <h3> and <p>. You can solve this problem by using the adjacent sibling combinator, which is defined by a plus sign (+) between two selectors, with styles applied to the latter in the sequence.

      Create a new selector in styles.css in your text editor using the adjacent sibling combinator as h3 + p, then within the selector block add a margin-top property with a value of 0:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
      }
      
      h3 + p {
          margin-top: 0;
      }
      ...
      

      The way the adjacent sibling combinator works, this means that when the browser has an <h3> element and immediately following it is a <p> element, then these styles are applied to only that <p> element. Other <p> elements are unaffected.

      Save your changes to styles.css and load index.html in your browser. As shown in the following image, the space above the <h3> elements is now much larger and the space between the <h3> and first <p> after it is much closer.

      Black text content with a large spacing between two headers.

      In this section, you used the margin property to apply different spacing between the elements of the page. With the adjacent sibling selector, you set up conditionals that would apply a greater spacing amount if the <h3> element was preceded by a <p> element. In the next section, you will use the text-align property to adjust the placement of the text on a line.

      Using text-align for Effective Content Presentation

      You will now use the text-align property to change where the text is placed on a line. The property has four values: left, right, center, and justify. The default value for this property depends on the browser’s language setting. For languages that read from left to right, left is the default, while languages that read right to left have a default of right. The center property places the text in the center of the line of text and leaves an equal amount of blank space on either side of the line of text. Lastly, the justify value spreads the words out to the edges of the container, leaving visually inconsistent spaces between words.

      Open styles.css in your text editor and find the h3 type selector. Add a text-align property with a value of center as shown in the highlighted portion of the following code block:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
      }
      ...
      

      Save your changes to styles.css and reload the index.html file in your browser. The content of the two h3 level headings are now centered above their respective sections. See the following image for how this appears in the browser:

      Black sans serif text centered to the container.

      It is best to keep the text-align property set to the default, as this is best for the user and their settings. However, changing the alignment value can help distinguish some text better or provide a better aesthetic.

      You used text-align in this section to center text content within its container. You also learned how and when to use the other values available to the text-align property. In the next section, you will use the text-transform and letter-spacing properties to create visual personality while still keeping the text readable and maintaining efficient hierarchy.

      Using letter-spacing and text-transform

      Next, you will use the text-transform property and the letter-spacing property to adjust how the text of a headline appears. The text-transform property controls how text capitalization is formatted, providing options to change the text to uppercase, lowercase, or capitalize, which capitalizes the first letter of each word. The letter-spacing property is the value of space between each character. Together these two properties can create an aesthetic that is legible and stands out.

      Begin with the text-transform property by opening styles.css in your text editor and go to the h1 type selector. Since this heading is the title of the whole article, it makes sense to have title-case formatting.

      Add a text-transform property with a value of capitalize. This value will capitalize the first letter of each word, regardless of if it is capitalized in the HTML:

      styles.css

      ...
      h1 {
          font-size: 2.5rem; /* 40px */
          text-transform: capitalize;
      }
      ...
      

      Save this addition to your styles.css file, then open index.html in your browser. The heading copy now has the first letter of each word capitalized, as shown in the following image.

      Large black text in a rounded sans serif font, with the first letter of each word capitalized.

      Next, return to the styles.css file in your text editor and find the h3 type selector. This time you will set up the h3 style to be all uppercase letters in each word by adding a text-transform property with a value of uppercase. Add the highlighted line for the following code block to your styles.css file:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
          text-transform: uppercase;
      }
      ...
      

      After you have made this change, save styles.css and then refresh index.html in your browser. The h3 content will now be all uppercase, regardless of how it is written in the HTML. See the following image for how this appears in the browser:

      Horizontally centered content in a black rounded sans serif font, all uppercase.

      Note: When using CSS to apply uppercase styling to content, it can affect how screen readers interpret the content. For example, with Voice Over on macOS, a three-letter word that is set to uppercase by CSS will be read as an acronym instead of as a word. When using this styling approach, it is helpful to apply an aria-label attribute to the HTML element with how the content should be read.

      Now that the text is all uppercase, visually the text feels a little bunched together for the aesthetic of the design. Next, use the letter-spacing property to add 0.125em spacing between each character. See the highlighted code in the following code block:

      styles.css

      ...
      h3 {
          font-size: 1.5rem; /* 24px */
          margin: 2em 0 0.5em;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 0.125em;
      }
      ...
      

      Using the em unit on a letter-spacing property allows the spacing between characters to be proportional to the font-size. The 0.125em keeps the spacing at one-eighth the height of the font.

      Save your changes to styles.css and reload index.html in your browser to render the changes to the h3 content. See what this will look like in the following image:

      Horizontally centered content in a black rounded sans serif font, all uppercase, with extra space between each characer.

      In this section, you used the text-transform property to change the styles for the <h1> element to capitalize the first letter of each word. You also used the text-transform and letter-spacing properties to change the <h3> element to have all uppercase words with the characters spread apart. In the last section, you will use the font property to condense multiple properties into one.

      Using the font Shorthand

      In this last section, you will use the font property to condense multiple properties into a single property. The font property can be useful when defining several text-related values globally, and placed at a high level in the cascade. Be aware that using the font shorthand will overwrite the individual properties it contains.

      To start, return to your styles.css file in your text editor and go to the body selector. Here the font-family and line-height properties can be condensed into the font shorthand property. However, the font shorthand requires that both a font-size and font-family value are present. This means adding a font-size value in addition to the line-height and font-family values. See the highlighted section of the following code block for how to write this out:

      styles.css

      body {
          font: 1em/1.5 'Public Sans', sans-serif;
      }
      ...
      

      Notice that there is a forward slash (/) between the font-size value of 1em and the line-height value of 1.5. This is the only way to set a line-height value with the font shorthand property, and it must come after the font-size value. The font-size value is set to 1em since that is the least disruptive value and carries over the default font-size of the document regardless of its value. Additionally, the font property shorthand accepts values for the font-stretch, font-style,font-variant, and font-weight properties.

      Be sure to save your changes to styles.css in your text editor. Reload the index.html in your browser and verify there are no visual changes. Since a shorthand property combines existing properties into a single property, there are no changes to the styles.

      You used the font property in this last section of the tutorial to combine several properties into one, condensing the size of your CSS. This property, though very useful, must be used with consideration as it can require redefining properties due to its broad coverage.

      Conclusion

      Readable text layout can mark the difference between an effective and ineffective design. Laying out text is a subjective balance of providing sufficient space between text lines, words, and blocks to present the content in an unobtrusive manner. When working with text, poor layout can prevent readers from understanding the content. With these properties and their uses in mind, you will make well-read content.

      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

      Gestalten von Bildlaufleisten mit CSS


      Einführung

      Im September 2018 definierte W3C CSS Scrollbars Spezifikationen für die Anpassung des Erscheinungsbildes von Bildlaufleisten mit CSS.

      Ab 2020 arbeiten 96 % der Internetbenutzer mit Browsern, die das CSS Scrollbar-Styling unterstützen. Sie müssen jedoch zwei Sätze von CSS-Regeln schreiben, um Blink- und WebKit- sowie auch Firefox-Browser abzudecken.

      In diesem Tutorial lernen Sie, wie Sie CSS verwenden, um Bildlaufleisten zur Unterstützung moderner Browser anzupassen.

      Voraussetzungen

      Um dieser Anleitung folgen zu können, benötigen Sie:

      Gestalten von Bildlaufleisten in Chrome, Edge und Safari

      Derzeit ist die Gestaltung von Bildlaufleisten in Chrome, Edge und Safari mit dem Herstellerpräfix Pseudoelement -webkit scrollbar möglich.

      Hier ist ein Beispiel, das die Pseudoelemente ::-webkit-scrollbar, ::-webkit-scrollbar-track und ::webkit-scrollbar-thumb verwendet:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      Hier ist ein Screenshot der Bildlaufleiste, die mit diesen CSS-Regeln erstellt wird:

      Screenshot einer Beispiel-Webseite mit einer benutzerdefinierten Bildlaufleiste mit einer blauen Bildlaufleiste auf einem orangefarbenen Balken.

      Dieser Code funktioniert in den neuesten Versionen von Chrome, Edge und Safari.

      Leider wurde diese Spezifikation vom W3C formell aufgegeben und wird wahrscheinlich im Laufe der Zeit nicht mehr verwendet werden.

      Gestalten von Bildlaufleisten in Firefox

      Derzeit ist die Gestaltung von Bildlaufleisten für Firefox mit dem neuen CSS Scrollbars möglich.

      Hier ist ein Beispiel, das die Eigenschaften scrollbar-width und scrollbar-color verwendet:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      Hier ist ein Screenshot der Bildlaufleiste, die mit diesen CSS-Regeln erstellt wird:

      Screenshot einer Beispiel-Webseite mit einer benutzerdefinierten Bildlaufleiste mit einer blauen Bildlaufleiste auf einem orangefarbenen Balken.

      Diese Spezifikation hat einige Gemeinsamkeiten mit der Spezifikation -webkit-scrollbar zur Steuerung der Farbe der Bildlaufleiste. Allerdings gibt es derzeit keine Unterstützung zur Änderung der Auffüllung und der Rundung des „Spurbalkens“.

      Erstellen von zukunftssicheren Bildlaufleisten-Stilen

      Sie können Ihr CSS in einer Weise schreiben, um sowohl die Spezifikationen -webkit-scrollbar als auch CSS Scrollbars zu unterstützen.

      Hier ist ein Beispiel, das scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb verwendet:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Blink- und WebKit-Browser ignorieren Regeln, die sie nicht erkennen und wenden -webkit-scrollbar-Regeln an. Firefox-Browser ignorieren Regeln, die sie nicht erkennen und wenden CSS Scrollbars-Regeln an. Sobald Blink- und WebKit-Browser die Spezifikationen -webkit-scrollbar vollständig aufgeben, werden sie auf die neue Spezifikation CSS Scrollbars zurückgreifen.

      Zusammenfassung

      In diesem Artikel haben Sie einen Überblick über die Verwendung von CSS zur Gestaltung von Bildlaufleisten erhalten und wie Sie sicherstellen, dass diese Stile in den meisten modernen Browsern erkannt werden.

      Es ist auch möglich, eine Bildlaufleiste zu simulieren, indem die Standard-Bildlaufleiste ausgeblendet und JavaScript verwendet wird, um Höhe und Bildlaufposition zu erkennen. Diese Ansätze stoßen jedoch an ihre Grenzen, wenn es darum geht, Erfahrungen wie Trägheits-Scrolling (z. B. die abklingende Bewegung beim Scrollen über Trackpads) zu reproduzieren.

      Wenn Sie mehr über CSS erfahren möchten, lesen Sie unsere Themenseite zu CSS für Übungen und Programmierprojekte.



      Source link