CSS TUTORIAL

(Source: https://www.youtube.com/watch?v=c9B4TPnak1A&t=1268s)

• CSS selections

• CSS selections combinator

• CSS display

• CSS Attributes

Generic CSS and Atom notes

• when we create a class , we can "shorten" its name by adding an "*" to the class name. by doing that we will enable a regular expression maching fro all the objects that matches that class name

• So, a class defined like: class*="con" will match an entity like this: <p class="container" >

• A quick way to add a new class is to enter a '.' and then the class name. So, '.container' will ad a new div with class container instance

CSS

CSS selections

This is the source I checked

ITEMS SELECTED

SYNTAX

Selecting by TYPE

Use an element' HTML tag (p, table, a, etc) type to select all the elements matching that value

Selecting by ID

Use # to select an element using it's ID value

Selecting by CLASS

Use . to select an element using it's CLASS value

Selecting all (default values)

Use * to select all the elements of the document,. this can be used as a default valur or "reset"

CSS Selection Combinators

This is the source I checked

In order to select multiple elements on screen, we can simply separate them by commas. So:

p, table, button {.... }

will select all of the paragraphs, tables and buttons on the screen, regardless of their hyerarchical relationship.

If what we want to do is select elements that are nested within each other (even if they are not in adjacent levels), we will separate them using whitespaces. So, similarly to the previous example:

#elementID table button {.... }

would select the button that is inside the table of the element with the id "elementID" (whatever element that might be)

If what we want to do is select elements that are directly under an elements level we will separate them using ">" symbol. So, similarly to the previous example:

#elementID > table button {.... }

Finally, if what we want to do id select all the elements that come (in the document, not hyerarchically) right after a given one, we can use the "+" symbol

If what we want to do is select elements that are directly under an elements level we will separate them using ">" symbol. So, similarly to the previous example:

#elementID + table{.... }

Will select the table that is coded right after the element with element ID "elementID"

CSS Display

we can use these types of visualizations for CSS elements

• Inline: an inline element will only take the space take by its content, regardless how large the screen is. Consequently, inline element will line up in the same line when possible. Elements that are inline by default are: a, img, buttons, etc. See the full list here

• Block: a block element takes wthe full width of the screen, even when it is resized. Elements that are block by default are: divs, tables, footer, forms, headers, etc. See the full list here

If we want to remove an item from screen, and also free the space that it occupies, we wili use the property display and set it to none. If we want to remove an item, but keeping the real state, we will simply set the visibility property to hidden.

CSS Attributes

(source) Let's start with these three simple fields of a form:

we can select all the elements based on an attibute name (and not the value)

input [type] { border:2px solid orangered; }

will apply to the borders of all three input elements, because all of them have an attributte called "type" (regardless of its value)

In order to apply the changes to a specific type of input, we can specify the type of input that we want to apply the changes:

input [type="text"] { background-color:blue; }

The change above will only be applied to the text type of input

We can also apply some simple regular expressions. So, if we want to select some styling to some elements that have a field called "title" whose value starts with "t-", we can do it with the following code:

input [type^="t-"] { background-color:grey; }