CSS

Inline style tags

<em> <strong> <a> The default display for some elements, such as <em>, <strong>, and <a>, is called inline. Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element. The height and width of these elements cannot be specified in the CSS document. For example, the text of an anchor tag (<a>) will, by default, be displayed on the same line as the surrounding text, and it will only be as wide as necessary to contain its content. inline elements cannot be altered in size with the height or width CSS properties. List of inline elements found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

How does this CSS rule set affect <h1> elements?

<h1> elements will have 20 pixels of space between every letter.

shorthand property

A declaration that uses multiple properties as values is known as a shorthand property. Padding shorthand lets you specify all of the padding properties as values on a single line: padding-top padding-right padding-bottom padding-left You can specify these properties in a few different ways: 4 Values p.content-header { padding: 6px 11px 4px 9px;} In the example above, the four values 6px 11px 4px 9px correspond to the amount of padding on each side, in a clockwise rotation. In order, it specifies the padding-top value (6px), the padding-right value (11px), the padding-bottom value (4px), and the padding-left value (9px) of the content. 3 Values p.content-header { padding: 5px 10px 20px;} If the left and right sides of the content can be equal, the padding shorthand property allows for 3 values to be specified. The first value sets the padding-top value (5px), the second value sets the padding-left and padding-right values (10px), and the third value sets the padding-bottom value (20px). 2 Values p.content-header { padding: 5px 10px;} And finally, if the top and bottom sides can be equal, and the left and right sides can be equal, you can specify 2 values. The first value sets the padding-top and padding-bottom values (5px), and the second value sets the padding-left and padding-right values (10px).

box-sizing content-box; border-box use case

Adding padding and border- changing the size and pattern of the border but will not change the size of the content. the default display mode for every element box sizing property to content box. it calculates the size of the elements boxes by determining the width and height of the content first. if we need to add padding or border however wide or high this property size it than gets added to the width and height of the content. Sometimes the box and the appearance of the HTML element is wider or higher than the programmer intended it to be. Because the width and height here only means the width and height of the stuff inside of the html element which is just one part of the box and not the total sum of all the parts of the box. by width and height I mean the CSS code the programmer set it to. There are two solutions to this 1. Figure out the values to make the padding border and width of the content that would make the box sit inside the parent element. 2. OR :) Use the border-box Try to do so here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing as long as it has box sizing property content box.

Resetting Defaults

All major web browsers have a default stylesheet they use in the absence of an external stylesheet. These default stylesheets are known as user agent stylesheets. In this case, the term user agent is a technical term for the browser. User agent stylesheets often have default CSS rules that set default values for padding and margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page. Many developers choose to reset these default values so that they can truly work with a clean slate. * { margin: 0; padding: 0;} The code in the example above resets the default margin and padding values of all HTML elements. It is often the first CSS rule in an external stylesheet. Note that both properties are set to 0. When these properties are set to 0, they do not require a unit of measurement.

absolute

Another way of modifying the position of an element is by setting its position to absolute. When an element's position is set to absolute, all other elements on the page will ignore the element and act like it is not present on the page. The element will be positioned relative to its closest positioned parent element, while offset properties can be used to determine the final position from there. Take a look at the image below: The "This website is in progress. Please come back later!" text is displaced from its static position at the top left corner of its parent container. It has offset property declarations of top: 300px; and right: 0px;, positioning it 300 pixels down, and 0 pixels from the right side of the page.

opacity

CSS can make an element transparent with the opacity property.

CSS Lesson Review 2

CSS can select HTML elements by type, class, ID, and attribute. All elements can be selected using the universal selector. An element can have different states using the pseudo-class selector. Multiple CSS classes can be applied to one HTML element. Classes can be reusable, while IDs can only be used once. IDs are more specific than classes, and classes are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector. Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary. Nested elements can be selected by separating selectors with a space. Multiple unrelated selectors can receive the same styles by separating the selector names with commas.

Which of the following positioning values will remove an element from the flow of the HTML document?

Correct! fixed elements will be fixed to a specific location on the screen.

The following CSS code fails to set the typeface of the heading to Courier new. Why?

Courier New must be enclosed in double quotation marks since it contains a space.

DOM

Document Object Model-> Is the browsers interpretation of the source code. The source code is what the website truly is. When we change the webiste in dev tools we are changing the DOM not the source code.

Border Radius

Ever since we revealed the borders of boxes, you may have noticed that the borders highlight the true shape of an element's box: square. Thanks to CSS, a border doesn't have to be square. You can modify the corners of an element's border box with the border-radius property. The code in the example above will set all four corners of the border to a radius of 5 pixels (i.e. the same curvature that a circle with a radius of 5 pixels would have). You can create a border that is a perfect circle by first creating an element with the same width and height, and then setting the radius equal to half the width of the box, which is 50%. The code in the example above creates a <div> that is a perfect circle.

color background-color

Foreground vs Background Before discussing the specifics of color, it's important to make two distinctions about color. Color can affect the following design aspects: The foreground color The background color Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled. Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled In CSS, these two design aspects can be styled with the following two properties: color - this property styles an element's foreground color. background-color - this property styles an element's background color. h1 { color: red; background-color: blue;} In the example above, the text of the heading will appear in red, and the background of the heading will appear blue.

Box Model: Border-Box

Fortunately, we can reset the entire box model and specify a new one: border-box. * { box-sizing: border-box;} The code in the example above resets the box model to border-box for all HTML elements. This new box model avoids the dimensional issues that exist in the former box model you learned about. In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change. <h1>Hello World</h1> * { box-sizing: border-box;} h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px;} In the example above, the height of the box would remain at 200 pixels and the width would remain at 300 pixels. The border thickness and padding would remain entirely inside of the box.

Why might a user see the Times font with this CSS rule?

Garmound was unviable but times new roman was available.

CSS technique with Google Dev Tools

Go into the dev tools, than go into the HTML in the elements tab. Select the html tag. click the plus button to create a new element ruleset. use *{border: red 1px solid} this will create red squares on the page so you can see the layout.

Height and Width calculation

Height = content height + padding-top + padding-bottom + border-top + border-bottom. Observe that margin is missing from this formula. That is because margin generates space around the outside of an HTML elements box and not inside of if. margin has no effect on how big or small an html elements box is. it will change how near or far other html boxes around it are.

Horizontol Margins VS Vertical

Horizontal margins (left and right), like padding, are always displayed and added together. For example, if two divs with ids #div-one and #div-two, are next to each other, they will be as far apart as the sum of their adjacent margins. In this example, (pictured in the image section) the space between the #img-one and #img-two borders is 40 pixels. The right margin of #img-one (20px) and the left margin of #img-two (20px) add to make a total margin of 40 pixels. Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements. It may be helpful to think of collapsing vertical margins as a short person trying to push a taller person. The tall person has longer arms and can easily push the short person, while the person with short arms cannot reach the person with long arms.

what does z-index control

How far 'back' or forward overlapping elements appear on a page

Hue, Saturation, and Lightness HSL Hue-Saturation-Lightness Color Scheme

Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at 360. Saturation refers to the intensity or purity of the color. The saturation increases towards 100% as the color becomes richer. The saturation decreases towards 0% as the color becomes grayer. Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black. HSL is convenient for adjusting colors. In RGB, making the color a little darker may affect all three color components. In HSL, that's as easy as changing the lightness value. HSL is also useful for making a set of colors that work well together by selecting various colors that have the same lightness and saturation but different hues.

Font Weight

In CSS, the font-weight property controls how bold or thin text appears. It can be specified with keywords or numerical values. Keyword Values The font-weight property can take any one of these keyword values: bold: Bold font weight. normal: Normal font weight. This is the default value. lighter: One font weight lighter than the element's parent value. bolder: One font weight bolder than the element's parent value Numerical Values Numerical values can range from 1 (lightest) to 1000 (boldest), but it is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold. .left-section { font-weight: 700;} .right-section { font-weight: bold; } In the example above, text in elements of both .left-section and .right-section classes will appear bold. It's important to note that not all fonts can be assigned a numeric font weight, and not all numeric font weights are available to all fonts. It's a good practice to look up the font you are using to see which font-weight values are available.

Why is it important to include web-safe, fallback fonts?

