2. CSS NOT (NEGATION) PSEUDO CLASS
Syntax of not pseudo class selector:
selector : not(argument)
{
declaration list;
}
It selects any html element targeted by the selector, if it does not match the argument passed to not
pseudo class.
Ex:
p : not(.first)
{
border : 2px dotted blue;
}
It selects any p element, if it has no class attribute value set to first.
Ex:
input : not(:disabled)
{
border : 2px dotted blue;
}
It selects any input element,if it is not disabled
3. CSS – PSEUDO ELEMENTS
Ex:
p::before
{
content : ”Hello “;
}
It generates the specified content (i.e. Hello) before the content of any p element.
Ex:
p::after
{
content : ” HTML!“;
}
It generates the specified content (i.e. HTML!) after the content of any p element.
4. CSS SPECIFICITY RULES
What happens when we define set of style rules for a specific tag in external, internal
as well as inline styles?
The answer is:“rules get’s cascade”
The rules of the cascade include:
More specific selector’s properties override less specific selector’s
properties.
Nearest properties override farthest properties, when specificity is
equivalent.
Finally for every tag a virtual declaration list is created by combining all
properties from all selectors
5. CSS UNIVERSAL SELECTOR(*)
It is used to target any html element on page and apply styles on it.
Syntax of universal Selector:
*
{
declaration list;
}
It targets to any html element on the page
Ex:
*
{
border:2px solid red;
}
It selects every html element on the page and applies 2px solid red border
*.firsttwo
{
border:2px solid red;
}
It selects any html element which has class attribute value set to firsttwo
6. CSS UNIVERSAL SELECTOR(*)
*#container
{
border:2px solid red;
}
It selects any html element which has id attribute value set to container
* > p
{
border:2px solid red;
}
It selects any p element which is the direct child of any html element
7. CSS PROPERTIES
1. Font-weight Property: It used to specify the boldness of the font.
Values: lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900
2. Font-style Property: It used to specify the style of the text to be displayed.
Values: normal | italic | oblique (more italic)
3. Text-decoration Property: It used to specify the line formatting of the text
to be displayed
Values: none | underline | line-through | overline
4. Content Property: It is used to generate content dynamically at run time.
Values:“string” | open-quote | close-quote | url(“filepath”) | none
8. CSS PROPERTIES
5. background-color property: It is used to specify the background color for any
html element
Values: color name | hex value | rgb(0-255,0-255,0-255) | rgba(0-255,0-255,0-255,0-1)
| transparent
6. font-size property: It is used to specify the size of the font
Values: xx-small | x-small | smaller | small | medium | large | larger | x-large | xx-large |
length (pt, px , em, %)
7. text-align property: It is used to align the text horizontally
Values: left | center | right | justify
9. 7. CSS FONT-SIZE PROPERTY VS HTML FONT
TAG SIZE ATTRIBUTE
It is used to specify the size of the font to be applied
Values: xx-small | x-small | smaller | small | medium | large | larger |
x-large | xx-large | length | %
Note:16px = 1em (px to em Ex: 10px / 16px = 0.625em)
size=1 == font-size:x-small == font-size:10px == font-size:0.625em
size=2 == font-size:small == font-size:13px == font-size:0.8125em
size=3 == font-size:medium == font-size:16px == font-size:1.0em
size=4 == font-size:large == font-size:18px == font-size:1.125em
size=5 == font-size:x-large == font-size:24px == font-size:1.5em
size=6 == font-size:xx-large == font-size:32px == font-size:2.0em
size=7 == == font-size:48px == font-size:3.0em
10. 8. CSS COLOR PROPERTY VS HTML FONT TAG
COLOR ATTRIBUTE
It is used to specify the text color to be applied
Values: color name | hex value | rgb(0-255,0-255,0-255) | rgba(0-255,0-
255,0-255,0-1) | transparent
color name = ex: red, green, blue etc.
hex color value = ex: #ff0000, #00ff00, #0000ff etc.
rdb() = ex: rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) etc.
rgba() = ex: rgba(255,0,0,1), rgba(0,255,0,1), rgba(0,0,255,1) etc.
11. 9. CSS FONT-FAMILY PROPERTY VS HTML
FONT TAG FACE ATTRIBUTE
It used to specify the font to be applied to the content of an
HTML element
Values: specific font name (i.e. font face), specific font family name,
generic font family name
Ex:
font-family :‘Arial Black’;
font-family :‘Arial Black’,Arial;
font-family :‘Arial Black’,Arial, sans-serif;
12. CSS FONT-FAMILY PROPERTY VS HTML FONT
TAG FACE ATTRIBUTE
10. text-indent property: It is used to specify the indentation of the first line in the
paragraph
Values: length
11. text-align property: It is used to specify the horizontal alignment of the text
Values: left | center | right | justify
12. text-align-last property: It is used to specify the horizontal alignment of the last
line in the paragraph
Values: left | center | right | justify
13. letter-spacing property: It is used to specify the space between the letters or
characters
Values: length
14. word-spacing property: It is used to specify the space between the words
Values: length
15. line-height property: It is used to specify the space above and below the text
Values: length
13. CSS FONT-FAMILY PROPERTY VS HTML FONT
TAG FACE ATTRIBUTE
16. text-transform property: It is used to specify the text case to be applied
Values: uppercase | lowercase | capitalize
17. font-variant property: It is used to specify the text case to be applied
Values: small-caps | normal
18. text-shadow property: It is used to apply shadow effect to the text of an html
element
Value: shadow-x-offset shadow-y-offset shadow-color-spread-amount shadow-color;
19. box-shadow property: It is used to apply shadow effect to the html element
(rectangle box area)
Value: shadow-x-offset shadow-y-offset shadow-color-spread-amount shadow-color;
14. CSS FONT-FAMILY PROPERTY VS HTML FONT
TAG FACE ATTRIBUTE
20. list-style-type property: It is used to specify the bullet symbol to be displayed in
front of list items of html ol or html ul.
Values: decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-
roman | none | disc | circle | square etc.
21. list-style-image property: It is used to specify the image to be used as a bullet
symbol
Value: url(‘image path’);
Note: image size should be 12 x 12
22. list-style-position property: It is used to specify the position of the bullet symbol
with respect to list item’s border area.
Values: outside | inside
15. CSS BOX MODEL
HTML box with its component areas:
CSS Content area:The amount of space required to display the content or the area
occupied by the content
It is determined by CSS width property and CSS height property
CSS Padding area:The distance between the content and the border.The empty space
or empty area around the content. It is determined by CSS padding property
CSS Border area: The area occupied by the border.The area around the padding
meant to display border. It is determined by CSS border property.
CSS Margin area:The area around the border.The empty space or empty area around
the border. It is determined by CSS margin property
16. CSS BOX MODEL
Calculating actual width and actual height of an HTML element:
HTML element's actual width: is the amount of space occupied by an
HTML element horizontally
Actual width of an HTML element = content width + left padding
+ right padding + left border + right border + left margin + right margin
HTML element's actual height: is the amount of space occupied by an
HTML element vertically
Actual height of an HTML element = content height + top padding
+ bottom padding + top border + bottom border + top margin +
bottom margin
17. CSS CONTENT AREA PROPERTIES
CSS width property: It is used to specify, width of content area
Values: auto | length | %
CSS height property: It is used to specify, height of content area
Values: auto | length | %
CSS overflow property: It is used to specify, how the overflowed content to be
displayed
Values: visible | hidden | scroll
CSS overflow-x property: It is used to specify, whether the horizontal scroll bar
to be visible or hidden
Values: visible | hidden
CSS overflow-y property: It is used to specify, whether the vertical scroll bar to
be visible or hidden
Values: visible | hidden
18. CSS PADDING AREA PROPERTIES
CSS padding-top property:
It is used to specify the amount of area to be cleared above the content area of an html element
Values: length | %
CSS padding-right property:
It is used to specify the amount of area to be cleared on the right hand side of the content area of an
html element
Values: length | %
CSS padding-bottom property:
It is used to specify the amount of area to be cleared below the content area of an html element
Values: length | %
CSS padding-left property:
It is used to specify the amount of area to be cleared on the left hand side of the content area of an
html element
Values: length | %
CSS padding short hand property:
It is used to specify the amount of area to be cleared around the content area of an html element
Values: space separated list values (1, 2, 3, and 4)
20. CSS BORDER AREA PROPERTIES
CSS border-top-width property: It is used to specify the thickness of the top border of an html
element
Values: length
CSS border-top-style property: It is used to specify the style of the top border of an html element
Values: solid | double | dotted | dashed | groove | inset | outset | none
v CSS border-top-color property:
It is used to specify the color of the top border of an html element
Values: color
CSS border-right-width property: It is used to specify the thickness of the right border of an html
element
Values: length
CSS border-right-style property: It is used to specify the style of the right border of an html element
Values: solid | double | dotted | dashed | groove | inset | outset | none
CSS border-right-color property: It is used to specify the color of the right border of an html element
Values: color | hex color value
CSS border-bottom-width property:It is used to specify the thickness of the bottom border of an
html element
Values: length
21. CSS BORDER AREA PROPERTIES
CSS border- bottom -style property: It is used to specify the style of the bottom border of an
html element
Values: solid | double | dotted | dashed | groove | inset | outset | none
CSS border- bottom -color property: It is used to specify the color of the bottom border of an
html element
Values: color | hex color value
CSS border-left-width property: It is used to specify the thickness of the left border of an html
element
Values: length
CSS border-left-style property: It is used to specify the style of the left border of an html
element
Values: solid | double | dotted | dashed | groove | inset | outset | none
CSS border-left-color property: It is used to specify the color of the left border of an html
element
Values: color | hex color value
22. CSS BORDER PROPERTIES
CSS border-top short hand property:
It is used to specify the top border thickness, style and color in a single line
Values: border-top-width border-top-style border-top-color;
CSS border-right short hand property:
It is used to specify the right border thickness, style and color in a single line
Values: border-right-width border-right-style border-right-color;
CSS border- bottom short hand property:
It is used to specify the bottom border thickness, style and color in a single line
Values: border- bottom -width border- bottom -style border- bottom -color;
CSS border-left short hand property:
It is used to specify the left border thickness, style and color in a single line
Values: border-left-width border-left-style border-left-color;
23. CSS BORDER PROPERTIES
CSS border-width property: It is used to specify the thickness of the border of an
html element
Values: Space separated list of values (1, 2, 3 and 4)
CSS border-style property: It is used to specify the style of the border of an html
element
Values: Space separated list of values (1, 2, 3 and 4)
CSS border-color property: It is used to specify the color of the border of an html
element
Values: Space separated list of values (1, 2, 3 and 4)
4: top, right, bottom, left
3: top, right & left, bottom
2: top & bottom, right & left
1: top & right & bottom & left
24. CSS BORDER SHORT HAND PROPERTY
It is used to specify the border thickness, style and color of an html
element in a single line
Values: border-width border-style border-color;
border-width:
length
border-style:
solid | double | dotted | dashed | groove | inset | outset | none
border-color:
color name | hex color value | rgb(0,0,0) | transparent
25. CSS BORDER RADIUS PROPERTIES
CSS border-top-left-radius property: It is used to specify the border top left radius for an html element
Value: length
CSS border-top-right-radius property: It is used to specify the border top right radius for an html element
Value: length
CSS border-bottom-right-radius property: It is used to specify the border bottom right radius for an html
element
Value: length
CSS border-bottom-left-radius property: It is used to specify the border bottom left radius for an html
element
Value: length
CSS border- radius short hand property: It is used to specify the border radius for an html element
Value: Space separated list of values (4, 2, and 1)
4: top-left, top-right, bottom-right, bottom-left
2: top-left & bottom-right, top-right & bottom-left
1: top-left & top-right & bottom-right & bottom-left
26. CSS MARGIN AREA PROPERTIES
CSS margin-top property: It is used to specify the amount of area to be cleared above an html
element
Values: auto | length | %
CSS margin-right property: It is used to specify the amount of area to be cleared on the right
hand side an html element
Values: auto | length | %
CSS margin-bottom property: It is used to specify the amount of area to be cleared below an
html element
Values: auto | length | %
CSS margin-left property: It is used to specify the amount of area to be cleared on the left hand
side an html element
Values: auto | length | %
CSS margin short hand property: It is used to specify the amount of area to be cleared around an
html element
Values: Space separated list of values (1, 2, 3, and 4)
28. CSS BACKGROUND PROPERTY
CSS background-attachment property: It is used to specify, how the background
image is to be attached to the wall of a web page
Values: scroll | fixed
CSS background-position property: It is used to specify, where the background
image is to be positioned in an html element box.
Values: top left | top center | top right | center left | center center | center right |
bottom left | bottom center | bottom right | x-offset-length y-offset-length | x-offset-
% y-offset-%
CSS background-size property: It is used to specify, background image size
(meaning: width and height)
Values: x-size-length y-size-length | x-size-% auto | cover | contain
29. CSS BACKGROUND PROPERTY
CSS background-origin property:
It is used to specify, background image origin (meaning: placement) box
Values: content-box | padding-box | border-box
CSS background-clip property:
It is used to specify, background (image & color) clipping (meaning: trim) box
Values: content-box | padding-box
CSS multiple background images : How to use multiple backgrounds?
background-image:url('todown.jpg'),url('flower.png');
background-repeat:repeat-x,repeat-x;
background-position:top left, bottom left;
background-size:100px 50px,32px 32px;
30. CSS LINEAR GRADIENT BACKGROUND
CSS Linear gradient: is used to create a background consisting of transition
between two or more colors along a straight line.
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);
OR
background-image: linear-gradient(direction, color-stop1, color-stop2,........., last-color-stop);
direction:
- to left, to right, to top, to bottom ,
- to top left, to top right, to bottom left, to bottom right
- or angle in degrees.
color-stop: color position
- color : color name, hex color value , rgb(0-255,0-255,0-255), rgba(0-255,0-255,0-255,0-1)
- position: px or %
31. CSS LINEAR GRADIENT BACKGROUND
- Ex:
- background: linear-gradient(to right, red 0%, blue 100%);
- background: linear-gradient(to bottom right, red 0%, blue 100%);
- background: linear-gradient(90deg, red 0%, blue 100%);
- background: linear-gradient(to right, red 0%, green 50%, blue 100%);
- Note: if you use pair of same color side by side you can create color strip
background: linear-gradient(to right, red 0%, red 25%, green 25%,green
50%,blue 50%, blue 100%);
- repeating-linear-gradient
- syntax:
- background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...,
last-color-stop);
- OR
- Background-image: repeating-linear-gradient(direction, color-stop1, color-
stop2, ..., last-color-stop);
- Ex: background: repeating-linear-gradient(90deg,white 0px, white 20px,black
20px, black 40px);
32. CSS RADIAL GRADIENT BACKGROUND
CSS Radial gradient Background: is a function, used to create a background
consisting of transition between two or more colors that radiates from given origin.
Syntax:
- background: radial-gradient(shape at position, color-stop1, color-stop2, ..., last-color-stop);
OR
- background-image: radial-gradient(shape at position, color-stop1, color-stop2, ..., last-color-stop);
shape at position:
- shape: indicates the shape of gradient i.e. circle, ellipse
- position: indicates the origin of gradient top left, top center, top right center left,
center center, center right bottom left, bottom center, bottom right offset-x-px
offset-y-px offset-x-% offset-y-%
color-stop: color position
- color : color name, hex color value , rgb(0-255,0-255,0-255), rgba(0-255,0-255,0-255,0-1)
- position: px or %
34. CSS TRANSFORM PROPERTY
CSS transform property allows you to transform an HTML element
Transform: means translate, rotate, scale and skew
Translate: - means changing position of an html element
Rotate: - means changing orientation of an html element
Scale: - means changing size of an html element
Skew: - means changing slant of an html element
Syntax:
transform: one or more transform functions + perspective function;
35. CSS TRANSFORM PROPERTY
Perspective function:
- is used to define depth
- perspective(z in pixels)
1D Transform
functions:
2D Transform
functions
3D Transform
functions
translateX(x)
translateY(y)
translateZ(z)
rotateX(x)
rotateY(y)
rotateZ(z)
scaleX(x)
scaleY(y)
scaleZ(z)
skewX(x)
skewY(y)
translate(x,y)
rotate(x,y)
scale(x,y)
skew(x,y)
scale3D(x,y,z)
rotate3D(x,y,z)
translate3D(x,y,z)
38. CSS TRANSFORM-ORIGIN PROPERTY
CSS transform-origin Property:
- is used to change the position of the pivot point of an html element
- Pivot point is an imaginary point; used to transform an html element in
different ways
39. CSS TRANSITIONS
Transition:
- means changing the state of an HTML element smoothly
- Using CSS transition properties instead of suddenly changing the state of an HTML element; we
can change the state of an HTML element smoothly
Applying CSS transitions:
- transition-property: - comma separated one or more CSS properties to be
transitioned , none, all transition-duration
- comma separated one or more time in ms/s taken to complete the transition transition-timing-
function:
- comma separated one or more behaviors of transition (linear, ease-in, ease-out, ease-in-out)
transition-delay: - comma separated one or more time delays in ms/s to begin the transition
transition:
- comma separated one or more
- [transition-property transition-duration transition-timing-function transition-delay]
- Note: CSS Transitions allow us to change the state of an HTML element from initial state to the
final state; does not allow controlling in-between states; to add and control in-between states
we take help of CSS Animations.
41. CSS ANIMATIONS PROPERTY
Allow us to animate sequence of HTML element states over a given period of time
To animate sequence of HTML element states we take help of @keyframes block
42. APPLYING ANIMATION PROPERTIES
1. animation-name: - comma separated one or more @keyframes block's names
2. animation-duration: - comma separated one or more time in ms/s taken to
complete the animation
3. animation-timing-function: - comma separated one of more behaviors of
animation (linear, ease-in, ease-out, ease-in-out)
4. animation-delay: - comma separated one or more time delays in ms/s to
begin the animation
5. animation-iteration-count: - comma separated one or more numbers
indicating number of times animation to be played, infinite
6. animation-direction: - comma separated one or more directions for the
animation (normal, reverse, alternate, alternate-reverse)
7. animation: comma separated one or more
[animation-[ name duration timing-function delay iteration-count direction]],..
44. CSS FLOAT AND CLEAR PROPERTIES
1. Used to create web page layouts
2. float: left, right, none - is used to float an element either to the left
or to the right in its parent element
3. float:left; - floats an element to the left in its parent element
4. float:right; - floats an element to the right in its parent element
5. float:none; - is used remove float effect from an already floated
element
6. clear: left, right, both - is used to clear the effect of floating on the
parent element
7. clear:left; - clears the effect of floating left on its parent element
8. clear:right; - clears the effect of floating right on its parent
element
9. clear:both; - clears the effect of floating left & right on its parent
element
48. CSS POSITION PROPERTY
The position property determines in what manner an item is positioned on the page or relative
to one another. By default position is set to static, with elements displaying on the page in the
order they appear in the document, but let’s take a look at some other position styles.
STATIC — Element displays on the page in the order it appeared in the document. Top, right,
bottom, left, and z-index properties have no effect when used with static. Not stackable due to z-
index restriction.
RELATIVE — Similar to static but able to be offset by top, right, bottom, left, and z-index
properties.
ABSOLUTE — Element positioned relative to its first non-static ancestor element. Similar to
relative in that it may be offset by top, right, bottom, left, and z-index properties.
FIXED — Similar to absolute, but positioned relative to the browser window. Scrolling will not
move this element.
STICKY — Element is positioned relative until a specified offset position is met by scrolling,
then the element is positioned ‘fixed’ in that position on the scrolling element.
49. CSS POSITION PROPERTY - STATIC
- is used to position an HTML element in an HTML
- document values: static, relative, absolute, fixed & sticky
- position : static;
- HTML elements are displayed as they appear in the normal document flow
- by default all html element's position property is set to static
- as the name itself indicates, static elements cannot be moved i.e. static elements are
not affected by left, right, bottom, top, and z-index properties.
Note: while using position property; we take help of left, right,
bottom, top and z-index properties to position an HTML element.
51. CSS POSITION PROPERTY - RELATIVE
- is used to position an HTML element in an HTML
- document values: static, relative, absolute, fixed & sticky
- position: relative; - is used to position an HTML element relative to its normal
position
- Note: while using position property; we take help of left, right, bottom, top and
z-index properties to position an HTML element.
53. CSS POSITION PROPERTY - ABSOLUTE
- is used to position an HTML element in an HTML
- document values: static, relative, absolute, fixed & sticky
- position: absolute; - is used to position an HTML element relative to the edges
of it's first positioned ancestor or relative to the edges of the browser’s
viewport
- Note: while using position property; we take help of left, right, bottom, top
and z-index properties to position an HTML element.
55. CSS POSITION PROPERTY - FIXED
CSS position property: - is used to position an HTML element in a document
values: static, relative, absolute, fixed & sticky
position: fixed; - is used to position and pin (or fix) an HTML element relative to the edges of
the browser’s viewport
Note: while using position property; we take help of left, right, bottom, top and z-index
properties to position an HTML element.
57. CSS POSITION PROPERTY - STICKY
- is used to position an HTML element in an HTML document
- values: static, relative, absolute, fixed & sticky
- position: sticky; - is used to position and stick an HTML element relative to top edge of the
browser viewport
- Note: while using position property; we take help of left, right, bottom, top and z-index
properties to position an HTML element.
59. CSS Z-INDEX PROPERTY
- is used to position an HTML element in an HTML document
- values: static, relative, absolute, fixed & sticky
- W.K.T. while positioning HTML elements; we take help of left, right, bottom,
top and z-index properties.
- CSS z-index property: - is used to control the displaying order of overlapping
positioned HTML elements
- Note: - an HTML element with lower z-index value is displayed behind an
HTML element with higher z-index value
61. CSS DISPLAY PROPERTY
When you create an element to display on the page, it renders as a box & we
have seen how to position those boxes on the page, but there’s more we can do
with them. CSS’s Display property specifies the type of rendering box that is
created from our HTML. Let’s check out some of the different display styles we
can use.
BLOCK — Element starts on a new line & takes up the entire width. May contain other block or
inline elements. Elements that are block-level by default include <div>, <p>, <h1>-<h6>, <ul>,
<li>, & <canvas>.
INLINE —Element can start anywhere on an existing line. Height and width properties have no
effect. Elements that are inline by default include <span>, <input>, <button>, &<img>.
GRID — Element is displayed block-level with inner content in grid layout.
FLEX — Element is displayed block-level with inner content in flexbox layout.
INLINE-BLOCK — Element is displayed inline but height and width may be defined. May also be
used with grid, flex, or table as these are block-level elements.
NONE — Removes this element & all children (to just make an item invisible but still take up
space on the page use the visibility property)
