What does CSS do? The power of Cascading Style Sheets (1/3)

Photo by Hans-Peter Gauster on Unsplash

This tutorial teaches features about CSS. The article shows the power of CSS and explains by itself why it is widely used.

Here is the part one of a sequence of CSS tutorials. In total, there are three articles which the following contents:

  • Basics of CSS
  • Alignment and Dynamic Styling
  • Media Queries and Animations

In general, this article lists an overview of CSS, and it is a good way to start for those who want to learn web development.

Contents

  • Introduction to CSS
    – What is CSS?
    – Syntax
    – Modes to Use CSS
    – Comments
    – Selectors
    – Combinators
  • Tag Manipulation
    – Display Types
    – Background
    – Colors
    – Units
    – Size of Elements
    – Padding
    – Borders
    – Shadows

Introduction to CSS

Cascading Style Sheets is a language used to modify the default styling characteristics of a HTML document. To use CSS, it is important to get to know the syntax and building blocks.

It is assumed that you already know the basics of HTML

Syntax

Where the selector could be any tag, class, or element id. The property is the command that modifies the selector based on any value that sometimes has a trailing unit of measurement.

The three dots at the end indicate that you can add as many properties as you want.

In this article sometimes it is used the following convention:

<property>: {what modifies} ... {what modifies};

Where property is any valid CSS property, and the brackets “{what modifies}” indicate a value to be inserted and what changes are made.

Modes to Use CSS

To start using CSS, we need beforehand reference the CSS content inside the HTML, there are three ways to do so: inline, using the style tag, and by external css file.

Inline

To use css inline you need to choose which tag you want to modify. I choose the title header “h1” to use as example:

As you can notice, the style attribute in the “h1” tag has a color property that points to blue. But, what does that mean?

It is changing the text color to blue.

Style Tag

The style tag is used when the necessity to change different tags of the same element arises. Of course, changing such elements using the inline method is a daunting task.

Inside your document “index.html” in the head tag, we created the style tag and added some CSS code there.

This code takes all span tag and increases its font size to 2rem, which is 32 pixels. The units will be explained later on.

External CSS file

Finally, the last one of our list. The external file is nothing other than a style tag, the code is located in another file with the extension “.css”. This sort of file is often more used than inline and style tags.

“./” is the current directory

Yes, as you can imagine you write your CSS in your own file, and the html linked it and showed in the browser.

Comments

The comments are a good way to record what a piece of code means. Comments in CSS are simple: the /* starts a commenting section and the */ ends it.

Selectors

Selectors are tags you select inside your HTML document. There are three types of selectors in CSS:

  • tag
  • class
  • id

Let’s take a look into these.

Tag Selector

The tag selector is when you select a specific tag that will be modified. Such selection changes all tags sharing the same name in the HTML.

Tag Selector Demonstration.

Class Selector

The class selector is a type of selector that have well-defined properties and can be used in one or multiple tags.

Class Selector Demonstration.

The leading dot in the “class” word defines a class which can be used in any html tag element.

The class attribute refers to a class — which shall be defined somewhere. Pay attention that the leading dot disappeared.

ID Selector

The id of an element uniquely identifies them, such as the id card.

ID Selector Demonstration.

The id selector only changes the element with the specified id. Nothing else.

Note that the “p” tag has an id. Remember to avoid ambiguity by choosing a unique id for each element.

Combinators

Combinators make possible the selection of elements that are unknown whether trying to select by id or by class.

There are four types of combinators each with the following syntax:

  1. element element
  2. element > element
  3. element + element
  4. element ~ element

The first two selects descendants tags:

  • The “element element” (1.) selects all descendants of an element.
  • The “element > element” (2.) selects only the direct children elements.

The three and four elements select the sibling elements, the “immediately followed by” elements:

  • The “element + element” (3.) selects the first and unique sibling element.
  • The “element ~ element” (4.) selects every sibling elements.
Combinators Demonstration.

Tag Manipulation

Tag manipulation is about customizing a single or multiple elements to achieve a desired result.

Display Types

The display is a property that changes the way an element is seen by HTML.

Basic display types:

  • Block
  • Inline
  • None

Block and Inline