In the case that your custom fonts don't render, web-safe fonts provide a secondary option.

Review: Changing the Box Model

In the default box model, box dimensions are affected by border thickness and padding. The box-sizing property controls the box model used by the browser. The default value of the box-sizing property is content-box. The value for the new box model is border-box. The border-box model is not affected by border thickness or padding.

CSS Lesson Review 3

Incredible work! You used CSS to alter text and images on a website. Throughout this lesson, you learned concepts including: CSS can also set the background of an element to an image with the background-image property. The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.

What does the following line of HTML code do?

Links a font file and allows you to use the Lato font for font-family in CSS style rules?

Changing the Box Model

Many properties in CSS have a default value and don't have to be explicitly set in the stylesheet. For example, the default font-weight of text is normal, but this property-value pair is not typically specified in a stylesheet. The same can be said about the box model that browsers assume. In CSS, the box-sizing property controls the type of box model the browser should use when interpreting a web page. The default value of this property is content-box. This is the same box model that is affected by border thickness and padding.

margin collapse rule to understand

Margin Collapse As you have seen, padding is space added inside an element's border, while margin is space added outside an element's border. One additional difference is that top and bottom margins, also called vertical margins, collapse, while top and bottom padding does not. Horizontal margins (left and right), like padding, are always displayed and added together. For example, if two divs with ids #div-one and #div-two, are next to each other, they will be as far apart as the sum of their adjacent margins. Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements. #img-one { margin-bottom: 30px;} #img-two { margin-top: 20px;} In this example, the vertical margin between the #img-one and #img-two elements is 30 pixels. Although the sum of the margins is 50 pixels, the margin collapses so the spacing is only dependent on the #img-one bottom margin. It may be helpful to think of collapsing vertical margins as a short person trying to push a taller person. The tall person has longer arms and can easily push the short person, while the person with short arms cannot reach the person with long arms.

margin shorthand

Margin Shorthand What if you don't want equal margins on all four sides of the box and don't have time to separate properties for each side? You're in luck! Margin can be written as a shorthand property as well. The shorthand syntax for margins is the same as padding, so if you're feeling comfortable with that, skip to the instructions. Otherwise, read on to learn how to use margin shorthand! Similar to padding shorthand, margin shorthand lets you specify all of the margin properties as values on a single line: margin-top margin-right margin-bottom margin-left You can specify these properties in a few different ways: 4 Values p { margin: 6px 10px 5px 12px;} In the example above, the four values 6px 10px 5px 12px correspond to the thickness of the margin on each side, in a clockwise rotation. In order, it specifies the margin-top value (6px), the margin-right value (10px), the margin-bottom value (5px), and the margin-left value (12px) of the content. 3 Values p { margin: 5px 12px 4px;} If the left and right sides of the content can be equal, the margin shorthand property allows for 3 values to be specified. The first value sets the margin-top value (5px), the second value sets the margin-left and margin-right values (12px), and the third value sets the margin-bottom value (4px). 2 Values p { margin: 20px 10px;} And finally, if the top and bottom sides can be equal, and the left and right sides can be equal, you can specify 2 values. The first value sets the margin-top and margin-bottom values (20px), and the second value sets the margin-left and margin-right values (10px).

What is one limitation of named CSS colors that hexadecimal and RGB colors do not have?

Named CSS colors are limited to a specific set and cannot represent the full color palette.

position: relative

One way to modify the default position of an element is by setting its position property to relative. If you change the pixel top settings or movement settings you are not changing where it is positioned in the web page. You are only changing where it is being shown on the page. As a result, elements will not slide out of the way when you do this.

relative

One way to modify the default position of an element is by setting its position property to relative. This value allows you to position an element relative to its default static position on the web page. This is done by accompanying the position declaration with one or more of the following offset properties that will move the element away from its default static position: top - moves the element down from the top. bottom - moves the element up from the bottom. left - moves the element away from the left side (to the right). right - moves the element away from the right side (to the left). You can specify values in pixels, ems, or percentages, among others, to dial in exactly how far you need the element to move. It's also important to note that offset properties will not work if the element's position property is the default static. In the example above, the element of green-box class will be moved down 50 pixels, and to the right 120 pixels, from its default static position. The image below displays the new position of the box. Offsetting the relative element will not affect the positioning of other elements.

