What does CSS do? The power of Cascading Style Sheets (1/3)
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.
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.
Class Selector
The class selector is a type of selector that have well-defined properties and can be used in one or multiple tags.
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.
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:
- element element
- element > element
- element + element
- 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.
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.
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.
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.
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:
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.
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:
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.
offset-y and offset-x changes shadow’s direction. The blur makes the shadow more unfocused.
Box-Shadow Property
The box-shadow property changes the shadow of an element.
You can add one or more shadows to an element.
The spread changes how far the shadow go. The inset makes the shadow go to the opposite side but inside the element.
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.
