<h1 id="rr"> in css #rr is added only one id is existed for one code 3.class selector:
<h1 class="first"> in css .first is added no.of classes existed for one code
combinator selector: these combinators are combine the two selectors to style the content ------------------------- 1.descendent selector(space) 2.child selector(>) 3.adjacent sibbling selector(+) 4.general sibbling selector(~)
1.descendent selector(space): in between two selectors we use space to style the
content
we create a div tag and h tags are include in div tag
we want to style in the content we write space b/w div and h1tag in css file and place this tags on heading
<div> <h1> styles are applied for all h1 tags <h1> <h2> </div>
2.child selector: put > symbol in b/w div and p tag in css file <div> <h1> <h1><p> <p>this and <p>this are styles applied <h2> </div>
3.ajacent sibbling selector(+): put + symol in b/w div and h2 tag in css file <div> <h1> <h2> </div> <h2> style is applied to this tag <h2>
4.general sibling selector(~):put ~ symbol in div and h2 tag in css file
<div> <h1> <h2> </div> <h2> styles are applied for both h2 tags <h2>
HSL: ------------- hsl(hue saturation lightness) hue is degree on 0 to 360.0 is red,120 is green,240 is blue saturation percentage value. 0% means shade of gray,100% means full color lightness is also pec=rcentage value.0 is black,100 is white example:hsl(120,40%,50%)
hsla: ------------a means alpha same as values b/w 0.0 ans 1.0 hsla(240,100%,50%,0.4)
css animations: ------------- from{} to{}for only two values 0%-100% to use number of values animations-direction:reverse/alternate/alternate-reverse animation-timing-function:linear/ease-in/ease-out animation-play-state:puase; Box:hover{ animation-play-state:running; margin-top:100px;}
CSS ANIMATIONS: ------------------------ 1. an animation lets an element gradually change from one style to another. 2.you can change an many css properties you want,as many times you want.
TO use css animations ,you must first specify some keyframes for the animations.keyframes hold what styles the element will have at certain times. when you specify css styles inside the @keyframes rule,the animations will gradually change from the current style to the new style at certain times. to get an animations to work, you must bind the animation to an element.
1.animation-duration: --------------------- the animation-duration property defines how long animation should take to complete.if the animation-duration property is not specified,no animation will occur,becuase the default value is 0.
ANIMATION-DURATION:3s.
2.animation-delay: ------------------- the animation-delay property specifies a delay for the start an animation.
ANIMATION-DELAY:3s/-3s
3.animation-iteration-count: ---------------------------- the animation-iteration-count property specifies the number of times an animation should run.
ANIMATION-ITERATION-COUNT:
4.animation-direction: --------------------- the animation-direction property specifies weather an animation should be played forwards,backwards,or in alternate cycles
normal:- The animation is played as normal (forwards). This is default
reverse :- The animation is played in reverse direction (backwards) alternate :- The animation is played forwards first, then backwards alternate-reverse :- The animation is played backwards first, then forwards
5.animation-timing-function: --------------------------- the animation-timing-function property specifies the speed curve of the animations.
ease :- Specifies an animation with a slow start, then fast, then end slowly (this is default) linear: - Specifies an animation with the same speed from start to end ease-in :- Specifies an animation with a slow start ease-out :- Specifies an animation with a slow end ease-in-out: - Specifies an animation with a slow start and end.
6.animation-fill-mode: ------------------------ The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
ANIMATION-FILL-MODE: forwards/backwards/both.
forwards :- The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) backwards :- The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation- delay period both :- The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
FLEXBOX: ---------------- ------------------------- CSS FLEX CONTAINERS(parent element): ==================================== To start using the Flexbox model, you need to first define a flex container(parent element).
The flex container becomes flexible by setting the display property to flex: Example:
column:-The column value stacks the flex items vertically (from top to bottom) column-reverse:-The column-reverse value stacks the flex items vertically (but from bottom to top) row:-The row value stacks the flex items horizontally (from left to right) row-reverse:-The row-reverse value stacks the flex items horizontally (but from right to left) 2.flex-wrap: -------------- The flex-wrap property specifies whether the flex items should wrap or not.
FLEX-WRAP:wrap/nowrap/wrap-reverse
wrap:-The wrap value specifies that the flex items will wrap if necessary. nowrap:-The nowrap value specifies that the flex items will not wrap (this is default). wrap-reverse:-The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.
3.flex-flow: -------------- The flex-flow property is a shorthand property for setting both the flex- direction and flex-wrap properties.
center:-The center value aligns the flex items at the center of the container. flex-start:-The flex-start value aligns the flex items at the beginning of the container (this is default). flex-end:-The flex-end value aligns the flex items at the end of the container. space-around:-The space-around value displays the flex items with space before, between, and after the lines. space-between:-The space-between value displays the flex items with space between the lines.
5.align-item: --------------- The align-items property is used to align the flex items.
center:-The center value aligns the flex items in the middle of the container. flex-start:-The flex-start value aligns the flex items at the top of the container. flex-end:-The flex-end value aligns the flex items at the bottom of the container. stretch:-The stretch value stretches the flex items to fill the container (this is default). baseline:-The baseline value aligns the flex items such as their baselines aligns.
6.align-content: ----------------- The align-content property is used to align the flex lines.
space-between:-The space-between value displays the flex lines with equal space between them. space-around:-The space-around value displays the flex lines with space before, between, and after them. stretch:-The stretch value stretches the flex lines to take up the remaining space (this is default). center:-The center value displays the flex lines in the middle of the container. flex-start:-The flex-start value displays the flex lines at the start of the container. flex-end:-The flex-end value displays the flex lines at the end of the container.
CSS FLEX ITEMS(child elements):
====================================== The direct child elements of a flex container automatically becomes flexible (flex) items.
order: ------- The order property specifies the order of the flex items. EXAMPLE: <div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow: ----------- The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
EXAMPLE: Make the third flex item grow eight times faster than the other flex items:
align-self: ------------ The align-self property specifies the alignment for the selected item inside the flexible container. The align-self property overrides the default alignment set by the container's align-items property.
EXAMPLE: Align the third flex item in the middle of the container.
===================== You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
Laptop and Desktops:
1 2 3 Mobile phones and Tablets:
1 2 3
For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below).
<p>In this example, we change the percentage of flex to create different layouts for different screen sizes.</p> <p><b>Resize the browser window to see that the direction changes when the screen size is 800px wide or smaller.</b></p>