HSL Color Scheme

Opacity and Alpha All of the colors we've seen so far have been opaque, or non-transparent. When we overlap two opaque elements, nothing from the bottom element shows through the top element. In this exercise, we'll change the opacity, or the amount of transparency, of some colors so that some or all of the bottom elements are visible through a covering element. To use opacity in the HSL color scheme, use hsla instead of hsl, and four values instead of three. For example: color: hsla(34, 100%, 50%, 0.1); The first three values work the same as hsl. The fourth value (which we have not seen before) is the alpha. This last value is sometimes called opacity. Alpha is a decimal number from zero to one. If alpha is zero, the color will be completely transparent. If alpha is one, the color will be opaque. The value for half-transparent would be 0.5. You can think of the alpha value as, "the amount of the background to mix with the foreground". When a color's alpha is below one, any color behind it will be blended in. The blending happens for each pixel; no blurring occurs. The RGB color scheme has a similar syntax for opacity, rgba. Again, the first three values work the same as rgb and the last value is the alpha. Here's an example: color: rgba(234, 45, 98, 0.33); A little unconventional, but still worth mentioning is how hex colors can also have an alpha value. By adding a two-digit hexadecimal value to the end of the six-digit representation (#52BC8280), or a one-digit hexadecimal value to the end of the three-digit representation (#F003), you can change the opacity of a hexadecimal color. Hex opacity ranges from 00 (transparent) to FF (opaque). Alpha can only be used with HSL, RGB, and hex colors; we cannot add the alpha value to name colors like green. There is, however, a named color keyword for zero opacity, transparent. It's equivalent to rgba(0, 0, 0, 0), and it's used like any other color keyword: color: transparent;

CSS Color Section Quiz Questions Question 1: What does the fourth value inside rgba() control?

Opacity, or alpha value.

overflow

Overflow All of the components of the box model comprise an element's size. For example, an image that has the following dimensions is 364 pixels wide and 244 pixels tall. 300 pixels wide 200 pixels tall 10 pixels padding on the left and right 10 pixels padding on the top and bottom 2 pixels border on the left and right 2 pixels border on the top and bottom 20 pixels margin on the left and right 10 pixels margin on the top and bottom The total dimensions (364px by 244px) are calculated by adding all of the vertical dimensions together and all of the horizontal dimensions together. Sometimes, these components result in an element that is larger than the parent's containing area. How can we ensure that we can view all of an element that is larger than its parent's containing area? The overflow property controls what happens to content that spills, or overflows, outside its box. The most commonly used values are: hidden—when set to this value, any content that overflows will be hidden from view. scroll—when set to this value, a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrolling. visible—when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

How will this rule-set affect the .card elements?

Position the .card element 10 pixels lower than its default position. Correct! The combination of position: relative and top: 10px will result in this behavior.

How will this rule set affect the .title-card element?

Remove .title-card from the flow of the document and keep it in the same positiion within the browser window, even if the user scrolls

CSS Section 1 Review

Review Great work so far! By understanding how to incorporate CSS code into your HTML file, as well as learning some of the key terms, you're on your way to creating spectacular websites with HTML and CSS. Let's review what you learned so far: The basic anatomy of CSS syntax written for both inline styles and stylesheets. Some commonly used CSS terms, such as ruleset, selector, and declaration. CSS inline styles can be written inside the opening HTML tag using the style attribute. Inline styles can be used to style HTML, but it is not the best practice. An internal stylesheet is written using the <style> element inside the <head> element of an HTML file. Internal stylesheets can be used to style HTML but are also not best practice. An external stylesheet separates CSS code from HTML, by using the .css file extension. External stylesheets are the best approach when it comes to using HTML and CSS. External stylesheets are linked to HTML using the <link> element. Take this knowledge to the next lesson, where you start learning how to select HTML elements to style!

Review The Box Model

Review In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let's take a minute to review what you learned: The box model comprises a set of properties used to create space around and between HTML elements. The height and width of a content area can be set in pixels or percentages. Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties. Padding is the space between the content area and the border. It can be set in pixels or percent. Margin is the amount of spacing outside of an element's border. Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element. Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin. margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width. The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent's content area. The visibility property can hide or show elements.

CSS Color Review

Review We've completed our extensive tour of the colors in CSS! Let's review the key information we've learned. There are four ways to represent color in CSS: Named colors—there are more than 140 named colors, which you can review here on MDN. Hexadecimal or hex colorsHexadecimal is a number system that has sixteen digits, 0 to 9 followed by "A" to "F".Hex values always begin with # and specify values of red, blue, and green using hexadecimal numbers such as #23F41A.Six-digit hex values with duplicate values for each RGB value can be shorted to three digits. RGBRGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.RGB values range from 0 to 255 and look like this: rgb(7, 210, 50). HSLHSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%). You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage. Great job! Feel empowered to add a bit of color to each of your projects!

Review layout

Review layout Great job! In this lesson, you learned how to control the positioning of elements on a web page. Let's review what you've learned so far: The position property allows you to specify the position of an element. When set to relative, an element's position is relative to its default position on the page. When set to absolute, an element's position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled. When set to fixed, an element's position can be pinned to any part of the web page. The element will remain in view no matter what. When set to sticky, an element can stick to a defined offset position when the user scrolls its parent container. The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements. The display property allows you to control how an element flows vertically and horizontally in a document. inline elements take up as little space as possible, and they cannot have manually adjusted width or height. block elements take up the width of their container and can have manually adjusted heights. inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width. The float property can move elements as far left or as far right as possible on a web page. You can clear an element's left or right side (or both) using the clear property. When combined with an understanding of the box model, positioning can create visually appealing web pages. So far, we've focused on adding content in the form of text to a web page. In the next unit, you'll learn how to add and manipulate images to a web page.

The following HTML code links to what Google Font?

Roboto

Whats the difference between serif and sans-serif fonts?

Serif fonts include details on the ends of letters, whereas sans-serif fonts do not.

margin

So far you've learned about the following components of the box model: content, borders, and padding. The fourth and final component of the box model is margin. Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space. The code in the example above will place 20 pixels of space on the outside of the paragraph's box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph's border. If you want to be even more specific about the amount of margin on each side of a box, you can use the following properties: margin-top margin-right margin-bottom margin-left Each property affects the margin on only one side of the box, providing more flexibility in customization. In the example above, only the right side of the paragraph's box will have a margin of 15 pixels. It's common to see margin values used for a specific side of an element.

float width must be specified.

So far, you've learned how to specify the exact position of an element using offset properties. If you're simply interested in moving an element as far left or as far right as possible in the container, you can use the float property. The float property is commonly used for wrapping text around an image. Note, however, that moving elements left or right for layout purposes is better suited for tools like CSS grid and flexbox, which you'll learn about later on. The float property is often set using one of the values below: left - moves, or floats, elements as far left as possible. right - moves elements as far right as possible. In the example above, we float the .orange-section element to the right. This works for static and relative positioned elements. See the result of the code below: Floated elements must have a width specified, as in the example above. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

Display: Block

Some elements are not displayed in the same line as the content around them. These are called block-level elements. These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content. Elements that are block-level by default include all levels of heading elements (<h1> through <h6>), <p>, <div> and <footer>. For a complete list of block level elements, visit the MDN documentation. https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements In the example above, all <strong> elements will be displayed on their own line, with no content directly on either side of them even though their contents may not fill the width of most computer screens.

How would the following CSS rule set affect paragraph (<p>) elements?

Space will appear between lines of text in the <p> element because the container for each line is 1.5 times its default height.

Normalize app instead of css reset

StackOverflow CopyNinja™ — Today at 4:32 PM My personal opinion is that CSS reset (at least the one you linked) is stupid! It unnecessarily breaks some of the browser default styles which should be left untouched, like lists. CSS Reset demo: https://codepen.io/taneltm/pen/dyoqWzO I would use normalize instead: https://necolas.github.io/normalize.css/

color and background color

Text can have two different color attributes: color and background-color. colordefines the color of the text, while background-color defines the color behind the text.

The Box Model

The Box Model The box model comprises the set of properties that define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's padding, border, and margin. The properties include: width and height: The width and height of the content area. padding: The amount of space between the content area and the border. border: The thickness and style of the border surrounding the content area and padding. margin: The amount of space between the border and the outside edge of the element.

Display Property

The CSS display property provides the ability to make any element an inline element. This includes elements that are not inline by default such as paragraphs, divs, and headings. The CSS in the example above will change the display of all <h1> elements to inline. The browser will render <h1> elements on the same line as other inline elements immediately before or after them (if there are any).

margin

The amount of space between the border and the outside edge of the element.

Selector

The beginning of the ruleset used to target the element that will be styled.

Declaration Block

The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).

