Cascading Style Sheets isa style sheet language used for describing the presentation of a document written in a markup language such as HTMLit provides design to our web page. Chapter 1. Creating our first Css Website. DOM: Document Object Model en oot Tesaeses| Sat ies padding: » ‘As shown in image, on a website on clicking the inspect option where we can see the codes is called Document Object Model. HTML id and class attribute: When an html element is given an i, it serves as a unique identifier for that element (On the other hand, when a html element is given a class, t naw belongs to that class More than one elements can belong to a single class but every element must have a unique idiif assigned). Three ways to add css to html: 1. ° 2 tnline CSS:In inline css, we write style attribute within the element on which we want it to apply.This is how itis done. 3, External CSS: In this part of css, we create a external css file and then link it with our html page by using code: Here, stylecss is the name of css file we want to link and where we are going to add our css code. SS Selectors: Its used to select an element or elements for styling body( /selector/ color:red; — /declaration/ ° Element Selector: It is used to select an element based on the tag name ‘h2{ colour: blue; ) ID Selector: Its used to select an element with a given ic: ‘first( color: white; > Class Selector: It is used to select an element with a given class: -main( color: purple; ) Important: IF want to apply same css rule that in an element that | have already applied, then | can write it lke h1,h2,h3 (name of the elements in coma). + can be used as universal selector to select all elements. EXAMPLE « margi background-color: red; ) Chapter 2. Colors and Backgrounds 5S cles are simple key-value pairs with a selector. We can write CSS rules to change color and background olor: This rule in CSS provides color to the text. PCcolor: white; ) Color Values: 1. RGB: By using this value, we can mix three different color, Specify color using Red, green, blue values. Eg. rgb(200,98,70) 2. HEX: Specify color using hex code. Eg, #117180 3. HSL: Specify the color using hsl values. Eg, hsl(8,90%,63%) HSL stands for Hue, saturation, and lightness The value of the color or background color is provided as any one of these values. This rule in CSS specifies the background color of a container. PC background-color: brown; ) The background-color property The CSS background-color property specifies the background color of a container. Foreg } Background Image Property This property is used to set an image as the background. For Eg, The Background-repeat property: Can be any of following repeat-x = repeat in horizontal direction repeat-y = repeat in vertical direction. no-repeat = image not repeatbackground-repea The Background-size pro} Cover: fits and no empty space remains Contain: fits and image is fully visible Auto: display in original size {width) : set the width and height will be set automatically (width) (height) : set width and height The Background-position Property Sets the starting position of a background image * Background-attachment Property Defines a background scrollable/non-scrollable character oh a b: kgroundbackground-attachment: fixe d By using thi prperty, we are able to scroll the main content of the page but unable to scroll the image and border. background-attachment: scroll; By using this property in background-attachment, we wii be able to scroll image with main content, ‘The Background-shorthand Property By using this property, we can set multiple background properties, wred( background: red uri(‘img.jpg’) no repeat fixed center; ) Squence will be same, but can add or remove property. Chapter 3. CSS Box Model The CSS box mode! looks at the HTML elements as boxes. CONTENT: The main part which contain text, images etc is content PADDING: The outer layer of the content is called padding, BORDER: A border is a layer of padding MARGIN: Next layer after boder is margin. Lets understand the layers of htm! body by an example:Aeeear | background-color: elke) ara Eelanmer( = 6 padding: 133px; border: 2px li margin: 45px;Green highlighted part shows the margin. Brown highligthe: vignt ttt Ss on teig 6 OE i ae af of Zp LPs. ; OD yt part shows the padding. And Black highlighted part _ hottom, boro Seageuee ose — Glachilie Seti This is how, we can give four different values to margin property and the order is clock wise. border-radius: ‘And the output will be: Edges of the boxes are curvier.‘ale anf background-color: margin: 34px; height: 36px;(ia aca hc the margin which is greater willbe applied and other margin will not be applied wing Determines what out of paddling and borders included in elements width and height Can be content-box or border-box # Include only content in width/height Chapter 4. Font and Display The Display Property The display property in css is used to determine whether an element is treated as inline or block element and layout is used as its children, * Display Inline Takes only the space required by the element, No line breaks before and after. Setting width/height (or margin/padding) not allowed Examplend the output is ise we haven't set any diplay property here that's why box is taking 100% width here and we aree unable to Ay here than we will be able to cut the width and show different div in one line background-color: width: 312px; height: 124px; display: a 5 - box2{ background-color: width: 312px; height: 124px;Similar to inline but setting height, width, margin, and padding is allowed. Elements can sit next to each other note: In block and inline property setting margine and padding is not allowed, but we can set padding and margine in property inline- block. play None the element is removed from the document flow. Its space is not blocked. * Display Hidden the element is hidden but its space is reserved. Text-Align Property This property is used to set the alignment or position of text Example: text-align: Output By using this propety, we can change the position of the text. Output By using startin this this property, we can move text from left to right. OutputBy using end rule in text align property, we can add text from right to left side. ‘TextDecoration Property, Used to decorate the text Can be overin, line-through, underline, none EXAMPLE text-decoration: underline; Output By using underline in text decoration property, we can add a kine under the text, ‘text-decoration: overline; By using overline in text decoration property, we can add a line over the text. ‘text-decoration ine-through; By using line-through in text decoration property, we can add a line throughout the text. (We can also add dotted and wavy lines under the text by using this property) ‘text-transform property Used to specify uppercase and lowercase letters in a text EXAMPLE text-transform: uppercase; text-transform: lowercase; ‘Tore ps doors wet conseceirdipscing it epuine bract uodl se pore ee vie omnis cos voluplas etimped a provietvolyratu aun Yop By using this property we can change text into uppercase or lowercase. Line-Height Property: Used to specify the space between lines t line-height: 06; ) Font Property:Font plays a very important role in the look and feel of a website. *Font Size: This property helps to increase or decrease the size of the font. EXAMPLE chjome( font-size: 2px; ) *Font Family Property: Font Family specifies the font of a text, Can hold multiple values as a “fallback” system, For Example home font-family: “Gill Sans’, ‘Gill Sans MT", Calibri, “Trebuchet MS’, sans-ser Here have applied different types of font types. If frst font type is not available in my system then it will automatically set second font type apply default font type. This is known as Fallback System. and if any of these font types are not available in my system, then it | can check which font is applied in the inspect part which can be done on firefox browser. Here, undreline partis the font used How can we use google font? 1. We have to search google font and select the type of font we want to use.google fonts Q All [] Books (2) Image CN eway: @ Shoppin About 19,90,00,000 results (0.48 seconds) https://fonts.google.com Google Fonts: Browse Fonts Making the web more beautiful, fast, and open through great tyq eh ake PA ese UMC ora ar (ACL ea > armnge the size of the font and then co \k to the htm! file font-family: ‘Playfair Display', s erif; font-family: ‘Playfair Display’, serif;Output Other Font Properties ‘Some of the other font properties are listed below: font-size: Sets the size of the font font-style: Sets the font style font-variant: Sets whether the text is displayed in small-caps font-weight: sets the weight of the font We can set all these properties in firefox browser easly. Chapter 5. Size, Position and Lists There are more unit for describing the size other then ‘px’. Other units helps to make website look presentable, There are rem, cm, vw, vh, percentage etc Pixel: Pixel (px) are relative to the viewing device. For a device with the size 1920x1080, 1px is Tunit out of 1080/1920. Relative Lengths: These units are relative to the other length property. Following are some of the commonly used relative length 1. em: unit relative to the parent font size ‘em means "my parent element's font-size EXAMPLEHere | am taking an example by taking a parent tag that is div class red. And in red class | created one more class blue. Here in css | have provided font size to the red class 25px and blue tag's font size is 2em which means 2 will be multiplied with 25 Le 2'25=50px. And as result the font size of blue class will be SOpx. 2, rem : unit relative to the root font size ( tag). Similar to the em as the rem size is multiplied by the size of parent tag given in px. 3. yw: unit relative to 19 viewport width, 4. vi: unit relative to 1% viewport height. EXAMPLE, Let us say, have created two div classes namely box and boxt. And for the styling is as following: background-color height: 45vh; width: Here | have provided the background color to both boxes and as for height and width of box, | have provided height of 45vh and width of -35.w. Which means that height and witha will remain 45 viewport height of whatever device you are viewing the site on. Same goes for ww. 5. %: unit relative to the parent element. 1 Pixel is equal to 625 Percent. 1 Pixel is 6.25 times Bigger than 1 Percent. Min/max- height/width property Css has four more properties namely min-height, max-height and min-width, max-width, By using these property, we ensure thet the maximum or minimum height should not exceed from the limit, EXAMPLE:eee margin: @px; background-color: height: 10vh; min-height: 15vh; Here, | have given 15vh min-height to the container class, so even if| give the height less then 15vh as shown in image, its going to show ‘me the height 15vh only, Same goes for all max-min properties. The position property Used to manipulate the location of an element Following are the possible values + static: The default position. top/bottom/left/right/z-index has no effect, + The top/bottomyleft/right/z-index will now work. Otherwise, the element is in the flow of the document lke static. + absolute: The element is removed from the flow and is relatively positioned to its frst non-static ancestor. top/bottom etc. works + relati Basically the element on which absolute position property is applied will be removed from the document flow and it will move according to its first non-static parent element, + fixed: ust Ike absolute except the element is positioned relative to the browser window. The element will be unscrollabl + sticky: The element is positioned based on the user's scroll position z-index property ‘The z-index property specifies the stack order of an element It defines which layer will be above which in case of overlapping elements, BF eter, end dimutsion x Chapter 6. Flexbox Before we look nto float property, we will discuss about float property Float Property Float property helps to move athe element towards right/left side.Clear Property By using clear property in an element, no other element will be able to be float on the direction which is given not to float By using the clear property for both, no element will be able to float the left and right side of the element on which applied. The CSS Flexbox Aims at providing a better way to layout, align, and distribute space among items in a container. 4 ae a erat be aoa veel For Example: | have created four different boxes in one container as shown following rer eA Cee SUT ir) Pee Tne eee ml Tey vec ett See Maer eS edb Com box4">I live in Ambala Cantt with my mom After creating different boxes, now | will do the styling..box1{ background-color: Wii height: 345px; width: 246px; border: 2px solid Mgray; border-radius: 2px; container{ 1bR OE) Flex-direction:IMy Name Is Diwangna d am pursuing bachelors of computer application I live in Ambala Cantt with my mom If selected column-reverse, than the boxes will be arranged in reverse direction 2. Flex-Wrap Can be wrap, nowrap, wrap-reverse, Wrap items as needed with this property Foer Example; ee a) Sea ale Now when | resize the page, all boxes will get arranged according to the size. This property helps to make responsive website, 3. Justify-content Property Defines alignment al For Example enter;4. Align-items Property Defines alignment along the cross axis. Example: align-items: center; output: Difference between justif justify-content — controls alignment ofall items on the main axisalign-items — controls alignment of all tems on the cross axis. Main Axis - flex-direction: column —_———_ Cross Axis - flex-direction: column —————$> 5. Align-content Aligns a flex containers lines when there is extra space in the cross axis. You must've enabled flex-wrap property to use this property as it will fil the extra space between the cross axis. Flex properties for the children element (flex items) 1. Order Controls the order in which the items appear in the flex container For Example: | want to change the arder of boxes from 2,3,4 and 1. So I will write the property order:4 on the element which order has to change.Output 1am pars opplicat lors of computer [eeseeroct live in Ambala Cant with my mom |My Name Is Diwanga The order of boxt has changed to no. 4 2. Align-self Allows default alignment to be overridden for the individual flex items For Example: | want to move box3 to the end of fflex page so | will write align-self: flex-end; ‘Tam pursuing bachelors of computer ; Yd live in Ambala Cantt with my mom application My Name Te Diwangua Like this. 3. Flex-grow Defines the ability fora flex item to grow. For Example: | want to grow the size of box1, than Iwill use flex-grow: 3: My Name Is Diwangna ‘And the size of box 1 will increase. Flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items, Used when the items are overflowing from the flexbox, Chapter 7. CSS Grid and Media QueriesLike tables, grid layout enables an author to align elements into columns and rows. and its parent and children elements, lam going to make a ‘container’ div in which we have chil class class class class classprid-row-gap: 10px; erid-column-gap: 16 Output Grid-template-columns Used to create more than one columns Grid-template-column takes a particular width columns and the no. of columns. prid-template-columns: JE IF Auto stands for automatic here and no. of auto decides the no. of columns. The grid-gap property Shorthand property for grid-row-gap & grid-column-gap grid-gap: 10px 20px; Note:Fora single ve of grid-gap, both row and column gaps can be set in one value Following are the properties for grid container: 1. The grid-template-columns property can be used to specify the width of columns For Example 2. The grid-template-rows property can be used to specify the height of each row 3. The justify content property is used to align the whole grid inside the container. For Example: justify-content: center:4. The align-content property is used to vertically align the whole grid inside the container. For Example: align-content: center; Following are the properties for grid item: 1. The Grid-column property how many columns an items will span, memes Ne background-color: border: 2px grid-column: 1/ I * When you add 1/span 3, it means that 1 is the no, of row/column and 3 refers to the no, of boxes itis going to span in one.