CSS

!important

!important can be applied to specific declarations, instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used. Once !important is used, it is very hard to override.

shorthand padding

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).

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. 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.

transparent

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;

alpha

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. 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 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).

min and max width and height

Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element's box can be sized to: - 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. Content, like text, can become difficult to read when a browser window is narrowed or expanded. These two properties ensure that content is legible by limiting the minimum and maximum widths of an element. You can also limit the minimum and maximum height of an element: - min-height — this property ensures a minimum height for an element's box. - max-height — this property ensures a maximum height of an element's box.

background-image

CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property background-image. Its syntax looks like this: .main-banner { background-image: url('https://www.example.com/image.jpg'); } 1. The background-image property will set the element's background to display an image. 2. The value provided to background-image is a url. The url should be a URL to an image. The url can be a file within your project, or it can be a link to an external site. To link to an image inside an existing project, you must provide a relative file path.

visibility

Elements can be hidden from view with the visibility property. The visibility property can be set to one of the following values: - hidden — hides an element. - visible — displays an element. - collapse — collapses an element. If set to hidden, 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.

display

Every HTML element has a default display value that dictates if it can share horizontal space with other elements. Some elements fill the entire browser from left to right regardless of the size of their content. Other elements only take up as much horizontal space as their content requires and can be directly next to other elements.

<style>

HTML allows you to write CSS code in its own dedicated section with a <style> element nested inside of the <head> element. The CSS code inside the <style> element is often referred to as an internal stylesheet. To create an internal stylesheet, a <style> element must be placed inside of the <head> element. After adding opening and closing <style> tags in the head section, you can begin writing CSS code.

float

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. 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. This works for static and relative positioned elements. Floated elements must have a width specified. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.

box-sizing

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. We can also reset the entire box model and specify a new one: border-box. * { box-sizing: border-box; } 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.

font-weight

In CSS, the font-weight property controls how bold or thin text appears: 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 can also be used, ranging 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.

descendant combinator

In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements, also known as descendants. For instance, consider the following HTML: <ul class='main-list'> <li> ... </li> <li> ... </li> <li> ... </li> </ul> The nested <li> elements are descendants of the <ul> element and can be selected with the descendant combinator like so: .main-list li { } In the example above, .main-list selects the element with the .main-list class (the <ul> element). The descendant <li>'s are selected by adding li to the selector, separated by a space. This results in .main-list li as the final selector.

multiple selectors

In order to make CSS more concise, it's possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. We can separate the selectors by a comma to apply the same style to both, like this: h1, .menu { font-family: Georgia; } By separating the CSS selectors with a comma, both the <h1> elements and the elements with the menu class will receive the font-family: Georgia styling.

display: 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. This value 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.

display: 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.

margin collapse

One difference between margins and padding 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. Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.

hexadecimal

