CSS Basics
What is CSS?: Cascading Style Sheets (CSS) is a markup language used to apply styles
to HTML elements. CSS is used for colors, background images, layouts and more.
Basic Anatomy of a CSS Rule: A CSS rule is made up of two main parts: a selector and
a declaration block. A selector is a pattern used in CSS to identify and target specific
HTML elements for styling. A declaration block applies a set of styles for a given selector
or selectors.
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.
Default Browser Styles: Each HTML element will have default browser styles applied to
them. This usually includes items like default margins and paddings.
Inline, Internal, and External CSS
Inline CSS: These styles are written directly within an HTML element using
the 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:
<p style="color: red;">This is a red paragraph.</p>
Internal CSS: These styles are written within the <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.
External CSS: These styles are written in a separate CSS file and linked to the HTML
document using the link element in the head section. For most projects, you will use an
external CSS file over internal or inline CSS.
Working With the width and height Properties
width Property: This property specifies the width of an element. If you do not specify a
width, then the default is set to auto . This means the element will take up the full width of
its parent container.
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.
Different Types of CSS Combinators
Descendant Combinator: This combinator is used to target elements that are
descendants of a specified parent element. The following example will target all li items
inside ul elements.
<ul>
<li>Example item one</li>
<li>Example item two</li>
<li>Example item three</li>
</ul>
ul li {
background-color: yellow;
}
Child Combinator ( > ): 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.
<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;
}
Next-sibling Combinator ( + ): 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.
<h2>I am a sub heading</h2>
<p>This paragraph element will get a red background.</p>
h2 + p {
background-color: red;
}
Subsequent-sibling Combinator ( ~ ): 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.
<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;
}
Inline, Block, and Inline-Block Level Elements
Inline Level Elements: Inline elements only take up as much width as they need and do
not start on a new line. These elements flow within the content, allowing text and other
inline elements to appear alongside them. Common inline elements are span , anchor ,
and img elements.
Block Level Elements: Block-level elements start on a new line and take up the full width
available to them by default, stretching across the width of their container. Some common
block-level elements are div , paragraph , and section elements.
Inline-Block Level Elements: You can set an element to 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 and Padding
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 .
CSS Specificity
Inline CSS Specificity: Inline CSS has the highest specificity because it is applied directly
to the element. It overrides any internal or external CSS. The specificity value for inline
styles is (1, 0, 0, 0).
Internal CSS Specificity: Internal CSS is defined within a style element in
the head section of the HTML document. It has lower specificity than inline styles but can
override external styles.
External CSS Specificity: External CSS is linked via a link element in the head section
and is written in separate .css files. It has the lowest specificity but provides the best
maintainability for larger projects.
Universal Selector ( * ): 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).
Type Selectors: These selectors target elements based on their tag name. Type
selectors have a relatively low specificity compared to other selectors. The specificity
value for a type selector is (0, 0, 0, 1).
Class Selectors: These selectors are defined by a period ( . ) 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.
ID Selectors: ID selectors are defined by a hash symbol ( # ) 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.
Cascade Algorithm: An algorithm used to decide which CSS rules to apply when there
are multiple styles targeting the same element. It ensures that the most appropriate styles
are used, based on a set of well-defined rules.
CSS Inheritance: The process by which styles are passed down from parent elements to
their children. Inheritance allows you to define styles at a higher level in the document tree
and have them apply to multiple elements without explicitly specifying them for each
element.
