Cascading Style Sheets (CSS) are used to style webpages. Your browser looks at a webpage’s CSS to decide the look and feel of a webpage. For a paragraph, a CSS style sheet tells the browser what font to use, what size it needs to be, and what color it should be. In this catalog, we’ll explore some of the most frequent (and interesting) questions regarding this topic.
Our catalog of quick CSS shots is ever-evolving. Our current selection of shots is organized by:
Introduction: where we go over a brief overview of CSS.
Selectors: where we get introduced to the syntax of CSS.
Properties: where we understand the things we can do with CSS.
Advance topics: where we learn about extensions to CSS that make it more powerful.
Applications: where we look at short applications of CSS.
Disclaimer: A catalog shot links together all the shots on a particular topic and outlines how they fit together. A catalog does not attempt to cover the scope of a topic. It is only a catalog of the shots we have on the subject thus far.
CSS is a type of style sheet language, with a specific syntax where we can define how to display selectors by setting their properties to particular values. Take the following example where p is a selector and font-size is the property that is set to 16px.
// <selector> { <property>: <value> }p { font-size: 16px }
What is CSS?
What are Cascading Style Sheets (CSS)?
If you’ve set-up CSS properly, you can benefit from significant time-saving, particularly when working on large projects. With external stylesheets, the recommended way to use CSS is to reuse the same stylings for multiple HTML pages.
How to add cascading style sheet(css)
You can use open-source stylesheets for your projects, such as Google’s material design stylesheet.
What is material design in CSS?
Selectors can be generic HTML tags such as h1 (heading one), p (paragraph), img (image), or they can be class or id. Class and id are used to add more specificity in our selections, for example, when you want a certain paragraph tag to look different than another paragraph tag.
What are CSS selectors?
Class and ID selectors in CSS
We can use pseudo-classes to style special states of an element. One such pseudo-class is the active selector.
What is an active selector?
We can assign id's and class by referencing them in the HTML document, like so:
<html><head></head><body><h1 id = "h1_color"> This is a heading. </h1>//<!-- Another element cannot be assigned the same id.// This will generate an error in some browsers -->//<!-- <h1 id = "h1_id"/> This is another heading. </h1> -->//<!-- The following is correct. This can be done --><p class = "p_color">This is a paragraph.</p><p class = "p_color">This is another paragraph.</p></body></html>
The corresponding CSS file will look like this:
// we reference an id with the '#' (hash) symbol
#h1_color{
color: #45597E;
}
// we reference a class with the '.' (period) symbol
.p_color{
color: #74C3E1;
}
Together, the following output is generated:
Beyond just the syntax, class and ids have key differences in usage:
Uniqueness: An id can only be used to reference one element, whereas a class can be used in various locations.
Assignment: An element can only have one id but multiple classes.
Read more about how to assign multiple classes to an element here,
How to use multiple classes on the same element in CSS
Priority: If an element has both an id and class associated with it, id attributes will take priority over class attributes.
There are other ways to be specific in CSS. You can use:
first-of-typeto target the first occurrence of a tag in a particular scope.
What is the first of type selector in CSS?
After understanding selectors, the next step is to understand what you can do with them. In this section, we can go over the popular properties in CSS.
We can set how our cursor reacts with objects by setting the cursor property.
How to use the cursor property in CSS
The background-color property is a versatile property that can be used with the body, div, h2, and p elements of the web page. As the name suggests, you can set the background color of the tagged elements.
How do you change the background color using CSS?
We want to align elements so that there is visual coherence on our webpage. Fortunately, doing that is trivial using the vertical-align property.
How to use the “vertical-align” property in CSS
We can add interest to our webpage by adding transitions to elements on the webpage by using the following syntax:
ele {transition: <property> <duration> <timing-function> <delay>;}
You can place objects in a particular position by using the float property. You can set it to None, Right, Left or Inherit.
What is float property in CSS?
We can set the overflow-x or overflow-y to scroll to enable horizontal or vertical scrolling in a restricted space.
How to add scrollbar to div
Great text not only adds aesthetic and emotive appeal to your webpages but also improves usability if done thoughtfully to include thinking about legibility and readability. Fortunately, you can manipulate text in powerful ways with CSS.
What is CSS typography?
Some popular properties are as follows:
| Convert text to UPPERCASE | |
| Create an outline on text | |
| Center align a heading | |
| Change font color |
You can improve the appearance of text on low-resolution displays by using the
font-smoothproperty.
What is font smoothing in CSS?
We can modify text inside an HTML tag using the content property. By using a selector with the keywords :before and :after, we can prepend or append text.
What is the content property in CSS?
A flex container is a powerful tool that provides alignment options. A flex container provides six properties
flex-direction: Set the direction at which items are placed
CSS flex-direction property
flex-wrap: Set if items should wrap or not
flex-wrap
justify-content: Align items
justify-content: space-around
justify-content: center
justify-content: flex-end
align-items: Align items vertically
How to align elements in flex and grids
flex-flow: define the flex-wrap and flex-direction together
align-content: Align flex lines (rows of flex items)
What is a CSS flexbox?
How to use Flexbox in HTML
As you might expect, flex is powerful because it can adapt to various screen sizes, which makes it ideal for responsive web design.
How to make responsive layouts without using CSS media queries
We can use flexbox properties to create a sticky footer.
How to create a sticky footer in CSS
We can style lists by setting the list-style-position,list-style-type, and list-style-image properties
How to style a list in CSS
It can be tricky setting the opacity of the background image using CSS. Some workarounds are:
Set an image in the background by using absolute positioning and manipulate it, like you would a normal object. Then display the content you want to display over it from another selector.
Use CSS Pseudo-Elements to refer to the image separately from the content you want to display over it.
How to set the opacity of a background image using CSS
If you’re having trouble fitting things, then you can use the
overflowproperty and set it toauto.
What is a clearfix in CSS?
Sometimes you need to add a line break. You can do that by using the content property with a \a or set the white-space property to pre.
How to add a line-break using CSS
If you’d like to use a value frequently, you can use a CSS variable.
What is a CSS variable?
We can enhance our CSS writing by writing in SASS. SASS is a feature-rich and mature extension to CSS. SASS allows developers to write CSS more efficiently.
It enables:
the use of variables
imported modules
nesting elements
mixins (common properties between selectors)
Beginner’s guide to SASS
Nesting CSS selectors with Sass
What is node-sass?
When making responsive webpages, one needs to know how to respond to various screen sizes. You can do this with CSS, but as you might expect, you can do it better with SASS.
How to write CSS media queries using SASS mixins
We can understand building CSS objects by following various frameworks that can help you think things through. Two of which are the BEM and built-in box model.
What is BEM methodology?
What is the Built-in Box-Model of the WEB (Advanced)?
In this section, we explore various useful applications of CSS.
Understand how to build CSS art by exploring the following shots:
3 secrets behind single div CSS art
How to create a circle in CSS
How to create a triangle in CSS
How to make your first CSS art
How to create an ellipse in CSS