**Table of Contents** - introduction of css - Basic selector - Pseudo-class selector #let understand css Cascading Style Sheets is languages which used for described presentation of HTML. CSS also described how the element are going to rendered on screen. **css types** - External: link tag is used to `link:css` ``` !DOCTYPE html> External CSS Example

Hello World!

This is my first CSS example

``` **extenalcss** ``` h1 { background-color: yellow; color: blue; border: 1px solid black; } p { color: red; } ``` - internal : `

AXM||internal css!

This is my first CSS example

``` - inline: style tag used html element ``` inline CSS t

Hello World!

inline CSS exm

``` ## let talk about selector selector target the html css to applt style/css. ## some selector we are going to understand by using example for better understanding. let start with our first selector ,that is any guess let me give u hint it apply in whole body , u get or not , yes, we are talking or going to guseess about ``` CSS||AXM

welcome to class live

span is nothing ,it just line of code mean in-line , it doesnt take any space

we know already what is paragraph

AXM
AXM 2
AXM 3
AXM 4
AXM 5

lorem

awesome

highlight me Test
higlisht me

Test 1

Test 2

Test 3

Test 4

``` ## universal Selector universal selector denoted by * (Asterisk) ``` ``` ## individual selector individual Selector use tag/element of html ``` ``` ## class&id : using class and id we target the html element using (.) and for id # ``` ``` ## and selector is also know as chained selector it used sub class element to target ``` li.bg-blue.text-white{ background-color: rgb(0, 22, 94); color: #f1f1f1; } ``` ## combined selector : we can used more than one html tag to target the html. ``` p,span{ background-color: rebeccapurple;} /* inside element */ div ul li { background-color: #000000; } ``` ## Direct child selector : child combinator (>) is placed between two CSS selectors ``` /* direct -child seclector */ div>li{ background-color: rgb(60, 248, 60); color: blue; } ``` ## sibiling: sibling selector is used to select an element that is directly after another specific element ``` .sibling+p{background-color: lightyellow; color:#686868 ; } /* sibling */ .sibling+li{ background-color: lightyellow; color:#686868 ; } ```

azharone

CSS jounerny is Just like Roller Coaster

Join Our Newsletter. No Spam, Only the good stuff.