CSS SELECTORS AND PROPERTIES

CSS | SELECTORS AND PROPERTIES

ALSO IN THIS SECTION
GETTING STARTED
SELECTORS AND SPECIFICITY
STYLING PROPERTIES AND VALUES
BOX AND LAYOUT
RESPONSIVE DESIGN
CSS QUICK REFERENCE

SECTION 1 | WHAT ARE CSS SELECTORS

CSS selectors are patterns used to select and style HTML elements. Properties are then applied to these selected elements to define their appearance. For example the 'p' selector is the selector that will be applied to all the <p> tags within your HTML.

Here we will break the selectors down into 4 categories:

Simple Selectors (Basic Selectors)
Combinator Selectors
Pseudo Selectors
Attribute Selectors

SECTION 2 | SIMPLE SELECTORS

There are 3 main types of Simple Selectors that target HTML elements in different ways: Tag Selectors, Class Selectors and ID selectors

TAG SELECTORS

Targets all elements of a specific type for example the below will target all <p> tags.

p {
color: blue;
}

CLASS SELECTORS

Targets elements with a specific class attribute. It's prefixed with a period, the below example would give a yellow background to elements with class="highlight". <p class="highlight">Hello world</p>

.highlight {
background-color: yellow;
}

ID SELECTORS

Targets a single element with a specific id attribute. It's prefixed with a hash, the example below will set the font size of the element with id="header" to 24px. <p ID ="header">Hello world</p>

#header {
font-size: 24px;
}

In the above example the Class and the ID selectors have both been applied to a <p> tag, this is for the purpose of seeing how they work and are applied however, they are designed to be used for slightly different purposes.

CLASS SELECTOR PURPOSE

Used to target multiple elements on a page that share the same style.
Ideal for when you have a group of elements that need the same styling, but they aren't necessarily of the same type.

<div class="highlight">
<p>Hello world</p>
<p>How you doin!</p>
</div>
In the example above all elements within the DIV tag will inherit the class style set.

ID SELECTOR PURPOSE

Used to target a single, unique element on a page.
Ideal for styling elements that have a specific function or purpose on the page, like a header, footer, or a unique section.
NOTE: IDs should be unique within a page. This means you should only use a specific ID once on a page. If you find yourself wanting to use the same ID on multiple elements, consider using a class instead.

SECTION 3 | POPULAR CSS METHODS

You are most like keen to try some styling methods for your website, here is a table will popular methods for your to try.

NOTE: In CSS you can use /*to start a comment, and to end the comment use */

TYPE	DESCRIPTION	EXAMPLE
Color Changes	Play with the color property to change text colors. Use the background-color property to modify the background of elements.	p { color: blue; background-color: lightyellow; }
Font Styling	Use the font-family property to apply different fonts. Adjust font-size, font-weight, and font-style to see variations in text appearance.	h1 { font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold; font-style: italic; }
Borders	Add borders using the border property. Experiment with border-radius to create rounded corners.	.box { border: 2px solid red; border-radius: 10px; /* Rounded corners */ }
Spacing and Layout	Adjust the space inside elements with padding. Modify the space outside elements using margin. Play with the display property to understand block, inline, and inline-block layouts.	.container { padding: 20px; /* Space inside / margin: 10px auto; / Space outside, centered horizontally */ display: block; }
Hover Effects	Use the :hover pseudo-class to create interactive effects when the mouse hovers over an element.	button:hover { background-color: green; color: white; }
Background Images	Set background images using the background-image property. Experiment with background-size and background-position for positioning and scaling.	.header { background-image: url('path/to/image.jpg'); background-size: cover; /* Cover the entire element */ background-position: center; }
Text Effects	Use text-shadow to add shadows to text. Play with text-transform to change text to uppercase, lowercase, or capitalize.	.shadow-text { text-shadow: 2px 2px 4px gray; text-transform: uppercase; }
Transitions	Add smooth transitions to properties using the transition property, making changes appear gradually.	.fade { opacity: 0.5; transition: opacity 0.5s ease-in-out; } .fade:hover { opacity: 1; }
Box Shadows	Apply shadows to elements using the box-shadow property.	.shadow-box { box-shadow: 5px 5px 10px gray; }
Gradients	Create color gradients for backgrounds using the linear-gradient and radial-gradient functions.	.gradient-bg { background: linear-gradient(to right, red, yellow); }
Flexbox	Even for beginners, trying out basic flexbox properties like display: flex, justify-content, and align-items can be enjoyable and offer a glimpse into modern layout techniques.	.flex-container { display: flex; justify-content: space-between; /* Space out items / align-items: center; / Center items vertically */ }
Transforms	Rotate, scale, and move elements using the transform property.	OOMBINATORS AND .rotate { transform: rotate(45deg); /* Rotate element 45 degrees */ }

When you create your css file, save it in the css folder.

SECTION 4 | COMBINATOR SELECTORS

In CSS, combinator selectors are used to define relationships between different elements based on their position in the HTML document. They allow for more specific and complex selections. There are four primary types of combinator selectors:

