Comprehensive CSS Basics For Beginners

We are continuing with our series on Comprehensive CSS Basics for beginners. This is our third summary and I welcome you to be part of it. If you have not seen our previous summary, then fell free to go through them.

So, without further a do, Lets get right into it.

1. Attribute selector

Sometimes you have elements that contains attributes. The attribute can as well be used to select particular elements. Think of it as another form of class.

For such an element

<div data-title="intro">Introduction to JS</div>

The css would look like this.

[data-title] {
font-weight:bold
}
a[data-title *='in'] {
background:blue
}

[data-title $= '.svg'] {
background:red
}

a[class~='image'] {
color:blue
}

2. Transition Duration

It sets the time it takes for an element to change from one state to another.

.class {
transition-duration:500ms;
background:blue;

}

3. Transition Property

Propery simply tells the browser the css property that is changing state.

.box {
transition-propery: background; //it could be all, width, etc
}

4. Transition Timing Function

.box { transition-timing-function:ease in // it could be linear, ease-in-out, etc }

5. Transition Delay

It sets the time it should wait before beginning the transition process.

.box {
transition-delay:2s;
}

6. Transition shorthand

This is a property to help you combine all of the different transition properties syntax: transition: duration property timing

.box {
transition: 1s background ease-in
}

CONCLUSION

That is it for today, We are working on preparing a video for this series. Should you be interested, Please let me know in the comments section. Thanks.

Comprehensive CSS Basics For Beginners:summary 03