title: "Complete CSS Guide for beginners and not so beginners"
published: true
description: "A complete guide of CSS workflow, selectors, pseudo-selectors and CSS operation"
tags: beginners, career, css, tutorial
cover_image: https://binima.com/wp-content/uploads/2018/05/css.jpg
---not

Understanding CSS

What is CSS?

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed using rules.

CSS Syntax

A CSS rule consists of a selector and one or more declaration blocks:

How to add CSS styles to your project?

There's three ways CSS can be inserted into an HTML document:

• As external source (another file on your project or a CDN link, for example): <link rel="stylesheet" href="myStyles.css">
• Internal Stylesheet (On the header or top body of your HTML file using style html tag):

  <style> 
     // my css code 
  </style>
  

• Inline. I.E. on the same html tag using style attribute: <p style="font-weight: bold;">

Recommendation:

Add CSS files as external stylesheets but stored locally on your project. This reduces calls to external servers while performing well, specially on HTTP/2 environment. If you have a bad server/hosting provider, on a remote country (from your target users scope) and/or using HTTP/1 some benchmarking tools may suggest you to use a CDN, in which case could be better to keep the CSS files on your project and use a cache service such as cloudflare.

Basic selectors

the dot . selects a class name and hashtag # selects an id. For example, on the following html:

<div id="main-content" class="container>

The selector #main-content will point to the html id attribute, .container will search html tags with container as the value of their class attribute and #container or .main-content will not match anything as there's no main-content class or container id on the document.

This will be expanded below. I'll add the full list and explanation of each selector below, after all basics.

Cascading Order

If different styles are specified for HTML elements, the styles will cascade into new styles with the following priority:

1. Priority 1: Inline styles using style attribute.
2. Priority 2: Internal and external style sheets.
3. Priority 3: Browser default
4. If different styles are defined on the same priority level, the last one has the highest priority.*

This does not mean that the last you type with same priority will be applied, if it's chunked into different stylesheets, then the order you link them to your html also is not the loading order.
"The last one with highest priority" means specifically the last one rendered by the browser.

OK this is the basis, but there's much more to know about CSS priorities:

The most important thing, that is strong enough to override base priorities listed above is the SPECIFICITY. You can create a selector more specific or less specific, let's see some examples:

On a given html like this:

<div id="main-content" class="container">
  <div class="header">
     <p> TITLE </p>
  </div>
  <div class="section1">
    <p> TEXT CONTENT </p>
  </div>
</div>

The following CSS rules will apply to the same element:

#main-content.container { background: green; }
#main-content { background: red; }
.container { background: blue; }

So which background color will our <div id="main-content class="container"> take?

It will be blue because is the last one? NO, it will be green because it's more specific.
We are selecting elements with id="main-content" which have class="container" too, not only each separately.

OK and... what if I want it yellow but can't edit this CSS rules because I'm on a big project and this could break something else?

Be more specific!

div#main-content.container { background: yellow; }

Now we are selecting specifically a <div> HTML tag which has an id attribute with main-content as value, and which also has a class html attribute with container as value.

Ok but there's no more to take for being more specific. What about if I'm in this situation and I need it to be white?

div#main-content.container { background: white !important; }

!important

this is a big double edged Katana from a big japanese war robot, take care with !importants, please.

Using important statement will make your rule hard or impossible to override. This means that if you are on a company with the hands on a project and you use it, you may be blocking a mate for overriding your styles on a design change. Moreover you may be blocking yourself from the future for being able to override it, so please, take care for not having to hate the "me" from the past.

You can add priority selecting items that are inside other items from html tag to the tag you need.

Child Selectors

Or Nesting Selectors are a whitespace, that matches with all childs (described) of a (described) element ( div#main p.bold will match all <p class="bold"> that are directly or indirectly inside the <div id="main">) and > which matches direct childs ( div#main>p.bold will match any <p class="bold"> that is a direct child of the <div id="main">).

For example:

 html>body>div#main-content p { font-weight: bold; }

This will select all <p> tags that are inside (no matter the level) a <div id="main-content"> which is directly inside the body html tag, which are directly inside the html tag (in fact, body will be always a direct child of html).

So ALL <p> tags in this following snippet will be selected (and it's font will be bolded):

<html>
  <head>
    <title> My Example </title>
  </head>
  <body>
    <div id="main-content">
      <p> lorem ipsum </p>
      <div class="content-block">
        <p> dolor sit amet </p>
      </div>
    </div>
  </body>
</html>

CSS Combinators List:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
• wildcard selector (*)

Tag selectors

Tags selectors are easy to understand, simply type the same tag you want to match. For example, for matching all p tags (no matter their location inside the structure):

 p { font-family: 'Ubuntu', sans-serif; }

Attribute selectors:

You can match attribute and attribute-value pair too.
This CSS:

  [data-action="expand"] { background: goldenrod; }
  [href="https://google.es"] { font-weight: bold; color: white; }

will match the following html:

 <div data-action="expand">
    <a href="https://google.es"> Go to google </a>
 </div>

Pseudo-selectors

pseudo is a prefix that means "pretended and not real", so why they're called pseudo-selectors?

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree (DOM).

• Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).
• Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are :first-child (and another child and type pseudo selectors), which can be deduced from the document tree, and :lang(), which can be deduced from the document tree in some cases.

So basically, a pseudo-class is something you can attach a style to, but you never print it out in the HTML by your own. Also, a pseudo-class can be acquired and lost depending on user interaction with the UI.

Pseudo Classes List:

Source

Pseudo Elements List

CSS3 Properties List

- Categorized. Alphabetically ordered -

Animation Properties

Background Properties

Border Properties

Color properties:

Dimension properties:

Generated Content properties:

Flexible Box Layout:

Font Properties:

Grid Layout Properties:

List Properties:

Margin Properties:

Multi-column Layout Properties:

Outline Properties:

Padding Properties:

Print Properties:

Table Properties:

Text Properties:

Transform Properties:

Transtition Properties:

Visual Formatting Properties:

Other Properties:

CSS3 At-Rules:

source

Comments on CSS:

In HTML you can comment texts using <!-- comment -->

In CSS or SCSS you can comment using slash + asterisk (and asterisk + slash for closure) for multi-line comments like:

/* 
multi 

line

comment
*/

// single line comment
#main-content.container { background: green; }
#main-content { background: red; }
// .container { background: blue; }

Vendor prefix / Property Prefixing:

So from the perspective of a front-end web developer, browser prefixes are used to add new CSS features onto a site while having comfort knowing that the browsers will support those styles. This can be especially helpful when different browser manufacturers implement properties in slightly different ways or with a different syntax.

The CSS browser prefixes that you can use (each of which is specific to a different browser) are:

In most cases, to use a brand new CSS style property, you take the standard CSS property and add the prefix for each browser. The prefixed versions would always come first (in any order you prefer) while the normal CSS property will come last. For example, if you want to add a CSS3 transition to your document, you would use the transition property as shown below:

-webkit-transition: all 4s ease;

-moz-transition: all 4s ease;

-ms-transition: all 4s ease;

-o-transition: all 4s ease;

transition: all 4s ease;

Remember, some browsers have a different syntax for certain properties than others do, so don’t assume that the browser-prefixed version of a property is exactly the same as the standard property. For example, to create a CSS gradient, you use the linear-gradient property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix while early versions of Chrome and Safari use the prefixed property -webkit-gradient.

Also, Firefox uses different values than the standard ones.

The reason that you always end your declaration with the normal, non-prefixed version of the CSS property is so that when a browser does support the rule, it will use that one. Remember how CSS is read. The later rules take precedence over earlier ones if the specificity is the same, so a browser would read the vendor version of a rule and use that if it does not support the normal one, but once it does, it will override the vendor version with the actual CSS rule.

CSS Properties Synergy:

It's near impossible for me to create a full doc about all css synergies, but I am obliged to notify you about this. For many reasons:

• Possible unexpected behavior
• Ways to reach things not defined by single properties or not working inside some layout.

For example, you can set this properties into a div HTML element: max-width: 600px; margin: 0 auto; and it will be centered on the screen, occupying 600px as maximum.

We didn't set align-self: center, nor justif-content or other centering property or value, but setting the x-axis margin to auto jointly with max-width property (when the window is bigger than 600px, obviously) will make the div show centered respectively to the screen.

Of course you can reach the same setting a parent div with display: flex; justify-content: center; and then a child div with max-width: 600px;

There's a logic between the apparent chaos you may found after reading this last paragraph, simply think on what properties do:

• max-width: 600px; Limits the width of an element to 600px.
• By default all items are positioned "top: 0; left: 0;" so it will start from left: 0; to left: 600;
• Margin specifies the distance between objects, setting margin: 0 auto; means that we want no margin on Y-axis but we want X-axis margin for being auto, that means, read the available free space, divide it by 2 and set each half on each side of the element. Of course, this causes the item centering.

So don't worry about synergies, when you find one simply try to understand why it's working that way and you'll learn fast.

Advice:

There are tones of properties I'm adding step by step. Some of them are not standard or not allowed by all browsers. Sometimes you'll find a workaround such prefixing the property or using javascript to reach the DOM property (if any).

I highly recommend you to search the properties you are going to use on can I use . If you don't find what you want here then search for the property on mdn.

If you are going to build something that works on chrome it's OK because it usually can use almost all properties, but if you need compatibility or retro-compatibility with old browsers, you'll need to search this property compatibility more accurately.

Examples:

I'm posting some posts about building interactive components using CSS that you may find useful, you can take a look at the posts here:

1. Building CSS Only interactive components from scratch PART 1
2. Building CSS Only interactive components from scratch PART 2
3. Building CSS Only interactive components from scratch PART 3

I'll add more content here to increase the informative content wrapped on a single post, like units, color formats and so on.

Hope you find all that useful and if you have any question please leave a comment and share :)

EDIT / Changelog

• Added more than 40 properties, each with its description.
• Added Grid Layout Properties block.
• Added Other Properties block.
• Added prefixing documentation.
• Added advice, specially for newbies.
• Added external sources.
• Added css properties synergy explanation.
• Corrections about comments

Best regards