Introduction to this Notebook

I like to take notes about the things I'm learning. This helps me to retain things better, in addition to creating a "search" tool to go back and remember or consult something.

I hope my notes can help you too.
css

The CSS
  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, 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
-W3Schools
Methods to add CSS in HTML

There are 3 methods to add the CSS style to your HTML. In priority order:

  1. inline
  2. internal
  3. external
  4. browser default

This priority means that one method will be override for the other with a highest priority.

The external method is most recommended. The main reason is that it makes your code easier to maintain and has some performance considerations.

Inline

Included inside the HTML element as attributes. It's very hard to maintain and edit. Example:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<h1 style="color: blue;">Example</h1>
</body>
</html>
Internal

The CSS will be included in the HTML file using <style> tag included in the <head> tag. This method will apply the CSS style to only this HTML page.
Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<style>
 h1 {
  color: blue;
 ;}
</style>
</head>
<body>
<h1>Example</h1>
</body>
</html>
External

(The most recommended)

Separate file (.css) linked/refereced in the <head> tag.

Insert a <link> tag in the <head> tag href need to have the name of your css file:

<link rel="stylesheet" type="text/css" href="main.css"/>

Example:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Page Title</title>
 <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
 Example
</body>
</html>
Sintax

The CSS sintax look like this:

selector {
property: value;
property: value;
property: value;
}

We will see more about selectors, properties and values later.

CSS Comments

The CSS comments look like this:

/* This is a inline comment */

/* This is a multiple lines comment
 selector {
  property: value;
  property: value;
  property: value;
 } */
Selectors

Selectors are used to select and reference HTML elements based on their name, attribute, class, or ID, for example.

Selectors name convention

Every time you name a CSS selector, try using descriptive names that mean something about them.

You can use dashes (-) or underscores (_) in the name to separate words: this-is-a-name {}

CSS Type Selectors

See w3Schools CSS Selector Reference to a complete reference.

HTML element selector

Use the HTML element's names as a selector.
Example: h1, h2, h3, p, body.

CSS file will look like this:

h1 {
 color: green;
}
p {
 color: red;
}
ID and class selector

You name the IDs and classes in the HTML file (with names that mean something about them) and "call" them, using # for IDs and . for classes.

Classes can be used many times in the same HTML, but IDs do not.

Think of using classes to assign the same style to related elements that must have the same style and IDs to add style to something more specific.

For example, all citations will have the same style on the page, so we use classes, but a submit button should have its own style that does not repeat itself.

  • The same HTML element can have both an ID and a Class
    • <h1 id="idname" class="classname">Text</h1>
  • You can assign more than one ID or Class to an HTML element just by separating them with a space:
    • <h1 id="idname other-idname">Text</h1>

    Example:
    HTML file will look like this:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    </head>
    <body>
    <h1>Examples</h1>
    <p> Text wihtout style
    </p>
    <p id="idname"> Stylized text referenced by a ID
    </p>
    <p class="classname"> Stylized text referenced by a class
    </p>
    </body>
    </html>

    CSS file will look like this:


    #idname {
     color: green;
    }

    .classname {
     color: red;
    }
Atribute Selectors

Sometimes, you may need to use extra information in the selector, as an attribute.

The syntax has this format:

[attribute-name]

or

[atribute-name=value]

Example: On a form page, I need only the checkbox items and their labels to be aligned inline.

input[type=checkbox] + label {
 display: inline;
}
Advanced Tips with Selectors
Element affected by a class

Sintax (The element name + . + the class name, without space between):

elementName.className {
 property: value;
}

Imagine the example below:

HTML:

<h1 class="blue">This TITLE will be blue</h1>

<h1>This TITLE will NOT be blue</h1>

CSS:

h1.blue {
 color: blue;
}

In this example, only the <h1> that has the blue class will have this CSS style applied.

Grouping Selectors

You can apply the same style to multiple items (only if they have the same style) by grouping and separating with a comma (,).

Example. Assuming that h1, h2, .someClass have exactly the same style:


h1, h2, .someClass {
 color: blue;
}
Same style to multiple classes

Sintax:


.className.otherClass {
 property: value;
}

Example: Assuming that classes name, middleName and lastName have exactly the same style:


.name.middleName.lastName {
 color: blue;
}
Using descendant selectors

Here is an example of nested descendant selectors:

<div class="ancestor>
 <div class="parent>
 <div class="child"></div>
 <div class="descendant"></div>
 </div>
</div>

CSS combinators:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector
  • General sibling selector (~)

Here is a table summarized by W3Schools:

Selector Example Description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

Use a combination of:

  • parent child
  • ancestor descendant

Using this example, we can see below how to use a combination of descending selectors (separated by a space).

In this case, only the <li> items that are nested in the #navbar ID will have this CSS style applied:

#navbar li {
 list-style-type: none;
 color: #0E303F;
}