CSS stands for Cascading Style Sheets and is responsible for styling HTML elements. Before diving into CSS you need to know the basics of HTML.
How CSS Functions
CSS cascades meaning that it overwrites previously declared rules. For example, the last rule will be used if you set a red colour to an element and later declare a different colour to the same element. Take a look below:
p{
color: blue;
}
p{
color: green;
}
The last rule (green) will be applied to all paragraph elements.
How To Use CSS In HTML
CSS can be embedded in HTML pages in 3 ways:
Using the <link> element
The common way of using CSS in HTML is by referencing the CSS file with the <link> element. Here is how its done:
<link href="/media/css/styles.css" rel="stylesheet" />
When writing CSS in a separate file you need to save the file with the .css extension.
The link attribute typically requires two attributes, the href for the CSS URI and rel=”stylesheet” attribute which tells the browser the relationship of the file with the HTML document.
Using the <style> element
The HTML <style> element can be used to contain CSS rules. Here’s how it’s done.
<style>
p{
line-height: 1.5;
}
.panel{
padding: 32px;
border-radius: 16px;
}
</style>
Inline CSS
Inline styles allow you to quickly add one liner rules inside an HTML element style attribute. Here’s how it looks:
<p style="background: yellow;height:50px;" >Here's a paragraph</p>
There’s a never-ending debate as to whether inline styles are good or bad. Some argue that they can make managing and debugging CSS difficult.
However, sometimes you may need to add distinct and isolated CSS styles that are seperate from the main rules which make inline styles ideal.
CSS Syntax
To apply styles to HTML elements you first need to target the element. These are called selectors. Selectors are followed by opening and closing curly brackets where the CSS properties and their respective values are contained. Take a look below
CSS Selectors
CSS uses selectors that target HTML elements to be styled. Common selectors are element (tag) names, id, and classes.
Element/ Type Selectors
You can target an element by its tag name like so:
p{
line-height: 1.5;
}
button{
background: blue;
}
All target p elements will have the same css style.
ID Selectors
You can use the id declared in an element attribute as the selector. You prepend a hash before the ID name. For example:
#heading{
font-size: 40px;
}
Class selectors
Prepend a dot to class names to target elements by class. For example:
.panel{
padding: 32px;
border-radius: 16px;
}
Attribute Selectors
You can use an element’s attribute name as a selector as below
input[type=email]{
border: 2px solid blue;
}
Universal Selectors
The universal selector is denoted with a * and targets all elements
/* Make all elements have green text*/
*{
color: green;
}
Selector examples
See the Pen css selectors by Denver Kunaka (@Denver-Kunaka) on CodePen.
For a more comprehensive list of CSS selectors go to MDN
CSS Pseudo Class Selectors
Pseudo classes select elements based on a particular state like clicked, focused, hovered etc or finding elements based on certain criteria, e.g. finding the first child element, last child element etc. Take a look below:
See the Pen css pseudo by Denver Kunaka (@Denver-Kunaka) on CodePen.
Nesting Selectors
Selectors can be nested, meaning you can target an element contained in another by traversing through the hierarchy. Here’s a demo.
<div class="panel">
<h3>Panel Title</h3>
<div class="panel__content">
<p>Panel Description</p>
<a href="#">Google</a>
</div>
</div>
We want to target the third element (<a>) down the hierarchy. We can do this:
.panel a{
color: white;
}
We first target the parent container and traverse it down.
CSS Grouping Selectors
You can apply the same CSS rules to multiple elements. Take a look below
h1,
h2,
h3,
h4,
h5,
h6{
color: black;
}
.panel,
.card{
padding: 32px;
}
Separate the target selectors with a comma.
CSS Inheritance
It’s crucial you know CSS inheritance because you may apply styles and not see any changes.
Inheritance means that styles declared on a parent element will be applied to child elements as well. For example, the color and font-size properties. When color is applied on a parent element the children will also take the parent’s value. Take a look below.
See the Pen css inheritance by Denver Kunaka (@Denver-Kunaka) on CodePen.
These properties are called inherited properties. If no property is declared on a child element, it will take the initial property value found on its parent’s parent (grandparent). It can traverse to the top HTML root element and take the value there.
Other properties don’t inherit and are called non-inherited—for example, the border property.
The border will not be applied to children until the children specify their own border property. If there’s no property specified on the child the child will take the property’s initial value which is none.
CSS Important Keyword
Because of the cascading behaviour of CSS sometimes you may need to make sure a css declaration is not changed somewhere along the code or other stylesheets.
The important keyword is appended to a property value with an exclamation mark like so:
p{
line-height: 1.5!important;
}
However, important declarations can also be overridden if another important is applied on the same property value. The last property value will be used.
p{
line-height: 1.5!important;
}
p{
line-height: 2!important;
}
Important keywords are mostly used in environments like WordPress where you’ll have different stylesheets from different sources and you want to make sure no one overwrites your css rules.
If you have more control over your styles you may not need to use the important keyword.
CSS Comments
Comments allow you to describe and document your css declarations. They help other developers to understand your code and also you when you resume the code.
Here’s how CSS comments are applied:
/*Form Styles*/
input, button{
padding: 32px;
border: none
}
/*Card Styles*/
CSS Debugging & Best Practices
Unlike programming languages like JavaScript, CSS won’t throw errors. CSS will just ignore invalid properties and values. You typically notice CSS errors by the way elements are styled and displayed.
Avoid too many stylesheets
If CSS stylesheets increase debugging and management becomes difficult. It will be hard to trace which stylesheet is causing problems.
You may declare a property and won’t get applied because another stylesheet has an important keyword on the property’s value.
Too many stylesheets also add to a website’s load time which may impact search rankings.
In CMS environments like WordPress you may have multiple stylesheets present that are essential for functionality. Removing them may break functionality. The stylesheet number can also increase if you install too many plugins. Plugins also come with their own stylesheets so keep them at minimum.
Use Descriptive Selectors
Use selector names that are easy to read and understandable. For example,
.card{
border-radius: 8px;
padding: 32px;
}
.card-title{
color: black;
}
.card-content{
line-height: 1.5;
}
You can use the BEM naming conversion when naming selector classes.
Avoid complicated selectors with heavy nesting and over the top pseudo classes. Keep your HTML & CSS simple.
Use Namespaces
To make your selectors unique you can use a common name at the start of each selector class. For example, suppose your company is XYZ you can begin every class selector with xyz- like below.
.xyz-button{
background: purple;
}
.xyz-button--success{
background: green
}
.xyz-panel{
padding: 32px;
border-radius: 16px;
}
Avoid multiple inline styles
Inline styles can be difficult to manage and trace if they become too many. Use them for quick and isolated style declarations.
Comment Your CSS
Comments help you and others understand your code better. Comment or document your code where possible.
CSS Frameworks
CSS frameworks help to reduce workload. They do all the heavy-lifting by declaring all the necessary and essential styles for you.
With CSS Frameworks you just write class names to HTML elements and the styles will be applied automatically.
Popular CSS Frameworks include:
