CSS example

* {
color: blue; /*a comment */
margin: 10px;
font: 14px Tahoma;
}

This will change all the tags in my web ( ‘*‘ means all) to look blue with font Tahoma with
14px, and leaving a margin of 10px around.
CSS fields
Here is a list of the most common CSS fields and an example:
● color: #FF0000; red; rgba(255,00,100,1.0); //different ways to specify colors
● background-color: red;
● background-image: url('file.png');
● font: 18px 'Tahoma';
● border: 2px solid black;
● border-top: 2px solid red;
● border-radius: 2px; //to remove corners and make them more round
● margin: 10px; //distance from the border to the outer elements
● padding: 2px; //distance from the border to the inner elements
● width: 100%; 300px; 1.3em; //many different ways to specify distances
● height: 200px;
● text-align: center;
● box-shadow: 3px 3px 5px black;
● cursor: pointer;
● display: inline-block;
● overflow: hidden;
CSS how to add it
There are four ways to add CSS rules to your website:

● Inserting the code inside a style tag

<style>
p { color: blue }
</style>
● Referencing an external CSS file
<link href="style.css" rel="stylesheet" />
● Using the attribute style on a tag
<p style="color: blue; margin: 10px">
● Using Javascript (we will see this one later).
CSS selectors
Let's start by changing the background color of one tag of our website:

div {
background-color: red;
}

This CSS rule means that every tag DIV found in our website should have a red background
color. Remember that DIVs are used mostly to represent areas of our website.

We could also change the whole website background by affecting the tag body:

body {
background-color: red;
}
CSS selectors
What if we want to change one specific tag (not all the tags of the same type).

We can specify more precise selectors besides the name of the tag. For instance, by class
or id. To specify a tag with a given class name, we use the dot:

p.intro {
color: red;
}

This will affect only the tags p with class name intro:

<p class="intro">
CSS Selectors
There are several selectors we can use to narrow our rules to very specific tags of our website.

The main selectors are:

● tag name: just the name of the tag

○ p { ... } //affects to all <p> tags
● dot (.): affects to tags with that class
○ p.highlight { ... } //affects all <p> tags with class="highlight"
● sharp character (#): specifies tags with that id
○ p#intro { ... } //affects to the <p> tag with the id="intro"
● two dots (:): behaviour states (mouse on top)
○ p:hover { ... } //affects to <p> tags with the mouse over
● brackets ([attr='value']): tags with the attribute attr with the value 'value'
○ input[type="text"] {...} // affects to the input tags of the type text
CSS Selectors
You can also specify tags by its context, for example: tags that are inside of tags matching a
selector. Just separate the selectors by an space:

div#main p.intro { ... }

This will affect to the p tags of class intro that are inside the tag div of id main

<div id="main">
<p class="intro">....</p> ← Affects this one
</div>

<p class="intro">....</p> ← but not this one

CSS Selectors
And you can combine selectors to narrow it down more.

div#main.intro:hover { ... }

will apply the CSS to the any tag div with id main and class intro if the mouse is over.

And you do not need to specify a tag, you can use the class or id selectors without tag, this
means it will affect to any node of id main

#main { ... }
CSS Selectors
If you want to select only elements that are direct child of one element (not that have an
ancestor with that rule), use the > character:

ul.menu > li { ... }

Finally, if you want to use the same CSS actions to several selectors, you can use the
comma , character:

div, p { … } ← this will apply to all divs and p tags

HTML arrange
It is important to understand how the browser
arranges the elements on the screen.

Check this tutorial where it explains the

different ways an element can be arranged
on the screen.

You can change the way elements are

arranged using the display property:

div { display: inline-block; }

Also check the property float.

Box Model
It is important to note that by default any
width and height specified to an element will
not take into account its margin, so a div with
width 100px and margin 10px will measure
120px on the screen, not 100px.

This could be a problem breaking your

layout.

You can change this behaviour changing the

box model of the element so the width uses
the outmost border:

div { box-sizing: border; }

Layout
One of the hardest parts of CSS is
construing the layout of your website (the
structure inside the window) .

By default HTML tends to put everything in

one column, which is not ideal.

There has been many proposals in CSS to

address this issue (tables, fixed divs, flex,
grid, …).
Flexbox
The first big proposal to address the layout
was the flexbox model.

This model allows to arrange stuff in one HTML

direction (vertically or horizontally) very <div class="box">
easily. <div>One</div>
<div>Two</div>
<div>Three
You can even choose to arrange from right <br>first line
<br>second line
to left (reverse). </div>
</div>

It can also be used to arrange a series of

CSS
elements in different rows.
.box {
Check the tutorial for more info. display: flex;
}
 HTML
Grid system <div class="grid-container">
<div class="grid-item1">1</div>
Because most sites are structured in a grid, I <div class="grid-item2">2</div>
recommend to use the CSS Grid system. </div>

We just assign how many rows/columns a div

CSS
should use from the main grid and it will arrange
automatically. .grid-container {
display: grid;
grid-template-rows: 100px 100px;
Check this tutorial to create the site structure grid-template-columns: 100px 100px 100px;
easily grid-gap: 5px;
}

.grid-item1 {
background: blue;
border: black 5px solid;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
 CSS
Fullscreen divs html, body {
width: 100%;
height: 100%;
Sometimes we want to have a div that covers }
the whole screen (to make a webapp),
div {
instead of a scrolling website (more like margin: 0;
regular documents). padding: 0;
}

In that case remember to use percentages to #main {

width: 100%;
define the size of elements, but keep in mind height: 100%;
that percentages are relative to the element's }
parent size, so you must set the size to the
<body> and <html> element to use 100%.
Trick to center

Centering divs can be hard sometimes, use this trick:

.horizontal-and-vertical-centering {
display: flex;
justify-content: center;
align-items: center;
}
CSS further reading
There are many more rules for selectors.

Check some of the links to understand them better.

One line layouts tutorials

Understanding the Box Model: a good explanation of how to position the information on your
document.

All CSS Selectors: the CSS selectors specification page.

CSS Transition: how to make animations just using CSS

TailwindCSS: a CSS Framework