The block display value is seen by HTML as if it has its own space in the page. The inline display shares the space with other elements around.

Difference between block and inline displays

The span tag by default has the display set to inline. Setting the display to block makes clear what changes.

None

The “none” display value makes the element invisible, but not only that, the element is completely hidden as if it doesn’t exist.

Colors

There are several ways to use colors in CSS. You can choose hsl, rgba, rgb, and hex colors. The examples below only include uses of RGB and HEX code.

RGB and HEX Colors

RGB is basically a mix of Red Green and Blue colors that can make up to 2²⁴ different colors.

While, the hex code is a way to determine the colors’ code easily since its is used hexadecimal base which is between 0 to 16, the letters A to F express the values 10 to 16.

RGB and HEX demonstration

Background

Sometimes we want to change the background color, size, position, or use an image. The background in CSS has several properties. In this section, only the background color and image will be covered.

Background Color

To change the background color in a HTML element:

Background Image

To use an image as background you can specify either an url to the image or a directory:

It is also possible to use a gradient with the background-image.

If your image is small enough to not cover the screen you can use the background-repeat property to repeat the image throughout the screen.

There are other options that can be used such as round, space, repeat-x and repeat-y.

Units

The purpose of units is to compare something that can be quantified. In CSS there are tons of units which can be used in a specific or absolute way.

In this section the following units will be covered: px, em, rem, vh, vw, and %.

Percentage (%)

The size of % unit is defined by the parent element and takes a percent value of its width, height or both.

Pixels (px)

The pixel (px) is considered as an absolute value. It doesn’t change according to the screen.

The em and rem units

The em is relative to the font-size of the parent element. If the parent has the size of 5px, then the child element using a 10em, will have the size of 5*10px;

The difference between em and rem is that rem uses the root of the html element to set up its size instead of the parent.

The vh and vw units

The vh unit is relative to 1% of the height of the browser’s screen. The same happens with the vw, however this time with the width.

Both the vh and vw are perfect to create a layout that increases in screen size.

Element size

You can define the size of an element by changing its default value. The size of an element depends on its width and height, and at times is defined by the content of a tag.

Height and Width Demonstration.

You can also use multiple different units, we have used pixels to change the size of “div” using the buttons width and height on JSfiddle.

Padding

The padding is a type of margin between the content of an element and its actual border. To use padding in CSS you can use the following tags:

  • padding (Shorthand)
  • padding-bottom
  • padding-top
  • padding-left
  • padding-right

The general form of the padding shorthand:

Padding Demonstration.

Borders

Borders are a great way to give a flavor to elements. In CSS you can change the border style, width, and colors. To use borders, the border-style property must be set.

A border has four sides: left, right, top, and bottom.

There are several styles for the border-style property. In this section we will be using the dashed and solid ones.

Different Border Styles.

You can try other style options such as groove, ridge, inset, outset.

To change the size of a border you can use the border-width property which changes the width of the four borders. You can use values such as thick, medium or any value units. In CSS is also possible to change the border color.

A border has four sides as stated. Imagine that we need to change a specific border on one of the four sides. How to do that? We can specify the side of the border by using the syntax border-<side>-[style,color,width] .

There are five border shorthands: four for each one of the sides and one to make general changes.

Border Radius

Are you tired of acute edges? The border-radius property can change that! The general syntax of border-radius:

Border Radius Demonstration.

Shadows

Shadows when used correctly makes an element unique and beautiful. In CSS there are two ways of doing that: text-shadow and box-shadow.

Each one of these can change the radius, blur, color, and/or spread of shadows.

Text-Shadow Property

The text-shadow changes the shadow of text.

text-shadow Syntax.

offset-y and offset-x changes shadow’s direction. The blur makes the shadow more unfocused.

text-shadow Demonstration.

Box-Shadow Property

The box-shadow property changes the shadow of an element.

You can add one or more shadows to an element.

box-shadow Syntax.

The spread changes how far the shadow go. The inset makes the shadow go to the opposite side but inside the element.

box-shadow Demonstration.

Conclusion

That’s it. This is part one from the series of articles about CSS. In part one much of the basics of CSS was accomplished.

Keep in mind that to be good at CSS you should learn not only the language itself but how and why these beautiful features are used.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store