Topic

CSS Selectors

A CSS  selector is used to select an HTML elements for styling.

body{

color: red;            This is declaration – (property:value)

background: pink;

}

Note: ‘body’ is a selector.

Element Selectors

It is used to select an element based upon the tag name.

h2{

color: blue;

}

Id Selectors

It is used to select an element with the Id.

#first{

color: white;

background: black; 

}  

Note: # is used to target by Id.

Class Selectors

It is used to select an element with a given class for example:

.red{

Background: red;

}

We can group selectors like this:

h1, h2, h3, h4 div{

color: blue;   h1, h2, h3, h4 and div will be blue.

}

*  is the universal selector. Which means this will select all the elements.

Colors & Backgrounds

The Color Property

The color property can be used to set the text color inside an element.

RGB – Specifies color using Red, Green, Blue values rgb(200, 98, 70)

HEX – Specifies the color using hex code (#123333)

HSL – Specifies the color using HSL (hue, saturation and lightning) (22, 90%, 22%)

The background-size properties

Cover – Firs and no empty space is left.

Auto – Display in original size.

Contain – Fits & image is fully visible.

Width – You can also specify the width manually. 

Background image

Used to set an image as the background.

body{

background-image: url(“lecturely.png)

} 

This will set background image.

Background size

It can be auto, cover or you can manually give the size in px.

Note: Cover means image will cover the entire div.

Background repeat

This CSS property will repeat the image in image depending on the property value.

Borders

Border width

This will describe border’s width.

Border-style 

This will style the border i.e. dotted, solid or none.

Border-color

This will change the border color.

Box Model

Height

This will set the height.

max-height.

This will set the maximum height.

max-width

This will set the maximum width.

min-height

This will set the minimum height.

min-width

This will set the minimum width.

Padding

Padding-bottom

Sets the bottom padding.

Padding-top

Sets the top padding.

Padding-right

Sets the bottom padding.

Padding-left

Sets the left padding.

Overflow-x

This will make this overflow based on its values. 

Visibility

This will deal with the visibility of the text.

List & Markers

list-style-none

This will style your list, can be none or asterisk based on its value.

list-style-image

Instead of asterisk, you can also set an image using this CSS property.

Animations

animation-name

This will set the animation name.

animation-duration

used to set animation time.

animation-timing-function

This will set the animation, like transition and effect of animation. Either can be ease, or ease-in based on its value.

animation-delay

This will set the amount of time to wait before applying the animation.

animation-play-state

This will either be paused or running the animation.

Pseudo-Class

:active

It is the active element. 

:focus

It is the element in focus.

:link

It is the unvisited link.

:enabled

It is an element which is enabled.

:active

It is an element which is disabled.

:hover

It is an element when you hover your mouse over it.

:checked

When the element is checked.

:nth-of-type(n)

The element which is nth sibling.

:nth-last-child(n)

It is the element which is the nth sibling counting from the last sibling.

:first-child

first sibling.

:last-child

Last sibling.

:first-of-type

First sibling of its type.

:last-of-type

This is the last sibling of its type.

:empty

Element with no children.

:root

This is the root element of the document.

::first-letter

This adds special style to the first letter of an text.

::first-line

This adds special style to the first line of any text.

::before

This inserts some content before an element.

::after 

This inserts some content after an element.

Relative Measurements OR CSS Units

px

(pixels) This is the pixel of the device.

gd

It is grid defined by layout-grid

em

This is the font-size of current element.

rem 

font size of root element.

vh

This is the viewport height.

vw

This is the viewport width.