1) css basics

a. inline,internal,external css

https://www.javatpoint.com/inline-css

https://www.javatpoint.com/internal-css

https://www.javatpoint.com/external-css

b. Type selectors

https://www.javatpoint.com/css-selector

2) the world of css colors

a. background-color

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

b. <named-color>

https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

c. rgb

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

d. Hex color

https://www.w3schools.com/colors/colors_hexadecimal.asp

e. RGBA and opacity

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

f. Inheritance

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

g. Exercise:

https://codepen.io/Colt/pen/BaPVGKa

solution:

https://codepen.io/Colt/details/eYjjJXa

3) Styling text

a. Font-family

font-family property is used to specify the font of a text.

.para {
    font-family: 'sans-serif', 'Ubuntu';
}

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

b. Font-size

font-size property is used to specify the size of the text.

.para {
    font-size: 20px;
}

c. font-weight

The font-weight CSS property sets the weight (or boldness) of the font.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

d. font-style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique

https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

e. Text-align

The text-align property is used to set the alignment of a text. We can align a text in the left, right, center, and justify.

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
}

div.c {
  text-align: justify;
}

f. line-height

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.

div.a {
  line-height: normal;
}

div.b {
  line-height: 1.6;
}

div.c {
  line-height: 80%;
}

div.d {
  line-height: 200%;
}

output:

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

g.letter-spacing

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

h. word-spacing

https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

i. styling text exercise

exercise: https://codepen.io/Colt/pen/LYBBPBO

solution: https://codepen.io/Colt/pen/QWBByeZ

j. text-shadow

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

4) More text Styling

a. Text Transform

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

b. Text-Decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

go through all text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness

c. ID selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

d. class selector

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

e.list-style-type

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

list-style-type:none;

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

https://www.w3schools.com/cssref/tryit.php?filename=trycss_list-style-type_ex

f.list-style-position

https://www.w3schools.com/cssref/pr_list-style-position.php#:~:text=The%20list%2Dstyle%2Dposition%20property,Tea

g.cursor

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

h. :hover

The :hover selector is used to select elements when you mouse over them.

https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_hover

i. :visited

https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_visited

j. font shorthand

https://developer.mozilla.org/en-US/docs/Web/CSS/font

k. Exercise

https://codepen.io/Colt/pen/YzjvXLj

solution: https://codepen.io/Colt/pen/gOjKpzq

5) Selectors Part 1

a. Universal selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

https://www.w3schools.in/css3/universal-selector

b. Attribute Selectors

The [attribute] selector is used to select elements with a specified attribute.

https://www.w3schools.com/css/css_attribute_selectors.asp

c. Selector List

https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list

d. Descendant & Child Combinators

1. Descendant Combinator:

https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_element

2. Child Combinator

https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_gt

3. Compound Selectors

e. Css selectors Exercise

Exercise: https://codepen.io/Colt/pen/rNrrBoW

Solution: https://codepen.io/Colt/pen/JjBBBWL

6) The Box Model

a. Introducing The Box Model

b. Borders

The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.

Border Width

border-style

border-color

https://developer.mozilla.org/en-US/docs/Web/CSS/border

c. Width, Height, and Percentages

width: https://developer.mozilla.org/en-US/docs/Web/CSS/width

height: https://developer.mozilla.org/en-US/docs/Web/CSS/height

percentage: https://developer.mozilla.org/en-US/docs/Web/CSS/percentage

d. padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

e. Margin

The margin CSS property sets the margin area on all four sides of an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

f. Box-sizing

The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

https://www.w3schools.com/css/css3_box-sizing.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

g. Display-inline,block,inline-block

Block:

Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width

Inline:

Displays an element as an inline element (like <span>). Any height and width properties will have no effect

inline-block:

f. Display : none

g. Negative Margin & Margin Auto

h. margin collapse

https://www.w3schools.com/css/css_margin_collapse.asp

i. Container Pattern

instead of adding margins to all individually we can add all at a time by adding them to div

j. min-width and max-width

https://www.w3schools.com/cssref/pr_dim_min-width.php

https://www.w3schools.com/cssref/pr_dim_max-width.php

k. border-radius

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

l. box-shadow

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

https://cssgenerator.org/box-shadow-css-generator.html

m. overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

n. exercise

