Bukunmi Odugbesan
A frontend engineer with a desire to be a JavaScript expert
Article by Gigson Expert
CSS is one of the main components of building applications for the web. It is used to add styling to an application, giving it color and making it visually appealing. To understand the foundational elements of CSS, you need to know how to get the elements you want to style, what you can use to style them, and how they can be placed on the web page. Let’s break down each of them, one after the other.
Selectors
Selectors are patterns used to find HTML elements on your pages that you intend to style. CSS selectors can be divided into 5 categories:
1. Simple Selectors:
These are selectors that find elements based on the tag names, classes, and ids. When elements are styled based on their tag names, every HTML element with that tag gets that style.
For example:
p{
text-align: center;
}This aligns all p tags on the web page centrally. If there are five p tags on a page, and you decide to give three out of those p tags a class of blue: <p class=”blue”> This is a text</p>, only those elements with the class of blue will get the style given to that class. In referencing classes in the CSS files, we add “.” before the class name.
For example,
.blue {
color: blue;
}This ensures that only p tags with the class of blue are changed to the colour blue. If you decide to give one of the p tags an id of border: <p id=”border”> This is a text </p>, only the element with that id gets the style assigned to it. In referencing ids in CSS files, we add “#” before the id name. For example:
#border {
border: 1px solid black;
}Only the element with an id of border gets to have that border around it. It is important to note that while classes and ids appear similar(given that they are used to create a form of uniqueness), ids are used only when one element needs that style. If more than one similar elements need the styles assigned, then a class is used. Using our five p tags example, because we need to give three of them a color of blue, we added a class. And for the one that needed a border, we gave it an id. If more than one element requires a border, we use a class to apply it. An element can also have more than one class. For example, adding a border to only two of the p elements that have a class of blue can be achieved like this:
<p class=”blue border”> This is a text </p>
.border {
border: 1px solid red;
}Based on the given examples, “p”, “.blue”, “#border” and “.border” are all simple selectors.
2. Combinator selectors:
These are selectors that select elements based on a specific relationship between them. A combinator is something that defines the relationship between two or more selectors. There are four different combinators in CSS:
- Descendant combinator: This matches all elements that are descendants (children, grandchildren, etc) of a particular element. For example, if you want to style the
<p>elements only inside a div, here’s how to do that:
div p {
background: yellow;
}By leaving a space between the two selectors, you are specifying that you only want to target the elements under the first selector indicated.
- Child Combinator (>): This matches only elements that are direct children of a particular element. For example:
div > p {
background: yellow
}- Next Sibling Combinator (+): This is used to select an element that is directly after the specified element. They must have the same parent element. An example:
div + p {
background: yellow:
}- Subsequent Sibling Combinator (~): This selects all elements that are next siblings of the specified element. An example:
div ~ p {
background: yellow:
}3. Pseudo-class Selectors:
These select elements based on the state of the element. Some examples:
:link-This is used to style unvisited links (a link that hasn’t been routed to):visited-This is used to style visited links:hover-This is used to style a link when the mouse is over it:active-This is used to style a link that’s currently being visited:focus-This is used to style an input field when it gets in focus
4. Pseudo-element selectors:
These are used to style a part of an element. For example, if you want to style the placeholder of an input:
input::placeholder {
padding -left: 1em
}5. Attribute Selectors:
These are selectors that select an element based on an attribute or attribute value. This example selects all <a> elements with a target attribute
a[target] {
background-color: yellow;
}
Properties
CSS properties are keywords used in styling and controlling the appearance of HTML elements, such as modifying colors, fonts, size, spacing, and positioning. There are hundreds of CSS properties, and it is impossible to know them all.
These are some of the properties for modifying fonts:
- Font-family: This is used to set the type of font used.
- Font-size: This is used to set the size of the text.
- Font-weight: This is used to measure the thickness of the text.
These are some of the properties used in modifying size:
- Height: This is used to set how tall elements should be.
- Width: This is used to set how wide elements should be.
- Max-height: This is used to set the maximum height an element can have.
- Max-width: This is used to set the maximum width an element can have.
- Min-height: This is used to set the minimum height an element can have.
- Min-width: This is used to set the minimum width an element can have.
Max-height, max-width, min-height, and min-width are used to control layouts. Max-height and max-width are used to prevent content from being too big, allowing it to scale on smaller devices, too. Min-height and min-width are used to prevent content from being too small and collapsing on smaller devices.
These are some of the properties used in modifying typography:
- Color: Changes the color of the text
- Text-align: Aligns texts within an element
- Text-decoration: Adds decorative properties to the text, such as an underline or a line-through.
- Text-transform: Used to control the capitalisation of text i.e Uppercase, Lowercase or capitalising the first letter of text.
These are some of the properties used in modifying positioning:
- Display: sets how elements are displayed, e.g., block, in-line block, flex, grid, or none.
- Position: defines the positioning method of an element, e.g., absolute, relative, static, fixed, sticky.
- Float: Specifies whether an element floats to the left, righ,t or not at all
- Margin: Controls the space outside an element's border.
- Padding: Controls the space between an element and its border.
- Box-sizing: This determines how the width and height of elements are calculated
Layouts
CSS provides different methods for arranging elements on a webpage. Each method has its unique strengths designed for different layout challenges. These are the primary layout methods:
- Flow Layout: This is the default layout of the web browser. It is the same as setting
layoutBlock elements stack vertically on new lines. - Flexbox Layout: Flexbox is a one-dimensional layout model used to arrange elements in a single row or a single column. It is ideal for dynamic content and aligning items within a container.
- Grid Layout: CSS Grid is a two-dimensional model that allows the alignment of elements into complex columns and rows. It provides precise control over placement and is best suited for major page regions.
There are also other layout techniques used for specific use cases.
Floats: Primarily used to wrap text around images.
Positioned Layout: Using the `position` property for precise control over an element’s placement. Often used for overlays, modals, and sticky menus.
Table Layout: Mimics HTML table behaviour. `display: table;` property sometimes used for data presentation.
Multi-column Layout: The column count property can arrange content in a newspaper-style content.
Conclusion
The key to understanding which selector, property, or layout to use each time is to practice. Mastering CSS is more about understanding how its three pillars intersect. Selectors help target specific elements, Properties define the visual style, and Layouts control the structural flow of the page. There is a lot of information about each of them, but it is impossible to memorise all of them. Over time, knowing which requirement to use each time will become second nature.
Frequently Asked Questions
What is the difference between class and id?
Class is used for styles that will appear on multiple elements on a page. Id is used for a specific element. Ids also hold a higher specificity than classes.
What is the difference between display: none; and visibility: hidden;
Setting display to none means the element is taken away from the document and occupies zero space. Setting visibility to hidden makes the element invisible, but it still occupies space on the page.
When should I use Flexbox vs CSS Grid?
Flexbox is best for laying out items in a single row or column. Useful for navigation bars and aligning items within a container. CSS Grid is used for laying out items in rows and columns simultaneously. Useful for overall page layouts and complex galleries.
