One place for hosting & domains

      Values

      How To Declare Values For Multiple Properties In a CSS Rule



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will learn how to declare values for multiple properties in a CSS rule. Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all at once. We’ll also explore creating a variety of CSS rules that allow us to apply different styles to different pieces of content in a single HTML document.

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Creating a CSS Rule With Multiple Declarations

      To add more than one declaration to a CSS rule, try modifying your <h1> rule in your styles.css file (or adding the entire code snippet if you haven’t been following the tutorial series) so that it includes the additional highlighted declarations:

      h1 {
        color: blue;
        font-size: 100px;
        font-family: Courier;
        text-align: center;
      }
      

      Save the file and reload your HTML document in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser). Your text should now be located in the center of the page, have a size of 100 pixels, and render with the Courier font:

      Styled header text

      In the next section, we’ll add more CSS rules to extend the styling possibilities for the webpage’s content.

      Creating Multiple CSS Rules To Style HTML Content

      In this section we’ll add some more text to the index.html file using an HTML <p> element. We’ll experiment with modifying its properties using a new CSS ruleset that only applies to <p> tags.

      In the index.html file, add a line containing <p>Some paragraph text</p> below the existing <h1>A sample title<h1> line that you added in the How To Understand and Create CSS Rules tutorial:

      index.html

      <h1>A sample title</h1>
      <p>Some paragraph text</p>
      

      Save the index.html file and reload it in the browser window to check how the file is displayed. Your browser should render a blue heading that says “A sample title” and an unstyled paragraph below it that says “Some paragraph text” like the following example:

      Webpage output with a blue `<h1>` heading and an unstyled `<p>` element

      Next, let’s add a CSS rule to style the <p> element. Return to your styles.css file and add the following ruleset at the bottom of the file:

      styles.css

      . . .
      p {
        color: green;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
      

      Save the file and reload it in the browser window to check how the file is displayed. Your <p> text should now have the style you declared in the CSS rule you just created:

      Webpage output with styled `<p>` text

      Now that you have CSS rules for the <h1> and <p> elements, any text you mark up with these tags in your HTML document will take on the style rules that you declared for these elements in your styles.css file.

      Further Practice

      If you want to continue experimenting with CSS rules, try creating CSS rulesets for different HTML text elements—such as <h2>, <h3>, and <h4>—and using them to modify text in your index.html file. If you’re stuck, you can copy the CSS rules in the following example and add them to your styles.css file:

      styles.css

      . . .
      h2 {
        color: red;
        font-size: 40px;
      }
      
      h3 {
        color: purple;
        font-size: 50px;
      }
      
      h4 {
        color: green;
        font-size: 60px;
      }
      

      Save your file and then add the following HTML content to your index.html file:

      index.html

      <h2> This is red text with a size of 40 pixels. </h2>
      <h3> This is purple text with a size of 50 pixels. </h3>
      <h4> This is green text with a size 60 pixels. </h4>
      

      Save the file and load index.html in your browser. You should receive the following results:

      Webpage content styled with multiple CSS rules

      Conclusion

      In this tutorial you experimented with specifying values for multiple properties using CSS. You also created multiple CSS rules for styling text content in an HTML document. You will expand upon both these skills when you begin building the demonstration website later on in the tutorial series. In the next tutorial, you will begin exploring how to style images with CSS.



      Source link

      CSS Hex Code Colors with Alpha Values


      In CSS, there are several formats for colors that can be used. Common ones include RGB, RGBA, hex codes, and HSL. Here we’ll review hex (hexadecimal) color codes and specifically look at changing the transparency of the color by introducing an alpha value too.

      What Is a Hexadecimal Number?

      Before we get to the CSS-specific tips, let’s first review what a hexadecimal value means.

      The word “hexadecimal” refers to a numerical value that uses 16 as a base instead of 10. Using a base of 10 is what most people are used to; after 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 comes 10. In others words, a single digit only has 10 possible values (0 to 9), and after that it must increase to two digits (10).

      A hexadecimal value can have 16 values for each digit in a number:

      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
      

      In effect, it means numbers with multiple digits have many more possible combinations. A two digit value in base 10 can have 100 possible combinations (00, 01, 02… 66, 67, 68… 98, 99).

      However, using a two-digit hexadecimal value has many more possible combinations. Since each digit can have 16 possible values, the total possible combinations for a two-digit number is 16 x 16 or 256 possible values.

      For example, these are all valid hexadecimal values:

      00, 01, 1D, 9D, F5, 99, E4, CC
      

      We’ll leave it at that for the math portion. Let’s move on to the CSS.

      Using Hexadecimal Values in CSS

      When styling an element in CSS, we’ll often need to update the colors related to it. That could include font color, background-color, border-color, etc.

      To create custom colors, we can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

      CSS hex codes are not case-sensitive, so you can use upper- or lowercase values. Often there will be a preference in a codebase for consistency.

      But First, Named Colors in CSS

      The simplest way to set the color is to just use named colors. Named colors in CSS are valid color names that can be used directly in your CSS styles. For example, if we wanted our header text to be red, we could literally just write red like so:

      h1 {
          color: red;
      }
      

      There are about 140 named colors in CSS (like red, blue, lavender, etc.) that can be used to avoid figuring out things like the hex codes.

      So, why use hex codes? Simply, there are many more options if you want to really customize your app’s color palette! Plus, you can change the transparency more easily.

      Hex (Hexadecimal) Codes in CSS with No Alpha Value

      The format of the CSS hex code is #RRGGBB. The letters refer to red (RR), green (GG), and blue (BB) so you can think of the 6-character value as being three two-digit hexadecimal numbers; one for each of the three colors.

      Don’t forget: in CSS, you need to use the pound/hash symbol (#) before your hex code for it to be valid.

      Now that we know our format (#RRGGBB), let’s look at some examples of CSS colors in their hexadecimal format.

      Each color you pick will be a combination of a red, green, and blue value. The lowest value (00) will be the darkest version of the color (closest to black), and the highest value (FF) will be closest to white. If we want to only have one of those colors represented in our hex code, we can set the other ones to the lowest value (00).

      Let’s say we wanted the brightest red with no green or blue in it. We can set our red (RR) value to the highest possible value (FF). Since we don’t want any green or blue in it, we can set the green (GG) and blue (BB) values each to 00 (the lowest value).

      h1 {
          color: #FF0000; // bright red
      }
      

      This will look like:

      Since hexadecimal numbers are in base 16, the lowest value for a two-digit number is 00 and highest value is FF. The lowest value will have the most black in it.

      Similarly, we could say we want no color, which in this case would make the color black.

      h1 {
          color: #000000; // black
      }
      

      If we put all the colors at their highest value, we get white.

      h1 {
          color: #FFFFFF; // white
      }
      

      From there, any other combination will give you an entire spectrum of color options.

      Don’t worry about learning how to pick the hexadecimal values yourself. There are tons of resources for picking colors that will do the hexadecimal conversion for you!

      Adding an Alpha Value to Your Hex Codes

      Now that we know what hex codes are, let’s look at changing the transparency of our colors.

      Let’s say we want a blue color that is fairly transparent. We can first select our color of blue:

      h1 {
          color: #0080FF; // cornflower blue
      }
      

      This color will look like this:

      Now, let’s say we want our text to be semi-transparent, we can change the transparency by adding two more numbers to our hexadecimal value (also known as the alpha value).

      h1 {
          color: #0080FF80; // transparent blue
      }
      

      Now our color will look like this:

      Wait, what?

      So, what’s going on here? Let’s break it down.

      Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (red, green, blue, alpha). The first six values (the red, green, and blue ones) stay the exact same. The only difference is the last two values (the AA).

      The AA value in #RRGGBBAA can range from the lowest value possible (00) to the highest value possible (FF). The lowest will make the color fully transparent, which means you won’t see it anymore. The highest value will make it completely opaque, which is the default for hex codes anyway.

      Partially transparent: #0634a477

      Fully Opaque: #0634a4ff

      The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency too! No color format changes required.

      Comparing Hex Code+Alpha Format to RGBA

      If you’ve had to set the transparency of a color before, you may know there are a few different options. The RGBA color format, for example, is one option instead of hex codes with an alpha value. The RGBA format looks like this:

      h1 {
          color: rgba(256, 0, 0, 0.5); // transparent red
      }
      

      Each color value (red, green, blue) in the RGBA (Red, Green, Blue, Alpha) format can range from 0 to 256. Unlike hex codes, though, only base 10 numbers are valid (0, 1, 2…255, 256). For the alpha value, any number from 0 to 1 is valid. Think of it as a transparency percentage: 0.5 is 50% transparent, 0.75 is 75% transparent, etc. The closer the number is to 1, the more opaque the color will be.

      If number 256 looks familiar here, remember there are 256 valid values for each two-digit hexadecimal number (16 x 16). The RGBA format also accepts 256 valid numbers (plus 0) for each of the red, green, and blue values. That makes hex codes and RGB/RGBA values easily convertible!

      Color formats can already be confusing enough before adding the alpha value too. One quick tip for seeing your colors in different formats is with the Chrome DevTools.

      Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to play around with it directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

      using the Chrome DevTools to play with CSS colors

      (The example above is inspecting a Google search result page.)

      CSS Color Resources

      Here’s a great tool for converting colors to all the different formats. If you’re curious what the hex codes for CSS named colors are, check them out here.

      Browser Compatibility

      The browser support for #RRGGBBAA hex codes is great. IE doesn’t support it but otherwise you should be covered. Check Can I Use for details if you’re curious.



      Source link