CSS

CSS Three types

inline
internal
extrenal

Types of selectors in CSS

Type selector
Id selector

Class selector

Universal selector

If we apply different classes on same tag preference given to last given class, inline styling have most preference.

Rules to name id and class

1. do not make space between characters when assigning the name
2. don’t use number.
3. don’t use special character

CSS always used in head

CSS Units

CSS Properities
color
font-size
font-weight
text-transform
text-decoration
text -indent
line-height
word spacing
letter spacing
font family

font google

font awesome

text-shadow

white space
verticle-align

font -size
font-size: vw
font-variant

div tag
Layout Portion of website:
Header, footer, Menu Bar, Google add
Div Tag: To make portion in web page we use div tag, without div we can not make portion inside the web page.
Default width of div tag is 100%, to make portion we have to specify the width and also first left position is default
position.
<div id="aa"></div>
to make portion use html portions inside the div

CSS Properity
comment
float

Margin
Padding

Border size
border color
border Radius

over flow

Hover

Box shadow

Url

Backgroud-repeat

Background cover

position absolute

span

Opacity

z-index

Url

Background-position
background-attachement
background

Background-clip

Background -size

Background-contain
Background-origin

Border-blend mode
margin collaspe

Max width

outline

icon

link

list -style-image
list -style-position

list-style
Table

Block level elements

Transistion

Transform
Animation

Clearfix

Display
Transform

Combinator

Pseudo Class

Matric 2d

Filter image

transform:scaleX(-1)

object-fit: cover;

for << and sign>>

column proerity

resize

out-line offset
var()

flex

max-width
media queries
 Describe the style of html, how to display on screen,paper or media.
CSS control multiple webpage all at once

CSS Three types

styling inside the tag
styling inside the head tag,used selector
styline in new external Css style sheet

Description Represented by
when we apply style by tag name p,ul,ol
If we want to make something unique we use id and class selectors, practically there is # (hash)
difference between id and class, practically in output-wise no difference but normally for
group styling we use class and for specifically styling we use id.
. (dot)
use where we want same styling to all the tags * (star)

classes on same tag preference given to last given class, inline styling have most preference.

d class
e between characters when assigning the name
haracter

ead

cm,in,mm,%, em,px

% we use in width not in text

Description
For color of text
cm/in/mm/px/em
same as bold,here we increase px wise increase sixe
Capital/lowercase/uppercase text
 overline/underline/through/none line, line adopt same color as text
give start space to only first line
spacing between lines
spacing between words
spacing between characters
select the font calibri, time roman, arial etc.

these are google font used in professional level

google font-->select font-->newpopup menu open-->copy link in head-->copy font family
instyle
google make only one link for all selected font

if we want ot select icon we use image tag,but professionally we use font awesome
font awesome.com---> email---.verify--> select icon link paste in head--.cheatsheet
for font awesome we use I tag
<I class="fa-fa-icon name fa:4x;>

text-shadow: 3px 2px red;

add shadow to text(horizontal, verticle, shadow color)
nowrap, pre, normal
baseline, top, bottom, sub, sup
em , recommended
default size of browser is 16px, em size=em (given px)/16;
viewport :font adjust as per browser window size, 1vm=1% of width, 50cm=0.5vm
smaller to upper font, upper remains same

div tag
ebsite:
u Bar, Google add
tion in web page we use div tag, without div we can not make portion inside the web page.
tag is 100%, to make portion we have to specify the width and also first left position is default

html portions inside the div

Description
*/----*/
forcefully assign the first left empty space in web page
float( left, rigth, center, none infered)
Specify the spacing in outer boundry
Margin (left, right, Top, bottom) we gaive give foure location at a time (Tpx, Rpx, Bpx, Lpx)
value move clockwise.
if we assign margin to to div then priority given to higher px value of direction
Specify the spacing in inner boundry of an element
properties same work as margin
padding: 25px 50px; (top and bottom 25px, left and right 50px)
padding: 25px ; (top, right,bottom, left same value 25px)

size of border
color of border (by default black color)
radius of border, values in %
in web page we make the border /page width in % and assign the value of height auto if
the height is fixed then text can come out of border called overflow
to control over flow value is overflow:hidden, also make border height auto

use to zoom, color, size the object when we scroll the mouse at the point

#id:hover to use hover command

make shadow around the box

Box shadow:
Horizontal verticle, radius, color, inset(inside the box)
px value horizontal: +ve right side, -ve left side
px value verticle: +ve bottom, -ve verticle
increase radius px make shadow wide and blurr
syntax: box-shadow:hpx, vpx,rpx,,color value

Background-image:url ("image.jpg");
Make background image inside the box , of web page, also used in hover

to stop repeatation of picture inside the boxbackground-repeat:no-repeat

repeat x: repeat horizontal,
repeat y: repeat verticle,

background-sixe:covered
to adjust the picture inside the box as per assign width and height
position:absolute: the box we remain in to left position

to write text in background of image we use span command and then use padding
properity to move text inside the image.

