CSS With Media Query.pdf

What is CSS? - CSS stands for Cascading Style Sheets. - CSS is the language we use to style an HTML document. - CSS describes how HTML elements should be displayed. - CSS describes how HTML elements are to be displayed on screen, paper, or in other media. Advantages of CSS:...

What is CSS? - CSS stands for Cascading Style Sheets. - CSS is the language we use to style an HTML document. - CSS describes how HTML elements should be displayed. - CSS describes how HTML elements are to be displayed on screen, paper, or in other media. Advantages of CSS: - CSS saves time: You can write CSS once and then reuse the same sheet in multiple HTML pages. - Pages load faster: If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. - Easy maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. - Platform Independence: The Script offers consistent platform independence and can support the latest browsers as well. CSS - Syntax: selector { property: value; } Types Of CSS / Stylesheet: - CSS can be added to HTML documents in 3 ways: 1. Inline - by using the style attribute inside HTML elements 2. Internal - by using a element in the section 3. External - by using a element to link to an external CSS file 4. Multiple CSS - Note: The most common way to add CSS is to keep the styles in external CSS files. 1. Inline CSS: - Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. - If you want to use inline CSS, you should use the style attribute to the relevant tag. Example: A Blue Heading 2. Internal CSS: - An internal CSS is used to define a style for a single HTML page. - An internal CSS is defined in the section of an HTML page, within a element. Example: Page Title  body { background-color: red; } h1 { color: blue; } This is Heading. 3. External CSS: - An external style sheet is used to define the style for many HTML pages. - To use an external style sheet, add a link to it in the section of each HTML page: Example: Index.html This is Heading. This is Paragraph. style.css body { background-color: red; } h1 {  color: blue; } p{ color: white; } 4. Multiple CSS: - Actually Multiple Stylesheet is not a type of Style Sheets but it is a combination of 1. External Style Sheet, 2. Internal Style Sheet and 3. Inline Style Sheet - As per designers requirement. - We can use more than one style sheet in a HTML document file. - This method of working with more then one style sheet that’s why it is known as Multiple Style Sheet. Example: Index.html Page Title body { background-color: red; } h1 { color: blue; } This is Heading. A red paragraph.  style.css body { background-color: red; } p{ background-color: yellow; } CSS Selectors: There are two types of selector: Class ID CSS selectors select HTML elements according to its id, class, type, attribute etc. Class: - The.class selector selects elements with a specific class attribute. - To select elements with a specific class, write a period (.) character, followed by the name of the class. - HTML elements can also refer to more than one class (look at Example below). Syntax:.class { css declarations; } Example: p.center { color: red; text-align: center; }  p.large { font-size: 30px; } Skywin IT Academy ID: - The #id selector styles the element with the specified id. Syntax: #id { css declarations; } Example: #firstname { font-size: 25px; color: blue; } Skywin IT Academy CSS Comments:  - Comments are used to explain the code, and may help when you edit the source code at a later date. - Comments are ignored by browsers. - A CSS comment is placed inside the element, and starts with Syntax: CSS Padding: - An element's padding is the space between its content and its border. - Negative values are not allowed. - This property can have from one to four values. If the padding property has four values: padding: 10px 5px 15px 20px; - top padding is 10px - right padding is 5px - bottom padding is 15px - left padding is 20px If the padding property has three values: padding: 10px 5px 15px; - top padding is 10px - right and left padding are 5px - bottom padding is 15px If the padding property has two values: padding: 10px 5px; - top and bottom padding are 10px - right and left padding are 5px If the padding property has one value: padding: 10px; - all four paddings are 10px padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;  Syntax: Padding: length; - length - specifies a padding in px, pt, cm, etc. - % - specifies a padding in % of the width of the containing element. Example: Page Title p{ padding: 70px; } This element has a padding of 70px. CSS Margins: - Margins are used to create space around elements, outside of any defined borders. - Negative values are allowed. - This property can have from one to four values. If the margin has four values: margin: 10px 5px 15px 20px; - top margin is 10px - right margin is 5px - bottom margin is 15px - left margin is 20px If the margin property has three values: margin: 10px 5px 15px; - top margin is 10px - right and left margin are 5px  - bottom margin is 15px If the margin property has two values: margin: 10px 5px; - top and bottom margin are 10px - right and left margin are 5px If the margin property has one value: margin: 10px; - all four margin are 10px margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; Syntax: margin: length | auto; - length - specifies a padding in px, pt, cm, etc. - % - specifies a padding in % of the width of the containing element. - Auto - The browser calculates a margin Example: Page Title p{ margin: 30px; } This element has a margin of 30px. CSS Text: - The CSS text properties allow you to change the appearance of text. - It is possible to change the color of text, increase or decrease the space between characters in a text, align a text, decorate a text and more. - Text properties: 1. Color Property 2. Text-align Property 3. Text-decoration Property 4. Text-transform Property 5. Word-spacing Property 6. Letter-spacing Property 1. Color: - The color property specifies the color of text. Syntax: Color: color name; Example: body { color: red; } h1 { color: #555555; } Skywin IT Academy We provide IT training to students in various technologies by experts who have real-time industry  knowledge so that candidates can start their career and be in agree with the industry. Output: 2. Text-align: - The text-align property specifies the horizontal alignment of text in an element. - Syntax: text-align: left | center |right | justify ; 3. Text-decoration: - Text-decoration property takes underline, overline, line-through values to decorate the text in different ways. Syntax:  text-decoration: none | overline | line-through |underline; Value Description Example none It will not give any decoration to the text. It is just like a normal text. overline It will give a line on top of the text with a 1px size. line-through It will give the line from the middle of the text with 1px size. underline It will give a line at the bottom of the text with a 1px size. 4. Text-transform: - The text-transform property controls the capitalization of text. Syntax: transform: uppercase | lowercase | capitalize | none; Value Description Example uppercase Transforms all characters to SKYWIN IT ACADEMY uppercase. lowercase Transforms all characters to skywin it academy lowercase. capitalize Transforms the first character in Skywin It Academy each word to uppercase. none Produces no capitalization effect at Normal Text all. 5. Word-spacing:  - The word-spacing property increases or decreases the white space between words. Syntax: Word-spacing: normal | length; Example:.normal { word-spacing: normal; }.length { word-spacing: 5px; } Skywin IT Academy (normal) Skywin IT Academy Output: 6. Letter-spacing: - The letter-spacing property increases or decreases the space between characters in a text. Syntax:  Letter-spacing: normal | length; Example:.normal { letter-spacing: normal; }.length { letter-spacing: 5px; } Skywin IT Academy (normal) Skywin IT Academy Output: CSS Fonts: - The CSS font properties allow you to change the font family, boldness, size & the style of a text. - Fonts properties: 1. Font-family Property  2. Font-style Property 3. Font-weight Property 4. Font-size Property 5. Font-variant Property 1. Font-family: - The font-family property specifies the font for an element. - There are 2 types of font families which you can use Specific Font-Family – This is a specific type of font like Arial, Verdana, Tahoma, and Calibri. Generic Font-Family – This is a General Font and almost all browsers support this generic font family. Example: serif, Sans-serif etc. Syntax: font-family: family-name|generic-family; 2. Font-style: - The font-style property specifies the font style for a text. - This property has three values: normal - The text is shown normally. italic - The text is shown in italics. oblique - The text is "leaning" (oblique is very similar to italic, but less supported). Syntax: font-style: normal | italic | oblique; Example: p.normal { font-style: normal; }  p.italic { font-style: italic; } p.oblique { font-style: oblique; } The Font-Style Property. This is a normal Style. This is an italic Style. This is an oblique Style. Output: 3. Font-weight: - The font-weight property sets how thick or thin characters in text should be displayed. Syntax: font-weight: normal | bold | bolder | lighter | number; Value Description  normal Defines normal characters. This is default, It is equal to the number value 400. bold Defines thick characters, it is equal to the number value 700. bolder Defines thicker characters. lighter Defines lighter characters. 100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold initial This sets the font-weight to the initial (default) value. inherit This sets the font-weight equal to the value inherited from its parent element. 4. Font-size: - The font-size property sets the size of the text. - To allow users to resize the text (in the browser menu), many developers use em instead of pixels. Syntax: font-size: (value)px; 5. Font-variant: - The font-variant property is used to convert all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters. Syntax:  font-variant: normal|small-caps; Example: p.normal { font-variant: normal; } p.small-caps { font-variant: small-caps; } The Font-variant Property. This is a normal Style. This is a Small-caps Style. Output: CSS Backgrounds: - The CSS background properties are used to add background effects for elements. - Background properties: 1. background-color 2. background-image  3. background-repeat 4. background-attachment 5. background-position 6. background-size 1. Background-color: - The background-color property sets the background color of an element. Syntax: background-color: color | transparent; Example: body { background-color: Orange; } OR body { background-color: #ff9900; } OR body { background-color: rgb(255,130,255; } OR The background-color Property. The background color can be specified with a color name. Output: 2. Background-image: - The background-image property sets one or more background images for an element.  - By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Syntax: background-image: URL | none; Example: body { background-image: url(“nature.jpg”); } The background-image Property Hello World! Output: 3. Background-repeat Property: - The background-repeat property sets if/how a background image will be repeated. - By default, a background-image is repeated both vertically and horizontally. Syntax: background-repeat: repeat | repeat-x | repeat-y | no-repeat;  Value Description repeat The background image is repeated both vertically and horizontally repeat-x The background image is repeated only horizontally repeat-y The background image is repeated only vertically no-repeat The background-image is not repeated. The image will only be shown once Output: 4. Background-attachment: - The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. Syntax: background-attachment: scroll | fixed; Value Description scroll The background image will scroll with the page. This is the default. fixed The background image will not scroll with the page. 5. Background-position: - The background-position property sets the starting position of a background image. Syntax: background-position: value; Value Description left top left center left bottom right top right center If you only specify one keyword, the other value will be right bottom "center" center top center center center bottom x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. xpos ypos The first value xpos is the horizontal position and the second value ypos is the vertical. The top left corner is 0 0. Output: 6. Background-size: - The background-size CSS property is used to set the size of a background image of an element. Syntax: background-size: cover | contain; Value Description cover This value is used to resize the background image to cover the entire container. contain Without stretching or cropping, it resizes the background image to ensure the image is completely visible. CSS Borders: - The CSS border properties allow you to specify the style, width, and color of an element's border. - Border properties: Border Style Border-width Property Border-color Property Shorthand border Property Border Sides Property Rounded border Property Border Style: - The border-style property specifies what kind of border to display. - The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). - Note: None of the OTHER CSS border properties will have ANY effect unless the border-style property is set! dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border Output:  Border-width: - The border-width property specifies the width of the four borders. - The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three predefined values: thin, medium, or thick - The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border) Output: CSS box-shadow: - The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element. - The multiple effects can be applied to the element’s frame which is separated by the comma. - The box-shadow can be described using X and Y offsets relative to the element, blur and spread radius, and color. - Default Value : Its default value is none. Syntax: box-shadow: h-offset v-offset blur spread color|none|inset|initial|inherit; Value Description none Default value. No shadow is displayed h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box blur Optional. The blur radius. The higher the number, the more blurred the shadow will be spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow initial Set this property to its default value. inherit Inherits this property from its parent element. Example:.example1 { width: 300px; border: 1px solid; padding: 10px; margin-bottom: 50px; box-shadow: 10px 10px black; }.example2 { width: 300px; border: 1px solid; padding: 10px; margin-bottom: 50px; box-shadow: 10px 10px 8px green; }.example3 { width: 300px; border: 1px solid; padding: 10px; margin-bottom: 50px; box-shadow: 10px 10px 8px 10px red; } Skywin IT Academy Skywin IT Academy Skywin IT Academy Output: CSS text-shadow: - The text-shadow property in CSS is used to add shadows to the text. - This property accepts a list of shadows that are to be applied to the text, separated by the comma. - Default Value : Its default value is none. Syntax: text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; Value Description h-shadow Required. The position of the horizontal shadow. Negative values are allowed v-shadow Required. The position of the vertical shadow. Negative values are allowed blur-radius Optional. The blur radius. Default value is 0 color Optional. The color of the shadow. none Default value. No shadow initial Set this property to its default value. inherit Inherits this property from its parent element. Example:.example1 { text-shadow: 5px 5px red; }.example2 { text-shadow: 5px 5px 10px red; } Skywin IT Academy Skywin IT Academy Output: CSS Opacity: - The CSS opacity property is used to specify the transparency of an element. Syntax: opacity: number|initial|inherit; Value Description number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) initial Set this property to its default value. inherit Inherits this property from its parent element. Example: div { width: 300px; padding: 10px; margin-bottom: 50px; background: rgb(76, 175, 80); }.first { opacity: 0.6; }.second { opacity: 0.3; }.third { opacity: 0.1;  }.example1 { background: rgba(76, 175, 80, 0.6); }.example2 { background: rgba(76, 175, 80, 0.3); }.example3 { background: rgba(76, 175, 80, 0.1); } Transparent Boxes Skywin IT Academy Skywin IT Academy Skywin IT Academy Skywin IT Academy Using RGBA color values: Skywin IT Academy Skywin IT Academy Skywin IT Academy Skywin IT Academy Output: CSS Box Sizing: - The CSS box-sizing property is used to specify how to calculate the total height and width of an element. - It controls the size of an element with a specified height and width. - It allows you to include the padding and border within the total height and width of the element. - Without CSS box-sizing: By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element - It means if we create a box of some specific height and width and then add padding and border to it, it will look wider than the actual width. Syntax: box-sizing: content-box|border-box; Example:.div1 { width: 300px; height: 100px; border: 1px solid red; padding: 30px; margin-bottom: 50px; }.div2 { width: 300px; height: 100px; border: 1px solid red; padding: 30px; margin-bottom: 50px; box-sizing: border-box; } Skywin IT Academy Skywin IT Academy Output: CSS important property: - The !important rule in CSS is used to add more importance to a property/value than normal. - In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! Syntax: element { property: value !important; } Example:.div1 { background-color: blue; }.div2 { background-color: green; } div { width: 500px; padding: 10px; margin-bottom: 15px; background-color: red !important; } Skywin IT Academy Skywin IT Academy Skywin IT Academy  Output: CSS Float: - The float property is used to change the normal flow of an element. - It defines how an element should float and place an element on its container’s right or left side. - Note:The default value of the float property is none and it won’t work with the absolutely positioned element. Syntax: float: none | left | right | inherit | initial; Value Description none It is the default value of a float property. The element must not float. left The element floats to the left of its container. right The element floats to the right of its container. Inherit Property must be inherited from its parent element. initial Property is set to its default value. Example 1:  h1{ margin-top: 0; } img{ width: 200px; float: none; } div { width: 500px; height: 350px; border: 2px solid black; padding: 10px; } p{ text-align: justify; } Float None Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to deliver integrated learning solutions. We have been delivering quality results over the years. In Skywin IT Academy real time exposure is given to the candidates so that they learn the IT courses effectively and are job ready right from day one. We have a team of industry experts and experienced professional trainers who have exposure to multiple projects and also they give lifetime support to students. We  offer certificate courses. Inclusive of practical explanation learning, the long-term courses feature subjects such as advanced web design, advanced web development, ecommerce development, full stack development, SEO & digital marketing and advanced UI/UX design. Output: Example 2: h1{ margin-top: 0; } img{ width: 200px; float: left;  margin-right: 15px; } div { width: 500px; height: 330px; border: 2px solid black; padding: 10px; } p{ text-align: justify; } Float Left Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to deliver integrated learning solutions. We have been delivering quality results over the years. In Skywin IT Academy real time exposure is given to the candidates so that they learn the IT courses effectively and are job ready right from day one. We have a team of industry experts and experienced professional trainers who have exposure to multiple projects and also they give lifetime support to students. We offer certificate courses. Inclusive of practical explanation learning, the long-term courses feature subjects such as advanced web design, advanced web development, ecommerce development, full stack development, SEO & digital marketing and advanced UI/UX design. Output: Example 3: h1{ margin-top: 0; } img{ width: 200px; float: right; margin-left: 15px; } div { width: 500px; height: 330px; border: 2px solid black; padding: 10px; } p{ text-align: justify; }  Float Right Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to deliver integrated learning solutions. We have been delivering quality results over the years. In Skywin IT Academy real time exposure is given to the candidates so that they learn the IT courses effectively and are job ready right from day one. We have a team of industry experts and experienced professional trainers who have exposure to multiple projects and also they give lifetime support to students. We offer certificate courses. Inclusive of practical explanation learning, the long-term courses feature subjects such as advanced web design, advanced web development, ecommerce development, full stack development, SEO & digital marketing and advanced UI/UX design. Output: CSS Gradients: - The Gradient in CSS is a special type of image that is made up of progressive & smooth transition between two or more colors. - CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) Linear Gradients: - It includes the smooth color transitions to going up, down, left, right, and diagonally. - The minimum two-color required to create a linear gradient. More than two color elements can be possible in linear gradients. - The starting point and the direction are needed for the gradient effect. Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2,...); The linear-gradient can be implemented in the following ways: Top to Bottom: to bottom Example: background-image: linear-gradient(to bottom, red, yellow); Bottom to top: to top Example: background-image: linear-gradient(to top, red, yellow); Left to right: to right Example: background-image: linear-gradient(to right, red, yellow); Right to left: to left Example: background-image: linear-gradient(to left, red, yellow); Diagonal: top-left to bottom-right: to bottom right Example: background-image: linear-gradient(to bottom right, red, yellow); Angles: If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to "to top''. A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom". A value of 270deg is equivalent to "to left ''. Example: background-image: linear-gradient(180deg, red, yellow);  Repeating Linear Gradient: CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The image here contains 3 colors in each transition with some percentage value. Example: background-image: repeating-linear-gradient(red, yellow 10%, green 20%); Radial Gradients: - A radial gradient differs from a linear gradient. It starts at a single point and emanates outward. Syntax: background-image: radial-gradient(shape, start-color,..., last-color); The radial-gradient can be implemented in the following ways: Radial Gradient - Evenly Spaced Color Stops (this is default): Example: background-image: radial-gradient(red, yellow, green); Radial Gradient - Differently Spaced Color Stops: Example: background-image: radial-gradient(red 5%, yellow 15%, green 60%); Set Shape: The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse. Example: background-image: radial-gradient(circle, red, yellow, green); Repeating Radial Gradient: Example: background-image: repeating-radial-gradient(circle, red 5%, yellow 10%, green 15%); Conic Gradients: - A conic gradient is a gradient with color transitions rotated around a center point. - To create a conic gradient you must define at least two colors. - By default, angle is 0deg and position is center.  - If no degree is specified, the colors will be spread equally around the center point. Syntax: background-image: conic-gradient([from angle] [at position,] color [degree], color [degree],...); The conic-gradient can be implemented in the following ways: Degrees: Example-1: background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg); Example-2: background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg); Specified From Angle: The [from angle] specifies an angle that the entire conic gradient is rotated by. Example: background-image: conic-gradient(from 90deg, red, yellow, green); Specified Center Position: Example: background-image: conic-gradient(at 60% 45%, red, yellow, green); Repeating a Conic Gradient: Example: background-image: repeating-conic-gradient(red 10%, yellow 20%); CSS Pseudo-elements: - A CSS pseudo-element is used to style specified parts of an element. - For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax: selector::pseudo-element { property: value; } The ::first-letter Pseudo-element: - The ::first-letter pseudo-element is used to add a special style to the first letter of a text. - The following properties apply to the ::first-letter pseudo- element:  font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear Example: body { background-color: #b3f0ff; } p::first-letter { color: #ff0000; font-size: 40px; } Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Output: The ::first-line Pseudo-element: - The ::first-line pseudo-element is used to add a special style to the first line of a text. - The following properties apply to the ::first-line pseudo-element: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear Example: body { background-color: #b3f0ff; } p::first-line { color: #ff0000; font-variant: small-caps; } Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to  deliver integrated learning solutions. We have been delivering quality results over the years. In Skywin IT Academy real time exposure is given to the candidates so that they learn the IT courses effectively and are job ready right from day one. We have a team of industry experts and experienced professional trainers who have exposure to multiple projects and also they give lifetime support to students. We offer certificate courses. Inclusive of practical explanation learning, the long-term courses feature subjects such as advanced web design, advanced web development, ecommerce development, full stack development, SEO & digital marketing and advanced UI/UX design. The course schedule is designed to provide quality and dynamic IT training to young IT minds in an effort to guide them in their nascent careers and huge placement support with Top companies. Output: Pseudo-elements and HTML Classes: Example:  body { background-color: #b3f0ff; } p.intro::first-letter { color: #ff0000; font-size: 200%; } Skywin IT Academy Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Output: Multiple Pseudo-elements: Example: body { background-color: #b3f0ff; } p::first-letter { color: #ff0000; font-size: xx-large; }  p::first-line { color: #0000ff; font-variant: small-caps; } Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to deliver integrated learning solutions. We have been delivering quality results over the years. In Skywin IT Academy real time exposure is given to the candidates so that they learn the IT courses effectively and are job ready right from day one. We have a team of industry experts and experienced professional trainers who have exposure to multiple projects and also they give lifetime support to students. We offer certificate courses. Inclusive of practical explanation learning, the long-term courses feature subjects such as advanced web design, advanced web development, ecommerce development, full stack development, SEO & digital marketing and advanced UI/UX design. The course schedule is designed to provide quality and dynamic IT training to young IT minds in an effort to guide them in their nascent careers and huge placement support with Top companies. Output: The ::selection Pseudo-element: - The ::selection pseudo-element matches the portion of an element that is selected by a user. - The following CSS properties can be applied to ::selection: color, background. Example: body { background-color: #b3f0ff; } ::selection { color: red; background: yellow; } Skywin Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement.  Skywin IT Academy Output: The ::marker Pseudo-element: - The ::marker pseudo-element selects the markers of list items. Example: body { background-color: #b3f0ff; } ::marker { color: red; font-size: 23px; } Coffee Tea Milk  Coffee Tea Milk Output: The ::before Pseudo-element: - The ::before pseudo-element can be used to insert some content before the content of an element. Example: body { background-color: #b3f0ff; } h1::before { content: url(smily.png);  } Skywin Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy Output: The ::after Pseudo-element: - The ::after pseudo-element can be used to insert some content after the content of an element. Example: body { background-color: #b3f0ff; }  h1::after { content: url(smily.png); } Skywin Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy Output: CSS Pseudo-classes: - A pseudo-class is used to define a special state of an element. Syntax: selector:pseudo-class { property: value; } The :first-child Pseudo-class: - The :first-child pseudo-class matches a specified element that is the first child of another element. Example: p:first-child { color: blue; } Skywin IT Academy Institute in Surat The :last-child Pseudo-class: - The :last-child selector matches every element that is the last child of its parent. Example: p:last-child { background: #ff0000; }  Skywin IT Academy Institute in Surat Best Institute in Surat IT Institute The :nth-child() Pseudo-class: - The :nth-child(n) selector matches every element that is the nth child of its parent. - n can be a number, a keyword (odd or even). Example: div:nth-child(2) { background: red; } li:nth-child(2) { background: light green; } :nth-child(3) { background: yellow;  } Skywin IT Academy Skywin IT Academy Skywin IT Academy Skywin IT Academy Institute in Surat Best Institute in Surat IT Institute IT Institute in Surat Anchor Pseudo-classes: - Links can be displayed in different ways - Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive. Example:  a:link { color: #FF0000; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; } a:active { color: #0000FF; } Skywin IT Academy Skywin Skywin IT Academy is a leading IT training institute in Surat. We provide best training services and real-time learning experience to deliver integrated learning solutions. We have been delivering quality results over the years.  CSS :focus Selector: - The :focus selector is used to select the element that has focus. Example: input:focus { background-color: yellow; } Skywin IT Academy Skywin IT Academy is a leading IT training institute in Surat. First name: Last name: CSS Transitions: - CSS transitions allow you to change property values smoothly, over a given duration. - Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. - Transitions properties:  1. transition-property 2. transition-duration 3. transition-timing-function 4. transition-delay 5. transition Transition-property: - Specifies the name or names of the CSS properties to which transitions should be applied. Syntax: transition-property: name of css property | all; Transition-duration: - Specifies the duration over which transitions should occur. - You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. Syntax: transition-duration: time duration(in second); Transition-timing-function: - The transition-timing-function property specifies the speed curve of the transition effect. - The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function For more information: Cubic-bezier Syntax:  transition-timing-function: linear |ease| ease-in | ease-out | ease-in-out | cubic-bezier; Transition-delay: - Defines how long to wait between the time a property is changed and the transition actually begins. Syntax: transition-delay: time duration(in second); Transition: - The transition shorthand CSS syntax is written as follows: Syntax: transition: property duration timing-function delay; Example: transition: all 2s ease.4s; CSS 2D Transforms: - CSS transforms allow you to move, rotate, scale, and skew elements. - Note: -ms-transform: scale(2.5,2); / IE 9 / -webkit-transform: scale(2.5,2); / Safari / transform: scale(2.5,2); / Standard syntax / - 2D Transforms Methods: 1. translate() 2. rotate() 3. scale() 4. skew() Translate() Method: - The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). Syntax: transform: translate(Value(px), Value(px));  Example:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; }.child-div { background-color: coral; width: 150px; height: 150px; transition-duration:.3s; }.child-div:hover { transform: translate(50px, 100px); } Rotate() Method: - The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. Syntax: transform: rotate(Value(deg));  Example:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; }.child-div { background-color: coral; width: 150px; height: 150px; transition-duration:.3s; }.child-div:hover { transform: rotate(20deg); } Scale() Method: - The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). Syntax: transform: scale(Value, Value);  Example:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; }.child-div { background-color: coral; width: 150px; height: 150px; transition-duration:.3s; }.child-div:hover { transform: scale(2, 0.5); } Skew() Method: - The skew() method skews an element along the X and Y-axis by the given angles. Syntax: transform: skew(Value(deg), Value(deg));  Example:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; }.child-div { background-color: coral; width: 150px; height: 150px; transition-duration:.3s; }.child-div:hover { transform: skew(20deg, 10deg); } CSS Animations: - An animation lets an element gradually change from one style to another. - You can change as many CSS properties you want, as many times as you want.  - To use CSS animation, you must first specify some keyframes for the animation. - Keyframes hold what styles the element will have at certain times. - Animation Property: @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation @keyframes: - When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. Syntax: @keyframes animation-name {keyframes-selector {css-styles;}}; Example 1:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; animation-name: demo; animation-duration: 1s; } @keyframes demo { from { border-radius: 0%; }  to { border-radius: 50%; } } Example 2:.main-div { background-color: burlywood; width: 500px; height: 500px; margin: 50px auto; animation-name: demo; animation-duration: 5s; } @keyframes demo { 0%{ border-radius: 0%; background-color: burlywood } 20%{ border-radius: 10%; background-color: coral } 40%{ border-radius: 20%; background-color: red  } 60%{ border-radius: 30%; background-color: blue } 80%{ border-radius: 40%; background-color: green } 100%{ border-radius: 50%; background-color: orange } } Animation-name: - To get an animation to work, you must bind the animation to an element. Syntax: animation-name: name; Animation-duration: - The animation-duration property defines how long an animation should take to complete. - If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds). Syntax: animation-duration: time duration(in second); Animation-delay: - The animation-delay property specifies a delay for the start of an animation. Syntax: animation-delay: time duration(in second); Animation-iteration-count: - The animation-iteration-count property specifies the number of times an animation should run. Syntax: animation-iteration-count: count; Animation-direction: - The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. - The animation-direction property can have the following values: 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 Syntax: animation-direction: normal | reverse | alternate | alternate-reverse; Animation-timing-function: - The animation-timing-function property specifies the speed curve of the animation. - The animation-timing-function property can have the following values: 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  cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function For more information: Cubic-bezier Syntax: animation-timing-function: linear |ease| ease-in | ease-out | ease-in-out | cubic-bezier; Animation: - The animation property is a shorthand property for the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction properties. Syntax: animation: animation-name | Animation-duration | animation-timing-function | animation-delay | Animation-iteration-count | animation-direction; CSS position: - The position CSS property sets how an element is positioned in a document. - The top, right, bottom, and left properties determine the final location of positioned elements. - There are five different types of position property available in CSS: Static Fixed Sticky Relative Absolute Static: - This is a by default position for HTML elements. - An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. - It is not affected by the top, bottom, left and right properties. Example:  body { background-color: #b3f0ff; }.static { width: 500px; position: static; border: 3px solid #cc0000; } Skywin IT Academy Output: Fixed: - An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. - The top, right, bottom, and left properties are used to position the element. Example:  body { background-color: #b3f0ff; }.fixed { width: 500px; position: fixed; bottom: 0px; right: 0px; border: 3px solid #cc0000; } Skywin Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy Output: Sticky: - An element with position: sticky; is positioned based on the user's scroll position. - Note: Specify at least one of top, right, bottom or left for sticky positioning to work. Example: body { background-color: #b3f0ff; }.sticky { width: 500px; position: sticky; top: 0px; padding: 5px; background-color: #ffcccc; border: 3px solid #cc0000; } Skywin Skywin IT Academy Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement.....  Output: Relative: - An element with position: relative; is positioned relative to its normal position. - Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. - Other content will not be adjusted to fit into any gap left by the element. Example: body { background-color: #b3f0ff; }.relative { width: 500px; position: relative; left: 50px; border: 3px solid #cc0000; }  Skywin IT Academy Output: Absolute: - An element with position: absolute; is used to position an element relative to the first parent element that has a position other than static. Example: body { background-color: #b3f0ff; }.relative { width: 400px;  height: 200px; position: relative; border: 3px solid #cc0000; }.absolute { width: 200px; height: 100px; position: absolute; top: 80px; right: 0px; border: 3px solid #cc0000; } Skywin Skywin IT Academy is the best IT institute in Surat. Learn to code, web design, and digital marketing from experienced IT trainers. 100% job placement. Skywin IT Academy In Surat Output: CSS Z-index: - The z-index property specifies the stack order of an element. - An element with greater stack order is always in front of an element with a lower stack order. - Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). Syntax: z-index: auto|number|initial|inherit; z-index: 1; - The z-index value is relative to the other ones. The target element is moved in front of its siblings. z-index: -1; - You can use negative values. The target element is moved in behind its siblings. Value Description auto Sets the stack order equal to its parents. This is default  number Sets the stack order of the element. Negative numbers are allowed initial Set this property to its default value. inherit Inherits this property from its parent element. CSS display Property: - The display property specifies if/how an element is displayed. - Every HTML element has a default display value depending on what type of element it is. - The default display value for most elements is block or inline. - Display properties: 1. display: none; 2. display: inline; 3. display: block; 4. display: inline-block; 5. display: flex; Syntax: display: value; Display: none: - The "none" value totally removes the element from the page. It will not take any space.  - display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. - The element uses display: none; as default. Display: inline: - The inline element takes the required width only. - It doesn't force the line break so the flow of text doesn't break inline. - The inline display property ignores the height and the width set by the user. - Inline Elements: An inline element does not start on a new line and only takes up as much width as necessary. Examples: , etc.. Display: block: - The CSS display block element takes as much horizontal space as they can. Means the block element takes the full available width. They make a line break before and after them. - Block-level Elements: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: - Display: inline-block: - Compared to display: inline, the major difference is that display: inline-block allows setting 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. - Note: When using the inline-block property, the use of the vertical-align property must be enforced. Display: flex: - A display of flex gives you access to the Flex layout system, which simplifies how we design and layout our web pages. - It is used to display the element as a block-level flex container. The items start from the start edge of the main axis. The default flex-direction is row. CSS Flex Parent Element (Container): - The flex container properties are: flex-direction flex-wrap flex-flow justify-content align-items align-content Flex-direction Property: - The flex-direction property defines in which direction the container wants to stack the flex items. Syntax: flex-direction: column | column-reverse | row | row-reverse; Example:.main-flex {  background-color: burlywood; display: flex; flex-direction: row; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; } One Two Three Output: Flex-wrap Property: - it specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. Syntax: flex-wrap: wrap| nowrap(this is default) | wrap-reverse; Example:.main-flex { background-color: burlywood; display: flex; flex-wrap: wrap; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 500px; text-align: center; } One Two Three Four Output: Flex-flow Property:  - It specifies a shorthand property for flex-direction and flex-wrap. Syntax: flex-flow: flex-direction flex-wrap; Justify-content Property: - it is used to align the flex items horizontally when the items do not use all available space on the main-axis. Syntax: justify-content: center| flex-start(this is default) | flex-end | space-around | space-between; Example:.main-flex { background-color: burlywood; display: flex; justify-content: center; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; } One Two Three  Output: Align-items Property: - It is used to align the flex items vertically when the items do not use all available space on the cross-axis. Syntax: align-items: center| flex-start | flex-end | stretch (this is default); Example:.main-flex { background-color: burlywood; display: flex; height: 500px; flex-wrap: wrap; align-items: center; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width:500px; text-align: center;  } One Two Three Four Output: Align-content Property: - It is used to modify the behavior of the flex-wrap property. it is similar to align-items, but instead of aligning flex items, it aligns flex lines. Syntax: align-content: center| flex-start | flexs-end | stretch (this is default); Example:.main-flex { background-color: burlywood; display: flex; height: 500px; flex-wrap: wrap; align-content: center; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width:500px; text-align: center; } One Two Three Four Output: - CSS Flex Child Element (items): - The flex container properties are: order flex-grow flex-shrink flex-basis flex align-self Order Property: - The first flex item in the code does not have to appear as the first item in the layout. - The order value must be a number, default value is 0. Syntax: order: value; Example:.main-flex { background-color: burlywood; display: flex;  flex-direction: row; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; } One Two Three Output: Flex-grow property: - The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. - The value must be a number, default value is 0. Syntax: flex-grow: value; Example:.main-flex { background-color: burlywood; display: flex; flex-direction: row; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; } One Two Three Output: Flex-shrink property: - It is the positive unitless number that determines the flex shrink factor. It specifies how much the item will shrink compared to the other flexible-items. - Negative values are not allowed. Syntax: flex-shrink: value; Example:.main-flex { background-color: burlywood; display: flex; flex-direction: row; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 500px; text-align: center; } One Two Three Output: Flex-basis property: - It is the length in relative or absolute units that defines the initial length of the flex-item. It is used to set the length of the flex-item.  - Negative values are not allowed. Syntax: flex-basis: value; Example:.main-flex { background-color: burlywood; display: flex; flex-direction: row; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; } One Two Three Output: Flex property: - The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. - Syntax: flex: flex-grow | flex-shrink | flex-basis; Align-self property: - This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. - The align-self property overrides the default alignment set by the container's align-items property. Syntax: align-self: flex-start | center | flex-end; Example:.main-flex { background-color: burlywood; display: flex; flex-direction: row; height: 200px; }.main-flex.child-flex { background-color: coral; margin: 20px; padding: 20px; width: 100px; text-align: center; }  One Two Three Output: Responsive Web Design: - Responsive web design makes your web page look good on all devices. - Responsive web design uses only HTML and CSS. - Responsive web design is not a program or a JavaScript. - Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. - It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. Syntax: @media (max-width: media size in px) { element { } } Device Breakpoints: @media (max-width: 1399px) { element { } } @media (max-width: 1199px) { element { } } @media (max-width: 991px) { element { } } @media (max-width: 767px) { element { } } @media (max-width: 639px) { element { } } @media (max-width: 479px) { element {  } }