Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css

Catalog: CSS

Abdul Moeed Asad

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:

  1. Introduction: where we go over a brief overview of CSS.
  2. Selectors: where we get introduced to the syntax of CSS.
  3. Properties: where we understand the things we can do with CSS.
  4. Advance topics: where we learn about extensions to CSS that make it more powerful.
  5. 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.

Style your webpages

Introduction

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

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.

CSS class vs.​ id

There are other ways to be specific in CSS. You can use:first-of-type to target the first occurrence of a tag in a particular scope.
What is the first of type selector in CSS?

Properties

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.

General

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>;
}


How to use transitions in CSS

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

Text

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:

Property Example Shot
text-transform Convert text to UPPERCASE What is the text-transform property in CSS?
text-stroke Create an outline on text How to create a text outline using CSS
text-align Center align a heading How to center align text using CSS
color Change font color How do you change the font color using CSS?

You can improve the appearance of text on low-resolution displays by using the font-smooth property.
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?

Flexbox

A flex container is a powerful tool that provides alignment options. A flex container provides six properties

  1. flex-direction: Set the direction at which items are placed
    CSS flex-direction property

  2. flex-wrap: Set if items should wrap or not
    flex-wrap

  3. justify-content: Align items
    justify-content: space-around
    justify-content: center
    justify-content: flex-end

  4. align-items: Align items vertically
    How to align elements in flex and grids

  5. flex-flow: define the flex-wrap and flex-direction together

  6. 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

Miscellaneous

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:

  1. 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.
  2. 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 overflow property and set it to auto.
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?

Advanced topics

SASS

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:

  1. the use of variables
  2. imported modules
  3. nesting elements
  4. 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

Models of building

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)?

Application

In this section, we explore various useful applications of CSS.

CSS Art

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

Miscellaneous

How to add a parallax scrolling effect using CSS

RELATED TAGS

css
RELATED COURSES

View all Courses

Keep Exploring