diff options
Diffstat (limited to 'files/de/learn/css/building_blocks/werten_einheiten/index.html')
| -rw-r--r-- | files/de/learn/css/building_blocks/werten_einheiten/index.html | 394 |
1 files changed, 394 insertions, 0 deletions
diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/werten_einheiten/index.html @@ -0,0 +1,394 @@ +--- +title: Werte und Einheiten in CSS +slug: Learn/CSS/Building_blocks/Werten_Einheiten +tags: + - CSS + - Einheiten + - Farbe + - Lernen + - Werte +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the different types of values and units used in CSS properties.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value">What is a CSS value?</h2> + +<p>In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> or <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. When you see the value <code><color></code> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> reference page.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value"><color></a> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.</p> +</div> + +<p>In the following example we have set the color of our heading using a keyword, and the background using the <code>rgb()</code> function:</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <code><color></code> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, <code>rgb()</code> functions, etc. You can use <em>any</em> available <code><color></code> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> you will see that the browser compatibility section lists different types of color value and support for them.</p> + +<p>Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.</p> + +<h2 id="Numbers_lengths_and_percentages">Numbers, lengths, and percentages</h2> + +<p>There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Data type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td>An <code><integer></code> is a whole number such as <code>1024</code> or <code>-55</code>.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td>A <code><number></code> represents a decimal number — it may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code>, or <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td>A <code><dimension></code> is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code> is an umbrella category that includes the <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, and <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> types<a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>A <code><percentage></code> represents a fraction of some other value, for example <code>50%</code>. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths">Lengths</h3> + +<p>The numeric type you will come across most frequently is <code><length></code>, for example <code>10px</code> (pixels) or <code>30em</code>. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.</p> + +<h4 id="Absolute_length_units">Absolute length units</h4> + +<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else and are generally considered to always be the same size.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Equivalent to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/6th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>Most of these values are more useful when used for print, rather than screen output. For example we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p> + +<h4 id="Relative_length_units">Relative length units</h4> + +<p>Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Relative to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Font size of the element.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>x-height of the element's font.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>The advance measure (width) of the glyph "0" of the element's font.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Font size of the root element.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Line height of the element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>1% of the viewport's width.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>1% of the viewport's height.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>1% of the viewport's smaller dimension.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1% of the viewport's larger dimension.</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example">Exploring an example</h4> + +<p>In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.</p> + +<p>The second box has a width set in <code>vw</code> (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p> + +<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.</p> + +<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems">ems and rems</h4> + +<p><code>Die relativen Maßeneinheiten, <strong>em</strong></code><strong> </strong>und <strong><code>rem</code></strong><code>,</code>die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p> + +<p>The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of <em>ems</em> and the second a class of <em>rems</em>.</p> + +<p>To start with, we set 16px as the font size on the <code><html></code> element.</p> + +<p><strong>To recap, the em unit means "my parent element's font-size"</strong>. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p> + +<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code><html></code>). This means that each successive level of nesting does not keep getting larger.</p> + +<p>However, if you change the <code><html></code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages">Percentages</h3> + +<p>In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p> + +<p>In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.</p> + +<p>The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!</p> + +<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>The next example has font sizes set in percentages. Each <code><li></code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> then you can use a length or a percentage. If the allowed value only includes <code><length></code>, it is not possible to use a percentage.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p> + +<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p> +</div> + +<h2 id="Color">Color</h2> + +<p>There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.</p> + +<p>The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.</p> +</div> + +<h3 id="Color_keywords">Color keywords</h3> + +<p>Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> value.</p> + +<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p> + +<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3> + +<p>The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so <code>0123456789abcdef</code>. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)</p> + +<p>These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Again, try changing the values to see how the colors vary.</strong></p> + +<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3> + +<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.</p> + +<p>Let's rewrite our last example to use RGB colors:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.</p> +</div> + +<p>In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.</p> +</div> + +<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3> + +<p>Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p> + +<ul> + <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li> + <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li> + <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li> +</ul> + +<p>We can update the RGB example to use HSL colors like this:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!</p> + +<h2 id="Images">Images</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p> + +<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: there are some other possible values for <code><image></code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type if you want to read about them.</p> +</div> + +<h2 id="Position">Position</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.</p> + +<p>A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to <code>center</code>.</p> + +<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Play around with these values to see how you can push the image around.</strong></p> + +<h2 id="Strings_and_identifiers">Strings and identifiers</h2> + +<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code><color></code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p> + +<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions">Functions</h2> + +<p>The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p> + +<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.</p> + +<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use <code>calc()</code> to tell the browser to do it for us.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p> + +<p>The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.</p> + +<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> |