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
«, »
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)
