CSS Notes for web development and frontend.pptx
- 3. CSS makeup not a program mŤng language, but a styŤng language But for stylŤng there should be some content, and that's why we studŤed html before css go to websŤtes & remove css Cascading Style Sheet It is a language that is used to Adesc Pribe Nthe Astyle of a document. COLLEGE
- 4. Basic Syntax Selecto r h1 { } Property Value semŤ colon shows that one property has ended & Ťt Ť s Ťmportant to put thŤs even though Ťt won't Ťncurr error APN A color: red;COL LEGE
- 5. Including Style Inline <h1 style="color: red">Apna College </h1> WrŤtŤng style dŤrectly ŤnlŤne on each element Style Ť s added usŤng the <style> element Ť n the same document <style> tag <style> h1 { color : red; } < / s APN A COLLEG E
- 6. Including Style External Stylesheet best way An inline style will override external and internal styles Writing CSS in a separate docuAment P& linkNing itAwith HTM L file COLLEGE
- 7. Color Property Used to set the color of foreground color: red; color: pink; color: blue; color: green; APNA COLLEG E
- 8. Background Color Property Used to set the color of background background-color: green; background-color: red; background-color: pink C; background-color: blue; APNA OLLEG E
- 9. Color Systems color: rgb(0, 255, 0); RGB color: rgb(255, 0, 0); we don't have to thŤnk on colors on our own, we can just use color pŤcker tools onlŤne or search onlŤne APNA COLLEG E
- 10. Color Systems color: #00ff00; Hex (Hexadecimal) color: #ff0000; google color pŤcker APNA COLLEG E
- 11. Selectors Universal Selector Element Selector * { } h1 { } Id Selector #myId { } Class Selector APNA .myClass { } COLLEGE
- 12. Practice Set 1 Set its background color to blue. Q1: Create a simple div with an id "box". Add some text content inside the div. Give them all a class "heading" & set color of "heading" to red. Q2: Create 3 headings with h1, h2 & h3. Q3: Create a button & set its background color to : green using css stylesheet blue using <style> tag pink using inline style APN A COLLEG E
- 13. Text Properties text alŤgnement doesn't mean alŤgn accordŤng to the page; Ť.e. rŤght does not mean on the page's rŤght sŤde but the parent's rŤght sŤde Ť n css3, latest css -> start and end are Ťntroduced for language support lŤke arabŤc text-align text-align : left / right / center APNA COLLEG E
- 14. Text Properties also add style, wavy, dotted or color like red can also set to none for hyperlinks text-decoration text-decoration : underline / oveArlineP/ lineN-throAugh COLLEG E
- 15. Text Properties font-weight : 100- 900 font-weŤght Ťs to show how dark or lŤght our text Ťs Ťt can be names or Ťn terms of numbers values from 100 to 900 font-weight font-weight : normal / bold / boAlder /PlightNer A COLLEG E
- 16. font-family : arial Text Properties font-family we can write multiple familiies as a fall-back mechanism APN A font-family : arial, roboto COL LEGE
- 17. APNA COLLEG E
- 18. pixels (px) Units in CSS Absolute 96px = 1 inch font-size: 2px; cm, m m, Ťnch & others are also there but pŤxels Ťs the APNA COLLEG E
- 19. line-height : 2px Text Properties line-height line-height : 3 line-height : normal APNA COLLEG E
- 20. Text Properties text-transform text-tranform : uppercase / lowAercaseP/ caNpitalizAe / none COLLEG E
- 21. Set id & text "outer" for the first one & "inner" for the second one. Set the outer div text size to 25px & inner div text size to 10px. Practice Set 2 Q1: Create a heading centred on the page with all of its text capitalized by default. Q2: Set the font family of all the cAontenPt in tNhe docAument to "Times New Roman". Q3: Create one div inside anCotherOdiv. LLEG E
- 24. By default, it sets the content area height of the element div { } Height Height content APNA height: 50px;COL LEGE
- 25. By default, it sets the content area width of the element div { } Widt h Width content APNA width: 50px;COL LEGE
- 26. border-width : 2px; border-style : solid / dott ed / dashed border-color : black; Border Used to set an element's border Border content APN A COLLEG E
- 27. Border Shorthand border : 2px solid blackA; PN A COLLEG E
- 28. Border Used to round the corners of an element's outer border edge border-radius : 10px; APNA border-radius : 50C% ; OLLEGE
- 30. padding: 50px; Padding Shorthand APN A padding: 1px 2px C3px 4Opx; L LEGE top | right | bottom | left -> clockwise
- 32. margin: 50px; Margi n Shorthand top | right | bottom | left -> clockwise APN A margin: 1px 2px 3Cpx 4Opx; LLEG E
- 33. Set its background color to green & the border radius to 50%. Q1: Create a div with height & width of 100px. Q2: Create the following navbar. Practice Set 3 APNA COLLEG E
- 35. Display Property inline-block - Similar to inline but we can set margin & padding. none - To remove element from document flow. display: inline / block / inline-block / none inline - Takes only the space ArequiPred Nby theAelement. (no margin/ padding) block - Takes full space Cavail Oable i Ln w Lidth E. G E
- 36. Visibility visibility: hidden; APN A COLLEGE Note : When visibility is set to none, space for the element is reserved. But for display set to none, no space is reserved or blocked for the element.
- 37. Alpha Channel opacity (0 to 1) RGBA color: rgba(255, 0, 0, 0.5 C); color: rgba(255, 0, 0, 1); APNA OLLEG E
- 38. (add the previous navbar in the header) Q1: Create a webpage layout with a header, a footer & a content area containing 3 divs. Set the height & width of divs to 100px. Q2: Add borders to all the divs. Practice Set 4 Q3: Add a different background color to each div with an opacity of 0.5 Q4: Give the content area an appropriate height. APN A COLLEG E
- 40. % Units in CSS Relative em rem more like vh, vw etc APNA COLLEG E
- 41. Percentage (%) It is often used to define a size as relative to an element's parent object. width : 33% ; margin-left : 50% ; show 50% of parent for h1 make one par & one chŤld dŤv sometŤmes the relatŤon Ť s also to some other property not just sŤze, but that Ťs not very commonly used APNA COLLEG E
- 42. Em font sŤze of chŤld wŤll be half of parent for 0.5em for paddŤng & margŤn Ťt's relatŤve to same element's font sŤze show both on same par & dŤv make a button wŤth border APNA COLLEG E
- 43. Rem (Root Em) font sŤze of chŤld wŤll be half of parent for 0.5em for paddŤng & margŤn Ťt's relatŤve to same element's font sŤze show both on same par & dŤv make a button wŤth border APNA COLLEG E
- 44. Others vh: relative to 1% viewport height vw : relative to 1% viewport width APNA COLLEG E
- 45. Position The position CSS property sets how an element is positioned in a document. position : static / relative /AabsoPlute N/ fixedA COLLEG E
- 46. Position static - default position (The top, right, bottom, left, and z-index properties have no effect) relative - element is relative to itAself. (PThe tNop, rigAht, bottom, left, and z-index will work) absolute - positioned relatCive toOits cloLsestLposEitionGed anEcestor. (removed from the flow) fixed - positioned relative to browser. (removed from flow)
- 47. z- index It decides the stack level of elements z-index : auto (0) z-index : 1 / 2 / ... z-index : -1 / - 2 / ... Overlapping elements with a larger z-index cover those with a smaller one. show 3d space APNA COLLEG E
- 48. Background Image Used to set an image as background APNA background- image : Curl("i Omage. Ljpeg L"); EGE
- 49. Background Size cover = fits with no empty space contain - fits with image fully visible auto = original size background-size : cover / contain / auto APN A COLLEG E
- 50. Qs: Create the following layout using the given html. Practice Set 5 Use the appropriate position property for the div element to place it at the right end of the page. (The div should not move even on scroll) Use z-index to place the div on top of page. <p> lorem*5 </p> <div> Love Nature </div> <p> lorem*5 </p> Give the div a height, width & some background image. APN A COLLEG E
- 52. Flexbox Flexible Box Layout It is a one-dimensional layout method for arranging items in rows or columns. APN A COLLEG E
- 53. The Flex Model set dŤsplay property of contaŤner to flex fŤrst CO L flex item flex container APNA LEmaGin axisE cross axis
- 54. Flexbox Direction It sets how flex items are placed in the flex container, along which axis and direction. flex-direction : row; (default) flex-direction : row- reverse; flex-direction : column; flex-direction : column- reverse; APN A COLLEG E
- 55. Flex Properties for Flex Container justify-content : alignment along the main axis. flex-start / flex-end / centre / spac e- evenly / align-content : alignment of space between & around the content along cross- axis APN A flex-wrap : nowrap / wrapC/ wraOp- reveLrseLEGE align-items : alignment along the cross axis.
- 56. Flex Properties for Flex Item align-self : alignment of individual along the cross axis. flex-grow : how much a flex item will grow relative to the rest of the flex items if space is available flex-shrink : how much a flex item will shrink relative to the rest of the flex items if space is available sŤlmŤlar to alŤgn Ťtems but for ŤndŤvŤdual element and Ťt overrŤdes alŤgn Ťtems grow & shrŤnk take values lŤke 0, 1, 2, 3 0 = doesn't grow at all A P N A COLLEG E
- 57. Now, use flexbox to place them all spaced equally in a single line. Qs: Create a navbar with 4 options in the form of anchor tags inside list items. Qs: Use flexbox to center one div inside another div. Qs: Which has higher priority - align-items or align- self? Practice Set 6 APNA COLLEG E
- 58. Media Queries Help create a responsive website Ťn today's world everyone has a dŤfferent devŤce wŤth thousand of dŤfferent screen sŤzes Ťf you buŤlt a websŤte people wŤll use Ťt on laptop, bŤg screen computers, an Ťphone, a bŤg screen androŤd phone or a small screen one, an Ťpad even orŤentatŤon Ťs dŤfferent lŤke landscape or portraŤt so Ťt's Ťmportant that layout looks good on all so we need desŤgn to be responsŤve, respond to dŤfferent screen sŤzes & orŤentatŤon @ media (width : 600px) { div { background-color : red; } } @ media (min-width : 600px) { div { background-color : red; } } APNA COLLEG E
- 59. Media Queries Ťn today's world everyone has a dŤfferent devŤce wŤth thousand of dŤfferent screen sŤzes Ťf you buŤlt a websŤte people wŤll use Ťt on laptop, bŤg screen computers, an Ťphone, a bŤg screen androŤd phone or a small screen one, an Ťpad even orŤentatŤon Ťs dŤfferent lŤke landscape or portraŤt so Ťt's Ťmportant that layout looks good on all so we need desŤgn to be responsŤve, respond to dŤfferent screen sŤzes & orŤentatŤon @media (min-width : 200px) and (min-width : 300px) { div { background-color : red; } } APN A COLLEG E
- 60. Qs: Add a media query to implement the following: the color of a div changes to green for viewport width less than 300px Practice Set 7 the color of a div changes to pink for width between 300px & 400px the color of a div changes to blue for width above 600px APN A the color of a div chang Ces to Ored fo Lr wid Lth b Eetw Geen 4 E00px & 600px
- 61. Level 5 THESE ARE thŤngs that can be called advanced CSS Ťt Ťs an Ťmportant chapter because we should know but practŤcally Ťtna aap use nahŤ karenge but pata hona chahŤye APNA COLLEG E
- 62. Transitions Transitions enable you to define the transition between two states of an element. to add some anŤmatŤon to elements tŤmŤng functŤon Ťs how the transŤtŤon should be applŤed show hover transition-property : property you want to transition (font-size, width etc.) transition-duration : 2s / 4ms .. APN A transition-timing-functionC: easeO-in / eLaseL-outE/ linGear / Esteps .. transition-delay : 2s / 4ms ..
- 63. Transition Shorthand property name | duration | timing-function | delay to add some anŤmatŤon to elements transition: font-size 2s ease-in-ouAt 0.2s;PNA COLLEG E
- 64. CSS Transform Used to apply 2D & 3D transformations to an element rotat e to add some more anŤmatŤon to how an element looks rotate Ťs sŤmple to understand, wŤll take angles and degrees Ťs most com mon transform also applŤes to all content ŤnsŤde APN A transform: rotate(45deg); COL LEGE
- 65. CSS Transform scal e x & y axŤs separately transform: scaleX(0.5); transform: scaleY(0.5); transform: scale(2); transform: scale(0.5); transform: scale(1, 2); APNA COLLEG E
- 66. CSS Transform transform: translate(20px); translate transform: translate(20px, 50px); we can also gŤve dŤstance Ť n other unŤts lŤke % ems rems etc show -ve values too APN A transform: translateX(20 Cpx); OL LEGE transform:
- 67. CSS Transform transform: skew (30deg); ske w now that we have done Ťt we can go and make some advanced 3d objects usŤng transform Ťf we are good at math APN A COLLEG E
- 68. @keyframe myName { from { font-size : 20px; } } Animation To animate CSS elements APN A to { font-size : 40px; } COLLEGE
- 70. Animation Shorthand animation : myName 2s linear 3s Ainfinit Pe nor Nmal A COLLEG E
- 71. % in Animation @keyframe myName { 0% { font-size : 20px; } 50% { font-size : 30px; } 100% { font-size : 40px; } } APN A COLLEG E
- 72. Qs: Create a simple loader using CSS Practice Set 8 Step1 : create a div with circular shape & a thick border from one end (top/bottom/left/right) APN A Step2 : To make it spin c Create Oan an Limat Lion Ewhic Gh tran Esforms it from 0deg to 360deg