<img src="pic.jpc"><span> text</span>

to make image fade and dim we use opacity properity

opacity:0.5;
opacity value from: 0----1, low ------high vision
normally apply in image and div

z-index:1;
value =1 or -1,
1 move box downside of other box
-1 move upside of other
Background-image:url ("image.jpg");
Make background image inside the box , of web page.
position the left, right ,top left, top right ect
image scroll are fixed with web page, when we scroll down the web page.
background: #ffffff url("img_tree.png") no-repeat right top;
apply all properity in once

Border-box: extent background to border;

border-content; extend background to content;
border-padding; extent background to padding;
border- initial; background to initial default value;
border-inherit; value of parent element.

auto:
200px: one value syntax set the width, height is auto.(normally as per width)
200px 200px: two value syntax describe the width and height of image
resize the image, so it is fully visible
image start from upper left corner
border, padding, initial, content

only for top and bottom select highest value between two

The problem with the <div> above occurs when the browser window is smaller than the
width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small
windows.
Improve browser handling

style: style of border outline e.g (solid.dotted)

color: color of outline
size : px
offset:distance from border:
invert: outline inside the border and adopt the border color;
<I class="fa-fa-icon name fa:4x;>
use inline element <i>or<span> for font

<a>
a:link (unvisited link)
a:visited(visited link)
a:hover
a:active
rules: hovers comes after visited and unvisited and active comes after hover
add image in list style
position of bullet inside or outside the table/list item.
Inside option make bullet as a part of text
all properities in one declaration
border:size properity: if this apply border outside the table: (table, th, td,tr) where you
want border.
Height & width,
horizontal align: left/right center content align (text-align:center)
verticle align: top bottom content align (verticle-align)
padding
horizontal: (not border only horizontal bottom border (border-bottom: size, pro)
stripted table: table:nth-child (even/odd)
responsive table: style="overflow-x:auto;" this make horizontal slide bar
empty-cell:hide/show(want to you border in empty cell or not
caption: caption-side:bottom;/caption-side:top; place caption at table top or bottom.
table-layout:auto/fixed; row and column layout width fixed or auto as per no of row and
columns

always in new line and occupy full width

<h1>
<p>

short hand properity

orignial location not change
transisition properity---> specify the name of css properity , width and height change
transistion duration-->duration of transistion, always 1 higher than assign value. Default
value is 0.
transistion timimg function-->control speed slw to fast, fast to slow.
(linear, ease-in, ease -out, ease in out)
transistion delay-->by load hover delay, default value 0
transistion and animation not integrate in all browsers we have to write the code for the
browser
-moz- for firefox
-webkit- for chrome and safari
Examples:
transition: width 3s, height 3s, background-color 3s, transform 3s;

transition-property:width;
transition-duration:0s;
transition-timing-function:linear;
transition-delay:1s;

hover how to transform rotate how much degree

transform: rotate(360deg);
same as transition but here we can change the position
to change the position we use % we have to follow the % sequence.

Name of each animation is different , while writing the name name of animation don’t use
the space.

Example:
animation-name:myfirst;
animation-duration:4s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:340px; top:100px;}
50% {background:blue; left:300px; top:300px;}
75% {background:green; left:0px; top:300px;}
100% {background:red; left:0px; top:0px;}
}

If an element is taller than the element containing it, and it is floated, it

will overflow outside of its container. You can use the "clearfix" hack to
fix this
Example:.
clearfix {
overflow: auto;
}

Compared to display: inline, the major difference is that display: 

inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings

are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-

block does not add a line-break after the element, so the element can sit
next to other elements.
If padding and line-height are not options, a third solution is to use
positioning and the transformproperty:

transform: translate(-50%, -50%);

Explain the relationship between selectors.

There are four different combinators in CSS:

descendant selector (space)

child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

A pseudo-class is used to define a special state of an element.

Style an element when a user mouses over it.

Style visited and unvisited links differently.
Style an element when it gets focus.

Syntax:
selector:pseudo-class {
property:value;
}

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

filter: grayscale(100%);

other propertities:
blur(px)
invert(%)
contrast(%)
hue(%)
saturate(%)
drop-shadow(px px px px)
sepia(%)
hue-rotate(deg)
brightness(%)
opacity(%)

flip image/text/element

if image size is larger then box, this properity cut the sides of image and fit it inside the box
fill, contain , cover, none,scale-down
&laquo, &raquo
column-count
column-gap
column-fill
column-rule (line width and style and color)
column-width
column-span

resize the element horizontal and verticle and both

text area resize able by default, to make it none resizeable use none,

click and drag botton-right corner of element for resize

out-line offset of border in px.
insert value of custom properity

display:flex;
make like ul list
act like a container for child element

flex-direction:column/row
flex-direction:column-reverse
flex-wrap
justify-content,

flex item properity

style="flex-grow/flex-shrink/order/flex-basis"/align -self:center

Layout method in web:

inline for text
block
position
table
flex: makes it easier to make layour with using position and float
not scale up in responsive website
@media (min-width: 1200px)