CSS (Cascading Style Sheet)
Ways to add CSS : 3 Ways
1. Inline Style : By giving a style attribute to the HTML tag.
2. Internal Style : By creating a <style> </style> tag inside the head tag.
3. External Style : By adding a separate CSS file with the help of a link tag.
(The file extension must be .css)
Selectors : 3 types
1. Class Selector : (.) represented by a dot
2. ID Selector : (#)
3. Tag Selector : Tag name
Combinators => When you have to apply CSS in combination of selectors
1. Decendent Selector => space
2. Direct Child Selector => > (greater than symbol)
3. Adjacent Sibling Selector => + (plus symbol)
4. General Sibling Selector => ~ (tilde)
Comments in CSS : /* YOUR COMMENTS HERE */ (Ctrl + /)
NOTE : CSS IS ALL ABOUT EXPERIENTS
Margins :
margin : value in px;
margin : top right bottom left;
Borders :
border : width pattern color;
Border patterns : solid|dotted|dashed
Hover ? => When you put your mouse on an element.
Link : Created with the help of a tag
States of Link :
:link => Default link
:hover => When you keep your mouse on it
:active => When you are clicking it
:visited => When you have opened at least once
Display :
block
inline
inline-block
none
Visibility :
visible
hidden
Q. What is the diff between display : none and visibility :hidden?
A. Visibility hidden occupies the space, however display none removes the space of the element
Position :
static : Default position of every element
relative : Move the item from TLBR from its current position.
absolute : Move it in the relation of browser TLBR. (Partial)
fixed : Fix the item at any place in browser
sticky :Sets the position according to the parent element.
Shadow?
Types of shadow :
1. Text Shadow
/* text-shadow : horizontal-shadow vertical-shadow blur color */
box-shadow: 5px 5px 5px grey;
2.Box Shadow
/* box-shadow : horizontal-shadow vertical-shadow blur spread color */
box-shadow: 5px 5px 5px grey;
Combinators => When you have to apply CSS in combination of selectors
1. Decendent Selector => space
2. Direct Child Selector => > (greater than symbol)
3. Adjacent Sibling Selector => + (plus symbol)
4. General Sibling Selector => ~ (tilde)
Units of measuement in CSS ?
1. Pixel (px)
2. em
3. rem
4. vh,vw => viewport height, viewport width
1 em => 16px; default
1 rem => 16px; default
Visible area on a browser is called viewport
Gradient
1. Linear: Goes form one direction to another.
2. Radial : Goes from center to outside of the element.
/* background: linear-gradient(to left, yellow, blue); */
background: radial-gradient( yellow, blue)
Flex Layout : Value in display property
justify-content : To align the items in the direction of flex with space distribution in various ways
flex-direction : row, column and their reverse order
align-items : To change the alignmnet of items in the other direction of the flex.
align-self : TO CHANGE THE ALIGNMENT OF ONLY SPECIFIC CHILDREN IN A FLEX CONTAINER
flex-wrap : To push the items in the new line if they go out of the screen size
Background Image :
background : url(PATH OF THE IMAGE);
background size:cover & contain
Overflow : When the child has more width and height than its parent, then it flows out of the parent.
Text Tags :
<h1>....<h6>, <p>
/* 1. Create the problem of overflow by giving white-space: nowrap
2. Solve the problem of overflow using overflow: hidden
3. Provide text-overflow: ellipsis to put a ... at the en of the line*/
element{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Pseudo : Not real (Fake)
1. Pseudo Classes => (:), :link , :active, :hover, :visited,
2. Pseduo Elements => (::)
FLEXBOX LAYOUT WAS DESIGNED TO ONLY DEVELOP 1DIMENSIONAL LAYOUTS.
RWD (Responsive Web Design) : The style of designing web pages which are visible and have good look and feel on all different sized devices.
E.g Desktop, Laptop, Tablets, Mobiles etc
320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.
Break Points : Range in px for different screen sizes
Media Query : A way to write different CSS for different screen sizes on same web page.
Syntax : @media screen and (max-width: 480px) and (min-width: 320px) {
}
Mobile First Approach : When you give prefernce to mobile sizes first over desktop sizes.
Step 1 : Use meta tag with viewport.
Step 2 : Use % to set width in items rather than using px.
Step 3 : Use media queries
4 Likes