Property

The first part of the declaration that signifies what visual characteristic of the element is to be modified.

Clear

The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, elements can "bump" into each other and not allow other elements to properly move to the left or right. The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values: left—the left side of the element will not touch any other element within the same containing element. right—the right side of the element will not touch any other element within the same containing element. both—neither side of the element will touch any other element within the same containing element. none—the element can touch either side.

font-family

The font-family property defines the typeface of an element.

Declaration

The group name for a property and value pair that applies a style to the selected element.

letter-spacing

The letter-spacing property is used to set the horizontal spacing between the individual characters in an element. It's not common to set the spacing between letters, but it can sometimes help the readability of certain fonts or styles. The letter-spacing property takes length values in units, such as 2px or 0.5em. p { letter-spacing: 2px;} In the example above, each character in the paragraph element will be separated by 2 pixels.

Centering things with margin

The margin property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example: div.headline { width: 400px; margin: 0 auto;} see picture In the example above, margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element. In order to center an element, a width must be set for that element. Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>, for example. It's not possible to center an element that takes up the full width of the page, since the width of the page can change due to display and/or browser window size. In the example above, the width of the div is set to 400 pixels, which is less than the width of most screens. This will cause the div to center within a containing element that is greater than 400 pixels wide.

Value

The second part of the declaration that signifies the value of the property.

