CSS (Cascading Style Sheets)

1. CSS used to describe how html page appears, styling, formatting.

2. Selectors in CSS : it is a way to select an element/s .

(ex. p{
color: "red"
}
(here p->selector , color->property , red->value)

3. 1) Simple selector :
a. Element Selector
b. Class Selector
c. ID selector
2) Pseudo-class Selector
3) Multiple Selector

** Z-index : it defines the order of overlapping of HTML elements. The z-index

CSS property sets the z-order of a positioned element and its descendants or flex
and grid items. Overlapping elements with a larger z-index cover those with a
smaller one.

4. Element selector (type selector/ tag selector) : selects by tag name.

5. Class selector (.) : to give tags a class name and then select class(grouping)
(ex. when we want to select only some paragraph out of many we give
them same class name .)

6. ID selector(#) : select a tag using id name (unique).

7. Pseudo-class selector : It is a keyword added to a selector that specifies state

of the selected element/s.
(ex. a:hover (here hover is pseudo
class selector) (other can be visited,unvisited,hover,active)

8. Multiple selector (grouping selector): select muliple html elements separated

with commas.

9. Universal , nested ( ex. when we want to change the property of h1(any) which is
present inside div(any)) , attribute selector :

=> Universal is to select all elements of page ( * )

ex. <style>
*{
color:green;
}

=> Nested selector :

: descendant selector (space) (ex. div p => select all p inside div
tag).
: child selector (>) (ex. div > p) => select all p which is child of
div tag .
: adjacent sibling selector (+) => "adjacent" means "immediately
following". ( select an element that is directly after another specific element ).
: general sibling selector (~) =>

10. How to add styling(CSS) in html?

ans.: 1) Inline (css) : inside tag (opening tag) (ex. <p
style="color:red; background-color:black;">)
2) Internal : inside style tag all styling is done
(style tag is inside head tag).
3) External (sheet) : externally create css file and
then link it with html doc .To link CSS file use <link rel="stylesheet"
href="path">

11. Specificity: which property will dominate when all will be applied at same
time.(ex. <p id="intro" class="first" style="color:red">.....</p>)
since we applied all at same time

12. If we write !important after any property than no tag can be able to
dominate it.

13. Order of specificity : Tag selector < Class < ID < Inline css < !important ,
(bad Practice to use all of them at same time).
( increasing specificity. )

14. Box- Model in CSS : Acc. to box model concept, every element on a page is a
rectangular box and may have width, height, padding, borders , and margins.
(margin,padding, height, width)

15. Margin: it adds space between borders of 2 div.(for specific direction use :
margin-left: , margin-top: , ..)

16. Padding: space between content and border.

17. Border: between padding and margin.

18. Colors in CSS: methods are:

a) hexadecimal colors : (ex . #000000 (6 values) 2red, 2green, 2blue (red
: #FF0000, green: #00FF00, blue: #0000FF, white: #FFFFFF, black: #000000 )
b) RGB colors : (ex. rgb(0-255,0-255,0-255) ; rgb(0,0,255)->blue )
c) predefined/ Cross- browser color names (total 140 colors are predefined
in CSS ( ex. red,blue,black)
d) RGBA colors (A-> Alpha value : specifies transparency of color 0.0->
fully transparent, 1.0 ->fully opaque).
( alpha value , a-> 0 == white , a==1 , color )
e) HSL colors
=>hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100%
is the full color.
Lightness is also a percentage. 0% is black, 50% is neither light or
dark, 100% is white
f) HSLA colors

19. Box-sizing: border-box => it is used so that size of box does not get changed
when padding is varied;

20. Font :
=> Font-Family
=>Font-weight
=>Font-style
****( Italic is usually, more cursive in nature. Whereas oblique is
usually just a slanted versions of the regular font face)

=>Emphasis & importance : The text-emphasis property is used to apply

emphasis marks to text.
ex. text-emphasis: filled/ open/ double-circle red/
triangle-blue

=>How to add External Fonts? @import ..... (then write link of that font)

21. Units in CSS:

