CSS

What is CSS ?

• CSS for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on the screen, on paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Syntax

CSS is comprised of selectors and declarations. Selectors are how we tell CSS which elements to apply styles to. Declarations are the actual styles that will be applied for that element, i.e. they are everything within the braces. Within those declarations, we have properties and values. The properties are the type of style we are applying, the value is what we are actually applying.

Selectors

In CSS, we will use selectors to specify which HTML elements we want to style. Sometimes, this will be every element on the page. Other times, we will only want to select certain elements.

Sometimes, we will want to select each instance of an element on the page, for example, all h2‘s. We can select elements with their names!

h2 {
  color: blue;
  font-family: sans-serif;
}

Sometimes, we will instead want to select groups of elements — say we only want certain paragraphs to be bolded, we can use classes to differentiate between those paragraphs.

<h2 class="center">Hello World</h2>
<h2 class="center">Hello World</h2>
<h2>Hello World</h2>

We differentiate element and class selectors by putting a . before the class name in CSS — that way CSS knows we are looking for a class named center instead of an element!

.center {
  text-align: center;
}

Properties

There are more than 500 CSS properties but the browsers only support around 300+ properties. That’s why we have prepared the list of 300 CSS properties with values which the current browsers support. There are a couple ways you can add color to a document using CSS, including text and backgrounds. Also, there are a couple of ways to represent colors in CSS.

Text

Another really important CSS feature is styling text. You can choose fonts, text spacing, and sizing.

There are some fonts that are built into most computers, which are referred to as web safe fonts. You can also add fancy fonts by including a font file. You can use sites like Google Fonts to find ones that you like for your sites.

body {
  /* if the user's computer has Arial, use that, if not Helvetica, 
  then fall back to the operating system's default sans-serif font */
    font-family: Arial, Helvetica, sans-serif;
}

Display

One of the more important CSS attributes is display. There are a few values you can use here. The first is none which hides the content. This can be helpful for hiding some content on different size screens or due to JavaScript events. inline removes linebreaks after elements, and it also means that adding height and width won’t have an effect. blockmeans that the next element will be on the next line. inline-block is similar to inline, though you can apply height and width to the element. Fixed and sticky displays make elements stay in positions These are generally the most used and most traditional display properties, however, two more recent ones have really changed the layout game.

Layouts

Usually one of the trickier parts of CSS is creating layouts for your webpages. Getting things aligned properly used to be much more difficult than it is now, due to CSS Grid and Flexbox, two newer CSS display attributes . If you would like to learn them in more depth, CSS Tricks has great guides for both Grid and Flexbox. I’ll go over a few tricks here too!

In order to center an element horizontally, you can normally use either text-align: center; or margin: 0 auto;. But — vertical centering used to be more difficult. Good news! Flexbox made it a lot easier. The following snippet placed on the parent of the element you’re trying to center will center it both horizontally and vertically.

parent {
  display: flex;
  align-items: center;
  justify-content: center;
}