exercise: https://codepen.io/shajahanshaik/pen/abRLObK

7) selectors part 2

a. Adjacent, Sibling Combinator

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

b. pseudo-classes

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

c. pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

d. exercise selectors part2

exercise: https://codepen.io/Colt/pen/gOjjKQd

solution : https://codepen.io/Colt/pen/qByyypy

e.specificity

8) CSS Units

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

a.percentages

b. rem

https://www.w3schools.com/cssref/tryit.php?filename=trycss_unit_rem

c.em

https://www.w3schools.com/cssref/tryit.php?filename=trycss_unit_em

d. vw and vh

e. float

https://developer.mozilla.org/en-US/docs/Web/CSS/float

9) Backgrounds, Gradients, & Filters

a. background-image

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

b. background-repeat

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

https://css-tricks.com/almanac/properties/b/background-repeat/

c. background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

d. background-position

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

e. background-clip

https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background-clip

f.exercise

exercise: https://codepen.io/Colt/pen/BaPOWQz

solution: https://codepen.io/Colt/details/wvxEJgo

g. linear-gradient, conic-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient

g. background short-hand

https://developer.mozilla.org/en-US/docs/Web/CSS/background

h. filter

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

10) Positioning

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

a. position: static

b.position-relative

c. z-index

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

d. position: absolute

https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative/

with just relative without using absolute

button {
    background-color: blue;
    padding: 15px 15px;
   color:white;
   font-weight: 700;  
   font-size: 12px; 
   border-radius: 15px;
   border: 2px solid white;
}
button span{
    border: 2px solid white;
    border-radius: 50%;
    padding: 5px;
    background-color: green;
    position: relative;
    bottom: 20px;
    left: 20px;
}

when we use relative it takes up space so we go more gap after messages

but when we position: absolute relative to the parent element position: relative it will remove the gap and fix it

button {
    background-color: blue;
    padding: 15px 15px;
   color:white;
   font-weight: 700;  
   font-size: 12px; 
   border-radius: 15px;
   border: 2px solid white;
   position: relative;
}
button span{
    border: 2px solid white;
    border-radius: 50%;
    padding: 5px;
    background-color: green;
    position: absolute;
    top: -10px;
  right: -9px;
}

e.position: fixed

f. positioning exercise

exercise 1: https://codepen.io/Colt/pen/xxJaqJN

sol: https://codepen.io/Colt/pen/VwBGpGL

exercise 2: https://codepen.io/Colt/pen/mdjGmWM

sol: https://codepen.io/Colt/pen/YzjOVNZ

exercise 3: https://codepen.io/Colt/pen/mdjGwyj

sol : https://codepen.io/Colt/pen/yLqxXyN

9) Transitions and Transformations

we have to use transition on button itself not on hover because in hover when we remove mouse from button transition effect will not show

example for transition on button

button {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
  }

  button:hover {
    width: 300px;
  }

now when we remove mouse from button it will still work, but when we use it on hover element when we remove mouse from button effect wont work

button {
    width: 100px;
    height: 100px;
    background: red;

  }

  button:hover {
    width: 300px;
    transition: width 2s;
  }

a.multiple transitions

we do it by separating by comma

transition: color 3s, background-color 1s;

10)Flexbox

a.flex-direction

By default flex direction is set to row

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

b. Flexbox Exercise 1

exercise: https://codepen.io/Colt/pen/xxJRrQw?editors=1100

make it as column

and row reverse

c. flex-wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

d. Justify-Content

justify-content:flex-start is default

when we are doing with flex direction reverse the directions are gonna be different

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

e.align items

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

By default align-items is stretch all the content is stretch by default if we dont specify width or height

if we dont specify width and height

.container {
  border: 4px solid black;
  width: 1200px;
  height:700px;
  margin: 40px auto;
  display: flex;

}

.box {
  /* width: 150px;
  height: 150px; */
  font-size: 4rem;
  text-align: center;
}

f. flex-grow

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

g. flex-shrink

11) Responsive Design (Media Queries)

body {
  background-color: red;
}

@media (min-width: 800px) {
  body {
    background-color: orange;
  }
}

@media (min-width: 1200px) {
  body {
    background-color: yellow;
  }
}

if the min width is above 800px it turns orange

and if min width is above 1200px it turns yellow and if min width id below 800px it will be red

grid