One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors. A hex color begins with a hash character (#) which is followed by three or six characters. The characters represent values for red, blue and green. There are both letters and numbers in hex color values. This is because the hexadecimal number system has 16 digits (0-15) instead of 10 (0-9) like in the standard decimal system. To represent 10-15, we use A-F. Some colors can be represented with both three characters and six characters. This can be done with hex colors whose number pairs are the same characters. For example, aqua (#00FFFF) can be represented as #0FF because both of the first two characters are 0 and the second and third pairs of characters are both Fs. Keep in mind that all three character hex colors can be represented with six characters (by repeating each character twice) but the same is not true in reverse.

opacity

Opacity is the measure of how transparent an element is. It's measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. Opacity can be used to make elements fade into others for a nice overlay effect.

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.

text-transform

Text can also be styled to appear in either all uppercase or lowercase with the text-transform property. h1 { text-transform: uppercase; } The code in the example above formats all <h1> elements to appear in uppercase, regardless of the case used for the heading within the HTML code. Alternatively, the lowercase value could be used to format text in all lowercase.

margin

The amount of space between the border and the outside edge of the element. Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space. 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.

padding

The amount of space between the content area and the border. Padding is like the space between a picture and the frame surrounding it. 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

attribute selector

The attribute selector can be used to target HTML elements that already contain attributes. Elements of the same type can be targeted differently by their attribute or attribute value. This alleviates the need to add new code, like the class or id attributes. Attributes can be selected similarly to types, classes, and IDs. The most basic syntax is an attribute surrounded by square brackets. And it can get more granular from there by adding type and/or attribute values. One way is by using type[attribute*=value]. In short, this code selects an element where the attribute contains any instance of the specified value.

position

The default position of an element can be changed by setting its position property. The position property can take one of five values: - static - the default value (it does not need to be specified) - relative - absolute - fixed - sticky It's important to understand that if you favor the default position of an HTML element, you don't need to set its position property.

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.

auto

The margin property also lets you center content: div.headline { width: 400px; margin: 0 auto; } 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.

overflow

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.

margin shorthand

The shorthand syntax for margins is the same as padding.

position: sticky

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 (z-index).

HSL

The syntax for HSL is similar to the decimal form of RGB, though it differs in important ways. The first number represents the degree of the hue, and can be between 0 and 360. The second and third numbers are percentages representing saturation and lightness respectively. Here is an example: color: hsl(120, 60%, 70%); 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.

border

The thickness and style of the border surrounding the content area and padding. 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. p { border: 3px solid coral; } 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.

type selector

The type selector matches the type of the element in the HTML document. Some important notes on the type selector: - The type selector does not include the angle brackets. - Since element types are often referred to by their opening tag name, the type selector is sometimes referred to as the tag name or element selector.

universal selector

The universal selector selects all elements of any type. Targeting all of the elements on the page has a few specific use cases, such as resetting default browser styling, or selecting all children of a parent element. The universal selector uses the * character in the same place where you specified the type selector in a ruleset.

width and height

The width and height of the content area.

z-index

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. The z-index property does NOT work on static elements.

RGB

There is another syntax for representing RGB values, commonly referred to as "RGB value" or just "RGB", that uses decimal numbers rather than hexadecimal numbers, and it looks like this: h1 { color: rgb(23, 45, 23); } Each of the three values represents a color component, and each can have a decimal number value from 0 to 255. The first number represents the amount of red, the second is green, and the third is blue. These colors are exactly the same as hex, but with a different syntax and a different number system.

background-color

This property styles an element's background color

color

This property styles an element's foreground color

position: relative

This value allows you to position an element relative to its default static position on the web page. Although this instructs the browser to expect a relative positioning of an element, it also needs to specify where exactly that element should be positioned relative to on the 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.

text-align

To align text we can use the text-align property. The text-align property will align text to the element that holds it, otherwise known as its parent. The text-align property can be set to one of the following commonly used values: - left — aligns text to the left side of its parent element, which in this case is the browser. - center — centers text inside of its parent element. - right — aligns text to the right side of its parent element. - justify— spaces out text in order to align with the right and left side of the parent element.

font-size

To change the size of text on your web page, you can use the font-size property.

font-family

To change the typeface of text on your web page, you can use the font-family property. When setting typefaces on a web page, keep the following points in mind: - The font specified must be installed on the user's computer or downloaded with the site. - Web safe fonts are a group of fonts supported across most browsers and operating systems. - Unless you are using web safe fonts, the font you choose may not appear the same between all browsers and operating systems. - When the name of a typeface consists of more than one word, it's a best practice to enclose the typeface's name in quotes.

id

To select an element's ID with CSS, we prepend the id name with a number sign (#). While classes are meant to be used many times, an ID is meant to style only one element. IDs override the styles of types and classes. Since IDs override these styles, they should be used sparingly and only on elements that need to always appear the same.

style

To style an HTML element, you can add the style attribute directly to the opening tag. After you add the attribute, you can set it equal to the CSS style(s) you'd like applied to that element. If you'd like to add more than one style with inline styles, simply keep adding to the style attribute. Make sure to end the styles with a semicolon (;).

position: fixed

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.

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. 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.

position: 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.

clear

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.

class

When working with HTML and CSS a class attribute is one of the most common ways to select an element. To select an HTML element by its class using CSS, a period (.) must be prepended to the class's name. It's also possible to add more than one class name to an HTML element's class attribute. We can add multiple classes to an HTML element's class attribute by separating them with a space. This enables us to mix and match CSS classes to create many unique styles without writing a custom class for every style combination needed. CSS classes are meant to be reused over many elements. By writing CSS classes, you can style elements in a variety of ways by mixing classes.

chaining

When writing CSS rules, it's possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors, which we will refer to as chaining. For instance, if there was a special class for <h1> elements, the CSS would look like below: h1.special { } The code above would select only the <h1> elements with a class of special. If a <p> element also had a class of special, the rule in the example would not style the paragraph.

font stack and fallback fonts

When you specify a group of fonts, you have what is known as a font stack. A font stack usually contains a list of similar-looking fonts. h1 { font-family: Caslon, Georgia, 'Times New Roman'; } In the example above, Georgia and Times New Roman are fallback fonts to Caslon. Web safe fonts are good fallback fonts that can be used if your preferred font is not available. Here, the browser will first try to use the Caslon font. If that's not available, it will try to use a similar font, Georgia. And if Georgia is not available, it will try to use Times New Roman.

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.

border-radius

You can modify the corners of an element's border box with the border-radius property. div.container { border: 3px solid blue; border-radius: 5px; } 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%. div.container { height: 60px; width: 60px; border: 3px solid blue; border-radius: 50%; } The code in the example above creates a <div> that is a perfect circle.

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. For word spacing, using em values are recommended because the spacing can be set based on the size of the font.

<link>

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: 1. href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file. 2. 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.

pseudo-classes

You may have observed how the appearance of certain elements can change, or be in a different state, after certain user interactions. For instance: - When you click on an <input> element, and a blue border is added showing that it is in focus. - When you click on a blue <a> link to visit to another page, but when you return the link's text is purple. - When you're filling out a form and the submit button is grayed out and disabled. But when all of the fields have been filled out, the button has color showing that it's active. These are all examples of pseudo-class selectors in action! In fact, :focus, :visited, :disabled, and :active are all pseudo-classes. Factors such as user interaction, site navigation, and position in the DOM can all give elements a different state with pseudo-class. A pseudo-class can be attached to any selector. It is always written as a colon : followed by a name.