CSS Basics Tutorial

Also on youtube https://www.youtube.com/watch?v=om_kHQnJuJ0&t=10s

CSS Course - 3: A bit deeper into CSS

• The Box Model
• Height & Width
• The "display" Property
• Properties worth to remember
• Pseudo classes & elements

CSS Box Model

Margin

   border

      padding

         content

• The Box Model
• Height & Width
• The "display" Property
• Properties worth to remember
• Pseudo classes & elements

CSS Box Model

Margin

   border

      padding

         content

Margin Collapsing - Bigger Margin “wins”

In general: Use either margin-top or margin-bottom

Shorthand Properties - Combine values of multiple properties in a single property (the shorthand property)

Example: 

border-width: 2px;

border-style: dashed | solid

border-color: orange

Shorthand property:

border: 2px dashed orange

margin: 5px 10px 5px 10px;  // top right bottom left

margin: 5px 10px; //top & bottom;  left & right

margin: 10px; //all sides

Height & Width properties

Block element default to 100% width

box-sizing: content-box (default) |border-box

Display Property

Display: none|block|inline|inline-block

Pseudo Classes & Pseudo Elements

Pseudo class - Defines the style of a special state of an element, eg: hover, active

Pseudo element - Defines the style of a specific part of an element, eg: ::after, ::selection, ::first-line

Check MDN standard pseudo-classes

Properties Worth to Remember

color:

background-color:

display:

padding:

border:

margin:

width:

height:

CSS Course - 2: Understanding the Basic

• How to add CSS to HTML
• Setting up CSS rules
• Selectors, Properties & Values
• Conflicting Styles

How to add CSS to HTML, 3 approaches

1. Inline styling

<body>
    <main>
        <section style="background:#ff1b68">
            <h1>Welcome to shuyanonline.com</h1>
        </section>
    </main>
</body>

2. CSS rules

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

section{

background:#ff1b68;

}

</style>

</head>

<body>

<main>

<section>

<h1>Welcome to shuyanonline.com</h1>

</section>

</main>

</body>

3. use external style sheets

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>CSS course</title>

<link rel="stylesheet" href="main.css">

</head>

<body>

<main>

<section>

<h1>Welcome to ShuyanOnline.com</h1>

</section>

<section>

<h1>Chose your course</h1>

</section>

</main>

</body>

</html>

main.css

section{

background: #ff1b68;

}

h1 {

color: white;

font-family: 'Anton', sans-serif;

}

More about selectors

Elements - Set equal style for these element

h1 {

color: white;

font-family: 'Anton', sans-serif;

}

Classes - Set equal style for elements within the same class

.post {

color: red;

}

Universal - Rarely use this one!

* {

color: red;

}

IDs - Set style to one specific element

#my-title {

color: red;

}

Attributes - Set equal styles to all elements with attributes

index.html

<button disabled>

Click

</button>

main.css

[disabled] {

color: red;

}

Notes: ID must be unique, classes can be reused.

Cascading Style Sheets & Specificity

Cascading - Multiple Rules can apply to the same element

Specificity - Resolve conflicts arising from multiple rules

priority from high to low:

Inline styles  》 #ID selectors 》 .class, :pseudo-class and [attribute] selectors 》 <tag> and ::pseudo-element selectors 

Inheritance

An element inheritance some styles from the parent element

font-family: inherit;

Combinators

• Adjacent sibling (elements share the same parent; second element comes immediately after first element)

div + p {

}

• General sibling (elements share the same parent; second element comes after first element)

div ~ p {

}

• Child (second element is a direct child of first element)

div > p {

}

• Descendant (second element is a descendant of the first element)

div p {

}

Summary:

• CSS works with Rules
• Different Types of Selectors
• Properties & Values
• Long list of available properties and values
• Check MDN or comparable references
• Different type of values, depending on properties
• Selectors with Combinators
• Inheritance & Specifity
• Parent styles are generally inherited
• Multiple rules can apply to one element
• Specifity resolves "multiple rules" conflicts
• Inheritance defaults can be changed

(Over.)

CSS Course - 1: Course overview

Course outline:

Basic:

Getting Started -> The Basics -> Diving Deeper -> Selectors & CSS Features -> Practicing the Basics -> Positioning

Advanced:

Backgrounds & Images -> Dimensions, Units & Sizes -> JavaScript & CSS -> Responsiveness -> Styling Forms -> Working with Text & Fonts

Expert: 

Flexbox -> CSS Grid -> Transformations -> Transitions & Animations -> Writing Future-Proof CSS->Sass Introduction

Course Prerequisites:

Basic Web Dev & HTML Knowledge

How to get the Most out of the course

• Attend classes, lectures
• Code along & do exercises
• Debug errors

Tools used in this course

• Visual Studio Code (download at code.visualstudio.com)
• Chrome browser

React: Using Ref

class Person extends Component {
    constructor(props) {
        super(props);
        this.inputElementRef = React.createRef();
    }

}

componentDidMount() {
    this.inputElement.current.focus();
    //old approach
    // this.inputElement.focus();
}

render() {
    ...
    <input
      key="k1"
      // old approach
     // ref={(inputEl)=>{this.inputEleemnt=inputEl}}
      ref={this.inputElementRef}
      type="text"
    ...
}

React: Best practice to setState when setting the value based on previous state

There is another interface to sue

this.setState( (prevState,props)=>{
    return {
        posts: posts,
        counter: prevState.counter + 1
    }
});

How to clear npm config

echo "" > $(npm config get userconfig)