=> Absolute unit (ex. mm, cm , in , px )
=> Percentage Unit (acc. to parent element.)
=> Relative Unit
* Relative to font size
(em =>relative to parent font size , ex. 2em = 2*font of parent)
(rem => relative to root element (html) )
* Related to document (relative to view port )
=>(vw : 1/100 * width of viewport )
=>(vh : 1/100 * height of viewport )

22. difference between 1vh and 1%

22. Pixel in CSS = 1/96 of inch.

23. CSS gradients: It lets you to display smooth transitions between two or more
specified colors.
Three types of gradients are there:
=>a) Linear Gradients (goes down / up / left / right / diagonally )
=>b) Radial Gradients ( with center , kind of concentric circles )
=>c) Conic Gradients ( color transitions rotated around a center point)

24. Linear Gradients : They render smooth transitions between 2 or more colors.
(also can set starting point, direction or an angle , along with gradient effect )
: syntax : background-image : linear-
gradient(color1 , color2); ( default top to bottom ).
: background-image : linear-gradient(to right , color1 ,
color2);
: background-image : linear-gradient(to left, color1 , color2);
(same for to bottom, to top, to right, to left , to bottom left ( **** for diagonal
transitions )

: background-image : linear-gradient(to top right , color1 ,

color2);
(instead of direction you can also add degree, ex. (45deg,
red, blue);
background-image : linear-gradient(to bottom,
rgba colors ,rgba colors); (add colors with transparency ).(colors with aplha
value).

25. Radial Gradients: around center :

syntax : background-image : radial-gradient (circle,red,blue,orange).
(we can also change its shape ex. just write a shape);
:background-image : radial-gradient (yellow 5%, orange
10% , red 50% )

26. Conic Gradient: syntax: background-image: conic-gradient(red, yellow, green,

blue, black);

27. CSS-Shadow Effects: with css we can add shadow to text and to box.
=>Text shadow (applies shadow to text.)
=>Box-shadow (applies shadow to block)
28.Text-shadow : (for single shadow ) : text-shadow: 3px 3px 3px red ( horizontal ,
vertical , blurness , color )
:(for double shadow ) : text-shadow: 3px 3px 3px red, 1px 1px 1px
blue;

29. Box-shadow : (applied on box ) : the color of shadow will be same as that of
text. (default, we can change it manually)
: (shadow can be added on top by putting value of color as negative. )

30. To change color in Box-shadow : box-shadow: 10px 10px 15px green; (horizontal ,
vertical , blurred , color )
(we can also add 2 colors as shadow in box-shadow same as that of text
shadow).

31. How can we add border using shadows?

(since by default shadow appears to the bottom and right of the box but by
using value of
horizontal and vertical as negative we can change the box shadow from bottom
and right to
top and left ).

32. Spread-radius : Positive values will cause the shadow to expand and grow
bigger, negative values will cause the shadow to shrink.(default is 0).

33. CSS Dimensions Properties : width, height, min-height , min-width , max-

height, max-width;
(max-height sets the maximum value of height same for min)

34. If content go outside max-height then we should use overflow: scroll;( you will
be able to scroll when content is more than box space.)

35. If content go outside in case of min-height then the box will grow itself and
accumulate all content inside it.
(but if content is less than box space then size of box will remain as that
of box.

36. Overflow Property : It sets the desired behaviour for an elements overflow i.e.
when an elements content is too big to fit in its block formatting content (in both
directions).
( visible , hidden , scroll , auto )

37. Overflow :
=> visible : content will be outside but visible to us. ( by default its
visible )
=> hidden : overflow content is hidden and not visible .
=> scroll : you can see all content by scrolling.
=> auto : behave as visible when content is small but behave as scroll when
content is more.

38. overflow : overflow-x ,

overflow-y

*** display : inline-block -> it will make all the blocks(div ) to appear in a
single line

39. CSS Position Property : It specifies the type of positioning method used for an
element ( static , relative , fixed , absolute or sticky )

=> static : (by default) : It is positioned according to normal flow.

 => relative : It is positioned according to its normal position. ( setting
top, bottom , right, left properties will cause it to adjust away from its normal
position.
other content will not be adjusted to fit into any gap left by the
element ).
ex. ( position : relative
left : 10px;
top : 15px; )
=> fixed : an element with position fixed is positioned relative to viewport,
which means it always stays in same place even if the page is scrolled.
=> absolute : it is positioned relative to the nearest positioned ancestor
(if no ancestor then, it uses document body , and moves along page scrolling.
=> sticky : it is positioned based on the user's scroll position. (it toggles
between relative and fixed, depending on the scroll position. it is positioned
relative
until a given offset position is met in the viewport-then it sticks in
place (like position : fixed )

40. CSS 2D transforms : It allows you to move , scale , rotate , and skew
elements .

41. Transform methods : ( 2D transformations )

=>translate() : (shifts acc to horizontal , vertical position , ex. (tansform
: translate(100px,50px) (100->horizontal , 50->vertical )
=>rotate () : (rotates by an angle , ex. transform: rotate (-45deg) )
(positive angle clockwise , negative angle anti-clockwise )
=>scaleX() : scales in X axis
=>scaleY() : scales in Y axis
=>scale() : ( enlarging , ex. transform : scale(2,1); (first(2) ->
horizontal enlarge , second(1) ->vertical enlarge )
=>skewX() : tilt in x axis
=>skewY() : tilt in y axis
=>skew() : Tilt the given text or given box (ex , transform(45deg);
=>matrix() :

42. Transform methods : (3D transformations )

: For 3d transformations first, you should activate the perspective whixh
tells the distance between user and screen.

=>transform : perspective(15px) translateZ(-10px); ( -ve for decreasing the

size and +ve for increasing the size)0

43. CSS FlexBox : It is a great way to get more flexibilty in your layouts and to
simplify responsive layout design. It make it easy to align elements on 2d
plane and is pretty easy to use.
(both space : distribution and alignment : capabilities can be
achieved with this ).

44. The first step is to set display :flex on a "container" element. The "children
" to the flex container become flex itmes. a set of properties can be applied
to flex containers and have an effect to all the items as a whole, and a
different set of properties can be applied to flex items and have their effect on
the targeted items.
Flex items in turn also be flex conatiners for the elements it contains ,
making it easy to create complex layouts.
(Parent container : flex , Child : flex items)

45. .container>.box*4{box-$} ( it will create a class container and create 4

sub class box ) ($ is used to give numbering )
46. Flex-container Properties :
(To use properties of flexbox use display:flex )

=>Flex-direction
=>Flex-wrap
=>Flex-flow
=>Justify-content
=>align-items
=>align-content

47. To use flex properties write , display : flex inside style tag.
(main axis -> horizontal ; cross axis->vertical).

48. By default, all items will be placed in horizontal order (row wise ) (acc. to
main axis( horizontal ) ).
(if we want to change axis from main to cross then we can use,
flex-direction:column; ( cross-axis -> horizontal )
)

49. flex-direction: column => items placed in vertical stack order,

flex-direction: row => items placed in horizontal stack order.
flex-direction: row-reverse => items placed in reverse horizontal stack
order.
flex-direction: column-reverse => items placed in reverse vertical stack
order,

50. flex-wrap : wrap : if we squeeze the container then elements will get into new
line (placed at bottom).
: no-wrap : if we squeeze the container then elements (inner boxes )
will also get squeezd.
: wrap-reverse : when we squeeze then, elements gets
squeezed and placed at the top;

51. flex-flow : its a short hand notation for flex-direction and flex-wrap (ex.
flex flow : row wrap)

52. justify-content : (applied on main axis )

(aligns items according to main axis.)
justify-content : flex-start; => all the items are placed at start.(left)
justify-content : flex-end; => all items get placed at end .(right)
justify-content : center; => all items get placed at center.
justify-content : space-around => equal spaces between all the boxes ( but
not to left of first and to right of last , they are not equal.)
justify-content : space -evenly => equal spaces between all the boxes. (start
and end also)
justify-content : space-between => equal spaces between all boxes and left of
first box have no space and right of last box also have no space.

53. align-items: (aligns items acc. to cross axis ).

align-items: flex-start; => items are placed at start of cross axis
align-items: flex-end; => items are placed at end of cross axis
align-items: center; => items are placed in center of cross axis
align-items: stretch; (default) => items get stretched to size of container.
align-items: baseline => it will allow all items content to come in same
baseline. (irrespective of font size)

54. gap => it allows to create gap between items (boxes) (ex. gap:10px; it will
provide gap of 10 px between each item.)
 * u can also give row-gap: px and column-gap: px .

Ques. how gap is different from margin?

=> in margin space is allowed at start and end also, but in case of gap
space is not given at start and end.

55. for different rows :

=> align-content : flex-start; (all rows come at start of flex)
=> align-content : flex-end; (come at end)
=> align-content : center; (all rows at center)
=> align-content : space-between (space is inserted between rows)
=> align-content : space-around ( equal space between rows(except
start,end))
=> align-content : space-evenly (equal space between all, including start ,
end)

56. Flex-items Properties :

the direct child elements of a flex container automatically becomes flexible
(flex) items.
(basically these are the properties that are applied on flex items)

=> order : it will decide the order in which flex items are tobe appeared.
by default order is 0.
(ex. for box1 if order = 1 , for box2 order = 5, for box3, order = 2,
then box3 will be in middle of box1 and box2)
(order property should be given inside box1 styling).

=> Flex-grow : the box will grow and take the space available (flex-grow:1;)
(by default its value is 0).

=> Flex-shrink : it will decide the speed at which box will shrink , used in
responsive design. (by default its value is 1).

=> Flex-basis : it is same as width , the only difference is that when

overflow data is entered then in case of
width, it will be hidden but in case of flex-basis it is allowed
to increase width and content is visible ;

=> Flex : short hand notation for order, flex-grow, flex-shrink, flex-basis

=> Align-self : applied on particular box, (stretch, flex-start, flex-end,

center ).

57. Parallax website creation : In parallax website, background image moves

relatively slower than foreground image.

* its a good practice to make super level wrapper(div which contains whole
code)

* use transform-style: preserve-3d : so that we can see effects in 3d .

* z-index = -1 : if it is applied then image will go into background.
* object-fit : cover = so that image will fit into container.

* always set margin, padding:0px and box-sizing:border-box in universal

selector.
* and box-sizing: border-box : so that padding,margin,border will be fit
into the containers width , do not take extra width.

*object-fit:cover => used to fit a image properly.

58. It is possible to set absolute positioning of a child element relative to the
parent container. For that, you must specify
the position property with its “relative” value on the parent element. If we
don't specify the position of the parent element,
the child <div> will be positioned relative to the page.

59. background-attachment: fixed => using this background image will be fixed.

60. Grid: it is a collection of horizontal and vertical lines creating a pattern

against which we can line up our design elements.
* CSS grid layout is 2 dimensional layout system for the web.
* it lets you lay content out in rows and columns.
* It has many features that make building complex layouts straightforward.
* A grid typically have columns , rows and then gaps between each row and
column. The
gaps are commonly referred as gutters.(row gap, column gap).

61. Flex box is specific to position of content, grid is specific to layout

creation.

62. Flexbox is 1D and CSS grid is 2D.

63. display:flex (grid or container, grid items).

64. grid-template-columns: 200px 210px 220px (then 3 columns of 200, 210 , 220 px
size are created).

65. grid-template-rows: 90px 80px 70px 60px (then 4 rows of defined size are
created).

66. fr unit (fraction) is used for responsive. (repeat(3,1fr) : then 3 column/

row are created).
for flexible grid.

67. gap:10px 20px => used to give gap in between cells(row, columns) .

68. grid-column-start, grid-column-end : for column span , to add columns

69. grid-row-strat, grid-row-end : for row span , to merge different rows(from

start to end)

70. grid-row : grid-row: 1 / span 2; (Make "item1" start on row 1 and span 2 rows:)
grid-column, grid-area:

71. Some More Properties :

align-content :
justify-content :
justify-self :
justify-items :
align-items :
align-self :
place-items :
place-self :

72.