Padding

The space between the contents of a box and the borders of a box is known as padding. Padding is like the space between a picture and the frame surrounding it. In CSS, you can modify this space with the padding property. content of the paragraph (the text) and the borders, on all four sides. The padding property is often used to expand the background color and make the content look less cramped. If you want to be more specific about the amount of padding on each side of a box's content, you can use the following properties: padding-top padding-right padding-bottom padding-left Each property affects the padding on only one side of the box's content, giving you more flexibility in customization. In the example above, only the bottom side of the paragraph's content will have a padding of 10 pixels. 4 Values p.content-header { padding: 6px 11px 4px 9px;} In the example above, the four values 6px 11px 4px 9px correspond to the amount of padding on each side, in a clockwise rotation. In order, it specifies the padding-top value (6px), the padding-right value (11px), the padding-bottom value (4px), and the padding-left value (9px) of the content. 3 Values p.content-header { padding: 5px 10px 20px;} If the left and right sides of the content can be equal, the padding shorthand property allows for 3 values to be specified. The first value sets the padding-top value (5px), the second value sets the padding-left and padding-right values (10px), and the third value sets the padding-bottom value (20px). 2 Values p.content-header { padding: 5px 10px;} And finally, if the top and bottom sides can be equal, and the left and right sides can be equal, you can specify 2 values. The first value sets the padding-top and padding-bottom values (5px), and the second value sets the padding-left and padding-right values (10px).

Opening Tag

The start of an HTML element. This is the element that will be styled.

Sticky Value

The sticky value is another position value that keeps an element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further. This is done by using the sticky value along with the familiar offset properties, as well as one new one. In the example above, the .box-bottom <div> will remain in its relative position, and scroll as usual. When it reaches 240 pixels from the top, it will stick to that position until it reaches the bottom of its parent container where it will "unstick" and rejoin the flow of the document.

Attribute

The style attribute is used to add CSS inline styles to an HTML element.

Text Alignment

The text-align property, which you may already be familiar with from the CSS Visual Rules lesson, aligns text to its parent element. h1 { text-align: right;} In the example above, the <h1> element is aligned to the right side, instead of the default left.

