CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements
you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)

Combinator selectors (select elements based on a specific

relationship between them)

Pseudo-class selectors (select elements based on a certain

state)

Pseudo-elements selectors (select and style a part of an

element)

Attribute selectors (select elements based on an attribute or

attribute value)

The CSS element Selector

The element selector selects HTML elements based on the
element name.

Example
Here, all <p> elements on the page will be center-aligned, with a
red text color:

p {
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select
a specific element.

The id of an element is unique within a page, so the id selector is

used to select one unique element!

To select an element with a specific id, write a hash (#) character,

followed by the id of the element.

Example
The CSS rule below will be applied to the HTML element with
id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class
attribute.

To select elements with a specific class, write a period (.)

character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red
and center-aligned:
.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be
affected by a class.

Example
In this example only <p> elements with class="center" will be
red and center-aligned:

p.center {
text-align: center;
color: red;
}

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

* {
text-align: center;
color: blue;
}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the
same style definitions.
Look at the following CSS code (the h1, h2, and p elements have
the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example
In this example we have grouped the selectors from the code
above:

h1, h2, p {
text-align: center;
color: red;
}

All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

Block Elements and Objects: Block elements stack vertically, and objects like
images can be styled.

Lists and Tables: Ordered and unordered lists create lists, while tables display
data in rows and columns.

CSS Id and Class: Use id for unique styling and class for reusable styles
across multiple elements.
 Box Model: Composed of content, padding, border, and margin, all of
which can be adjusted to control element spacing and layout.

Working with Block Elements and Objects

Block elements in HTML are elements that always start on a new line
and take up the full width available. Common examples include <div>,
<h1>, <p>, <section>, and <article>. These elements typically stack on
top of each other vertically.
<div>This is a block element</div>

<p>This is another block element</p>

Here both <div> and <p> are block-level elements. They will be stacked
on top of each other, each taking up the entire width of the page.

Objects can refer to elements like images, videos, or embedded content

that have a certain width and height.
Example:

<img src="image.jpg" alt="My Image">

Working with Lists and Tables

Lists

HTML offers two types of lists:

 Ordered lists (<ol>): Items are numbered.
 Unordered lists (<ul>): Items are bullet points.

<ul>

<li>Item 1</li>
 <li>Item 2</li>

<li>Item 3</li>

</ul>

<ol>

<li>First</li>

<li>Second</li>

<li>Third</li>

</ol>

Here, <ul> creates an unordered list with bullet points, and <ol> creates
an ordered list with numbers.
Styling Lists:

Lists can be styled in CSS to customize the bullet points, numbering,

spacing, and alignment.

<ul class="unordered-list">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>
<ol class="ordered-list">

<li>First</li>

<li>Second</li>

<li>Third</li>

</ol>

.unordered-list {

list-style-type: square;

padding-left: 40px;

.ordered-list {

list-style-type: decimal;

color: green;

padding-left: 40px;

list-style-type: square changes bullet points to squares for the

unordered list.
list-style-type: decimal ensures that numbers appear for the
ordered list.
 padding-left: 40px adds space from the left edge of the list.

Tables

Tables are used to display data in a structured format, using rows and
columns.
Example:
<table class="styled-table">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Row 1, Col 1</td>

<td>Row 1, Col 2</td>

</tr>

<tr>

<td>Row 2, Col 1</td>

<td>Row 2, Col 2</td>

</tr>

</table>
Here, the <table> element contains rows (<tr>), and each row contains
table data cells (<td>) or header cells (<th>).

.styled-table {

width: 100%;

border-collapse: collapse;

.styled-table th, .styled-table td {

border: 1px solid black;

padding: 10px;

text-align: center;

.styled-table th {

background-color: navy;

color: white;

border-collapse: collapse merges adjacent cell borders into one.

padding: 10px ensures the content inside the cells has space around it.
text-align: center centers the text in the cells.
3. CSS Id and Class

 Id: The id attribute is used to apply a specific style to one unique

element on the page. Id must be unique and cannot be reused for
another element on the same page.
Example:
<p id="unique">This is a paragraph with an id.</p>

#unique {

color: red;

Class: The class attribute allows multiple elements to share the same
styling by grouping them under the same class name.
Example:
<p class="common">This is a paragraph with a class.</p>

<div class="common">This is a div with the same class.</div>

.common {

color: blue;

Box Model (Introduction, Border Properties, Padding Properties, Margin

Properties)

The CSS box model defines how elements are structured and spaced on
a webpage. Every HTML element is considered a box, which consists of
four parts:
  Content: The text or images inside the element. The content of the box,
where text and images appear
 Padding: The space between the content and the border. The padding is
transparent
 Border: A line surrounding the padding (optional).
 Margin: The space outside the border, separating the element from
neighboring elements.

Box Model Example:

div {

width: 300px;

padding: 20px;

border: 10px solid black;

margin: 30px;

The visual structure would be:

1. Content: Takes up 300px of width.
2. Padding: 20px of space between the content and the border.
3. Border: 10px thick border around the padding.
4. Margin: 30px of space between the border and the next element.

Border Properties:

The border can be styled in various ways:

 border-width: Thickness of the border.
 border-style: Can be solid, dashed, dotted, etc.
 border-color: Sets the color of the border.

Example:
div {

border: 5px dashed red;

Padding Properties:

padding refers to the space between the content of the box and its
border. You can set the padding on all sides or individually.
Example:

div {

padding: 20px; /* Sets 20px padding on all sides */

You can also target specific sides:

div {

padding-top: 10px;

padding-right: 15px;

padding-bottom: 20px;

padding-left: 25px;

Margin Properties:

margin defines the space between the border of the box and the
surrounding elements.
Example:
div {
 margin: 50px; /* Sets 50px margin on all sides */

Or

div {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

nav a: This selector applies to all anchor (<a>) elements inside the
<nav> tag. It means the rule will style all links within the navigation
bar.

:hover: The :hover is a pseudo-class in CSS that applies a style when

the user hovers their cursor over the element. In this case, it refers to
when the user moves the mouse over the <a> (link) element in the
navigation bar.

background-color: #575757;: This rule changes the background color

of the link to a dark gray color (#575757) when the user hovers over it.
In action:

When a user hovers their mouse pointer over one of the navigation links, the
background color of that link will change from its default color (in this case,
likely the color set for the <nav a>) to a dark gray (#575757).

The display and text-decoration properties in CSS are essential for

controlling how elements are displayed and styled. Here's a detailed
explanation of their roles:
display Property:

The display property controls how an element is visually formatted

on the webpage and affects how it interacts with other elements.
Common Values of display:

block:

The element will behave like a block-level element.

It will take up the full width available (by default), and a new line will
start after it.

Examples of block elements: <div>, <p>, <h1> - <h6>

inline:

The element behaves like an inline element.

It only takes up as much width as its content and does not force a line
break after it.

Examples of inline elements: <span>, <a>, <strong>, etc.

inline-block:

The element behaves like an inline element, but it also allows setting
width and height (like a block element).
It stays inline without forcing a new line but can have its dimensions
controlled.

none:

The element will not be displayed at all, as if it doesn't exist in the

document.

This is useful for hiding elements.

Role of display:

It controls the layout behavior of elements.

Determines whether an element appears as a block, inline, or hidden.

Useful for creating flexible and responsive layouts.

text-decoration Property:

The text-decoration property is used to apply decorations to text,

such as underlining, overlining, or striking through the text.
Common Values of text-decoration:

none:

Removes any text decoration (like underlining) from the text.

This is commonly used to remove the underline from links ( <a> tags).

underline:

Adds an underline beneath the text.

overline:

Adds a line above the text.

line-through:

Strikes a line through the middle of the text, creating a

"strikethrough" effect.
Role of text-decoration:

It customizes the appearance of text by adding or removing decorative lines.

Commonly used to control the appearance of links or emphasize certain parts

of text.

Enhances readability and visual styling of text elements.

Grouping: The same styles (color and font) are applied to both h1 and h2 using a grouped
selector.
Dimensions: The .box has specific width and height defined, and uses max-width to prevent
overflow.
Display: .inline-box is an inline-block element while .block-box is a block-level
element.
Positioning: .relative-box uses relative positioning, while .absolute-box is positioned
absolutely in relation to its nearest positioned ancestor.
Floating: .float-left and .float-right elements are floated to the left and right, causing
text or elements to wrap around them.
Aligning:

text-align: center centers the text in the .center-text class.

vertical-align: middle is used to align elements vertically within a container.

Grouping in CSS

CSS grouping allows you to apply the same styles to multiple elements without repeating
code. This can be done by separating selectors with commas.

h1, h2, h3 {

color: blue;
font-family: Arial, sans-serif;

Here, h1, h2, and h3 elements all have the same color and font-family properties.

Dimensions in CSS

The dimension properties in CSS allow you to control the size of elements using width,
height, max-width, max-height, etc.

div {

width: 200px;

height: 100px;

max-width: 100%;

the div element will have a width of 200px, a height of 100px, but will not exceed the maximum
width of 100% of its parent container.

Display in CSS

The display property determines how elements are displayed in the browser, such as
whether they are treated as block, inline, or other display types.

p{

display: block;

span {

display: inline;

paragraphs (p) are treated as block elements, occupying the full width, while span elements remain
inline, flowing with the text.
Positioning in CSS

CSS positioning allows you to control the exact placement of elements on the page using
properties like static, relative, absolute, fixed, or sticky.

div {

position: relative;

top: 20px;

left: 10px;

In this case, the div will be moved 20px down and 10px to the right from its normal position.

Floating in CSS

Floating allows you to float elements to the left or right within their container, causing other
content to wrap around them.

img {

float: left;

margin: 10px;

p{

float: right;

width: 50%;

}
The image will float to the left, and the paragraph will float to the right, with 50% of the container
width.
 Aligning in CSS

CSS provides different ways to align elements, such as text alignment (text-align) or vertical
alignment (vertical-align).

h1 {

text-align: center;

img {

vertical-align: middle;

}
The h1 heading will be centered within its container, and the image will be vertically aligned in the
middle of its surrounding text.