curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md
Here is the general syntax of a CSS rule:
selector {
property: value;
}
meta name="viewport" Element: This meta element gives the browser instructions on how to control the page's dimensions and scaling on different devices, particularly on mobile phones and tablets.style attribute. Most of the time you will not be using inline CSS due to separation of concerns.Here is an example of inline CSS:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p style="color: red;">This is a red paragraph.</p>
:::
<style> tags inside the head section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.link element in the head section. For most projects, you will use an external CSS file over internal or inline CSS.width and height Propertieswidth Property: This property specifies the width of an element. If you do not specify a width, then the default is set to auto. This lets the browser determine the element's width based on its content, parent, and display type.min-width Property: This property specifies the minimum width for an element.max-width Property: This property specifies the maximum width for an element.height Property: This property specifies the height of an element. Similarly, the height is auto by default, which means it will adjust to the content inside.min-height Property: This property specifies the minimum height for an element.max-height Property: This property specifies the maximum height for an element.li items inside ul elements.:::interactive_editor
<link rel="stylesheet" href="styles.css">
<ul>
<li>Example item one</li>
<li>Example item two</li>
<li>Example item three</li>
</ul>
ul li {
background-color: yellow;
}
:::
>): This combinator is used to select elements that are direct children of a specified parent element. The following example will target all p elements that are direct children of the container class.:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="container">
<p>This will get styled.</p>
<div>
<p>This will not get styled.</p>
</div>
</div>
.container > p {
background-color: black;
color: white;
}
:::
+): This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the h2 element.:::interactive_editor
<link rel="stylesheet" href="styles.css">
<h2>I am a sub heading</h2>
<p>This paragraph element will get a red background.</p>
h2 + p {
background-color: red;
}
:::
~): This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the ul element and shares the same parent.:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="container">
<p>This will not get styled.</p>
<ul>
<li>Example item one</li>
<li>Example item two</li>
<li>Example item three</li>
</ul>
<p>This will get styled.</p>
</div>
<p>This will not get styled.</p>
ul ~ p {
background-color: green;
}
:::
span, anchor, and img elements.div, paragraph, and section elements.inline-block by using the display property. These elements behave like inline elements but can have a width and height set like block-level elements.margin Property: This property is used to apply space outside the element, between the element's border and the surrounding elements.padding Property: This property is used to apply space inside the element, between the content and its border.margin Shorthand: You can specify 1–4 values to set the margin sides. One value applies to all four sides; two values set top and bottom, then right and left; three values set top, horizontal (right and left), then bottom; four values set top, right, bottom, left.padding Shorthand: You can specify 1–4 values to set the padding sides. One value applies to all four sides; two values set top and bottom, then right and left; three values set top, horizontal (right and left), then bottom; four values set top, right, bottom, left.style element in the head section of the HTML document. It has lower specificity than inline styles. Both internal and external CSS share the same specificity level, which is determined by their selectors, not their location.link element in the head section and is written in separate .css files. Like internal CSS, its specificity is determined by the selectors used. When two rules have equal specificity, source order determines the winner — the rule that appears later in the document takes precedence. External CSS provides the best maintainability for larger projects.*): a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0)..) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).!important keyword: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using !important because it can make your CSS harder to maintain and debug.Review the CSS Fundamentals topics and concepts.