border

The thickness and style of the border surrounding the content area and padding. A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color: width—The thickness of the border. A border's thickness can be set in pixels or with one of the following keywords: thin, medium, or thick. style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid. color—The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords. In the example above, the border has a width of 3 pixels, a style of solid, and a color of coral. All three properties are set in one line of code. The default border is medium none color, where color is the current color of the element. If width, style, or color are not set in the CSS file, the web browser assigns the default value for that property. In this example, the border style is set to solid and the color is set to coral. The width is not set, so it defaults to medium.

display: inline-block;

The third value for the display property is inline-block. Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties. Images are the best example of default inline-block elements. For example, the <div>s below will be displayed on the same line and with the specified dimensions: There are three rectangular divs that each contain a paragraph of text. The .rectangle <div>s will all appear inline (provided there is enough space from left to right) with a width of 200 pixels and height of 300 pixels, even though the text inside of them may not require 200 pixels by 300 pixels of space. inline styles cannot have their width and height changed. so if you need to change them one way is inline-block. Block styles can have their width and height changed so by adding the block style it makes things adjdustable. Typically when you do this you can change a vertical element like lists into a horizontal list. Which is very visually appealing. However, if you do this and the element you are targeting is still going vertical it is possible that the elements are too wide. Lower their width and try again. Also you want to utilize the expand button or the full screen button and see how it is full screen. If you have the screen as a partial screen you may not have a big enough window.

Visibility

The visibility property can be set to one of the following values: hidden — hides an element. visible — displays an element. collapse — collapses an element. In the example above, the list item with a class of future will be hidden from view in the browser. Keep in mind, however, that users can still view the contents of the list item (e.g., Donate) by viewing the source code in their browser. Furthermore, the web page will only hide the contents of the element. It will still leave an empty space where the element is intended to display. Note: What's the difference between display: none and visibility: hidden? An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.

Line Height

We can use the line-height property to set how tall we want each line containing our text to be. Line height values can be a unitless number, such as 1.2, or a length value, such as 12px, 5% or 2em. p { line-height: 1.4;} In the example above, the height between lines is set to 1.4. Generally, the unitless value is preferred since it is responsive based on the current font size. In other words, if the line-height is specified by a unitless number, changing the font size will automatically readjust the line height.

fixed

When an element's position is set to absolute, as in the last exercise, the element will scroll with the rest of the document when a user scrolls. We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed, and accompanying it with the familiar offset properties top, bottom, left, and right. In the example above, the .title element will remain fixed to its position no matter where the user scrolls on the page, like in the image below: fixed elements are removed from the flow of the page. when removed from the flow of the page the other elements can take up its unused space. This can also cause elements to be hidden once a new element slides over to fill the void left by the fix element. When that happens you can use z-headers to bring them back up. In a nutshell you can affect the element that slides up by making the position realtive and moving the top element and you can also use the z-header to fix these problems. You usually have to shift the page back down. Relatively positioned elements stay in the page flow but can

Z-Index

When boxes on a web page have a combination of different positions, the boxes (and therefore, their content) can overlap with each other, making the content difficult to read or consume. The z-index property controls how far back or how far forward an element should appear on the web page when elements overlap. This can be thought of as the depth of elements, with deeper elements appearing behind shallower elements. The z-index property accepts integer values. Depending on their values, the integers instruct the browser on the order in which elements should be layered on the web page. In the example above, we set the .blue-box position to relative and the z-index to 1. We changed position to relative, because the z-index property does not work on static elements. The z-index of 1 moves the .blue-box element forward, because the z-index value has not been explicitly specified for the .green-box element, which means it has a default z-index value of 0. Take a look at the example image below: It moves the element to the front with priority!