1. Descendant Selector (space)
2. Child Selector (>)
3. Adjacent Sibling Selector (+)
4. General Sibling Selector (~)

THE DESCENDANT SELECTOR

Symbol | Space ( )
Description | Selects all elements that are descendants of a specified element.

Example:
article p {
color: blue;
}
This will select all <p> elements that are inside an <article> element, no matter how deeply nested they are.

THE CHILD SELECTOR

Symbol: Greater-than (>)
Description: Selects all elements that are a direct child of a specified element.

Example:
div > p {
font-weight: bold;
}
This will select all <p> elements that are a direct child of a <div> element, but not those that are nested further than one level deep.

THE ADJACENT SIBLING SELECTOR

Symbol: Plus (+)
Description: Selects an element that is directly after another specific element, and both share the same parent.

Example:
h2 + p {
margin-top: 20px;
}
This will select any <p> element that directly follows an <h2> element, giving it a top margin of 20px.

THE GENERAL SIBLING SELECTOR

Symbol | Tilde (~)
Description | Selects all elements that share the same parent and come after a specific element.

Example:
h2 ~ p {
font-style: italic;
}
This will select all <p> elements that are siblings of an <h2> element and come after it, making them italic.

Combinator selectors help target elements based on their relationship to other elements in the HTML structure. They provide a way to be more specific in your selections, allowing for more precise styling.

SECTION 5 | PSEUDO SELECTORS

Pseudo-selectors in CSS allow you to target elements based on their state, position, or content, rather than their attributes or element name. They are prefixed with a colon (:) and can be broadly categorized into pseudo-classes and pseudo-elements.

PSEUDO-CLASSES
Pseudo-classes target elements based on their state or position. Here are some popular Pseudo-class methods.

:hover: Targets an element when it's being hovered over.

a:hover {
color: red;
}

:active: Targets an element during the active state, like when a button is being pressed.

button:active {
background-color: gray;
}

:focus: Targets an element when it gains focus, often seen with form inputs.

input:focus {
border-color: blue;
}

PSEUDO-ELEMENTS
Pseudo-elements target specific parts of an element's content. Here are some popular Pseudo-element methods.

::before: Inserts content before an element's actual content.

p::before {
content: "Note: ";
font-weight: bold;
}

::after: Inserts content after an element's actual content.

p::after {
content: " (end of note)";
font-style: italic;
}

::first-line: Targets the first line of a block element.

p::first-line {
font-weight: bold;
}

::first-letter: Targets the first letter of a block element.

p::first-letter {
font-size: 2em;
}

::selection: Targets the portion of an element that is selected by a user.

p::selection {
background-color: yellow;
}

Pseudo-selectors provide a way to target elements based on factors other than their attributes or element name. They offer enhanced specificity and flexibility in styling web content. Pseudo-classes often deal with states or positions, while pseudo-elements target specific parts of content

SECTION 6 | ATTRIBUTE SELECTORS

CSS attribute selectors provide a powerful way to target HTML elements based on their attributes and values. They offer a high level of specificity and can be used to select elements with certain attributes, or even with specific attribute values. Here we break Attribute values into three sections:

Presence and Value Attribute Selectors
Substring Value Attribute Selectors
Specificity in Attribute Selectors

PRESENSE AND VALUE ATTRIBUTE SELECTORS

[attribute]: Selects elements with the specified attribute, regardless of its value.

input[required] {
border: 2px solid blue;
}
This will select all input elements that have the required attribute.

[attribute="value"]: Selects elements with the specified attribute and value.

input[type="text"] {
background-color: lightgrey;
}
This will select all input elements where the type attribute's value is exactly "text".

SUBSTRING VALUE ATTRIBUTE SELECTORS

[attribute^="value"]: Selects elements whose attribute value begins with a specified value.

a[href^="https://"] {
color: green;
}
This will select all a elements with an href attribute value that begins with "https://".

[attribute$="value"]: Selects elements whose attribute value ends with a specified value.
a[href$=".pdf"] {
font-weight: bold;
}
This will select all a elements with an href attribute value that ends with ".pdf".

SPECIFICITY IN ATTRIBUT SELECTORS

[attribute|="value"]: Selects elements with an attribute value that is either equal to a specified value or starts with that value followed by a hyphen (useful for language subcodes)

p[lang|="en"] {
color: darkblue;
}
This will select all p elements where the lang attribute value is exactly "en" or starts with "en-".

[attribute~="value"]: Selects elements with an attribute value containing a specified word, delimited by spaces.

div[class~="container"] {
width: 100%;
}
This will select all div elements with a class attribute containing the word "container".

Attribute selectors are a precise way to target elements based on their attributes and values. They can be used to select elements with a certain attribute, a specific value, or even a value that contains, begins, or ends with a specific substring. These selectors enhance the specificity and flexibility of your CSS, allowing for more targeted styling without adding classes or IDs.

NAVIGATION

COMING SOON