To change the way all elements boxes are calculated use in your stylesheet {box-sizing: border-box;

Width now means content + padding + border

Font-Style

You can also italicize text with the font-style property. h3 { font-style: italic;} The italic value causes text to appear in italics. The font-style property also has a normal value which is the default.

reset style sheet

You can reset the styling and box sizing properties to We can reset the css to whatever we want it to be. We can reset the browser styiling and box http://meyerweb.com/eric/tools/css/reset/

Word Spacing

You can set the space between words with the word-spacing property. It's also not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text. The word-spacing property also takes length values in units, such as 3px or 0.2em. h1 { word-spacing: 0.3em;} In the example above, the word spacing is set to 0.3em. For word spacing, using em values are recommended because the spacing can be set based on the size of the font.

Linking the CSS File

You can use the <link> element to link HTML and CSS files together. The <link> element must be placed within the head of the HTML file. It is a self-closing tag and requires the following attributes: href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file. rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet. When linking the HTML and CSS file togather the link element will look like what is pictured in the picture section of this flashcard. When linking an HTML file and a CSS file together, the <link> element will look like the following: <link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'> Note that in the example above, the path to the stylesheet is a URL: https://www.codecademy.com/stylesheets/style.css Specifying the path to the stylesheet using a URL is one way of linking a stylesheet. If the CSS file is stored in the same directory as your HTML file, then you can specify a relative path instead of a URL, like so: <link href='./style.css' rel='stylesheet'> Using a relative path is very common way of linking a stylesheet.

Text Layout

You've learned how text can be defined by font family, weight, style, and transformations. Now you'll learn about some ways text can be displayed or laid out within the element's container.

CSS Quiz Questions For Display and Positioning Question 1: Which of the following values will position an element in relation to the nearest non-static element?

absolute

How could this code be re-written but guarantee the same appearance in the browser?

body h1 { color: #B4F } Correct! Hex values with doubled digits for each color value can be shortened to three characters.

The following CSS code attempts to set the text color of a paragraph using a named color, but fails to do so. Why?

bold is not a valid color keyword in CSS

Which of the following two CSS properties are used to set an HTML element's foreground color and background color, respectively?

color and background-color

Which of the following CSS properties can be used to set an element's behavior to inline, inline-block, or block?

display Correct! display controls the block level of an element.

Complete the statement: An inline-block element . . .

does not start a new line and can be sized using the hight and width properties. Correct! inline-block elements can flow on the same line, and their dimensions can be set with height and width.

Complete the statement: An inline element . . .

does not start a new line and cannot be sized using the height and width properties.

Removed from the document flow

fixed and absolute positioned elements are removed from the document flow, when a user scrolls, these elements will stay at their specified offset position.

font-size

font-size controls the size of text displayed.

font-weight

font-weight defines how thin or thick text is displayed. The text-align property places text in the left, right, or center of its parent container.

Which rule will make <h1> text uppercase>

h1 {text-transform: uppercase;}

width 100%

if we want a container to have a width that fills its element simply set the width to 100%.

Minimum and Maximum Height and Width

min-width—this property ensures a minimum width of an element's box. max-width—this property ensures a maximum width of an element's box.

padding

padding: The amount of space between the content area and the border.

Complete the statement: A block element . . .

starts a new line and can be sized using the height and width properties.

The z-index will be ignored if an element is set to which of the following position values?

static

Which of the following is the default position value?

static

static

static - the default value (it does not need to be specified)

Block Level Elements

static - the default value (it does not need to be specified) relative absolute fixed sticky

The following CSS code attempts to set the color of a paragraph using an HSL color, but fails to do so. Why?

the saturation and lightness value must be positive percentages.

The following CSS code attempts to set the color of a paragraph using an RGB color, but fails to do so. Why?

the three parameters of the rgb() property must be numbers between 0 and 255.

width

width and height: The width and height of the content area. An element's content has two dimensions: a height and a width. By default, the dimensions of an HTML box are set to hold the raw contents of the box. The CSS height and width properties can be used to modify these default dimensions. In this example, the height and width of paragraph elements are set to 80 pixels and 240 pixels, respectively — the px in the code above stands for pixels. Pixels allow you to set the exact size of an element's box (width and height). When the width and height of an element are set in pixels, it will be the same size on all devices — an element that fills a laptop screen will overflow a mobile screen.

Calculating the width of the box

width of the box = content width + padding-left + padding-right + border-left + border-right

border width, style, color

width—The thickness of the border. A border's thickness can be set in pixels or with one of the following keywords: thin, medium, or thick. style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid. color—The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.