Unit-3-CSS-BWT.pptx
- 1. Unit-3-CSS Introduction to Style sheet, types of style sheets-inline, External, embedded CSS , text formatting properties, CSS Border, margin properties, Positioning use of classes in CSS, color properties, use of<div>&<spam>,padding, CSS multiple columns.
- 2. Introduction to Style sheet • Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser. • While html uses tags, css uses rulesets. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.
- 3. •Why CSS?? • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. • CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages. • Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically. • Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content. • Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. • Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this we can view offline websites.
- 4. • Advantages of CSS • CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. • 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. • Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. • Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. • Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
- 5. • CSS versions release years:
- 6. • CSS Syntax: • CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document. • A style rule set consists of a selector and declaration block. Selector -- h1 Declaration -- {color:blue;font size:12px;}
- 7. • The selector points to the HTML element you want to style. • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon. • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
- 8. • There are three types of CSS which are given below: • Inline CSS • Internal or Embedded CSS • External CSS
- 9. • Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. • <!DOCTYPE html> • <html> • <head> • <title>Inline CSS</title> • </head> • • <body> • <p style = "color:#009900; font-size:50px; • font-style:italic; text-align:center;"> • this is inline css • </p> • • </body> • </html>
- 11. •Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the HTML file.
- 12. • <!DOCTYPE html> • <html> • <head><title>Internal CSS</title> • <style> • .main { • text-align:center; • } • .GFG { • color:#009900; • font-size:50px; • font-weight:bold; • } • .geeks { • font-style:bold; • font-size:20px; • } • </style> </head> <body> • <div class = "main"> • <div class ="GFG">GeeksForGeeks</div> • <div class ="geeks"> • A computer science portal for geeks • </div></div> </body> </html>
- 14. • External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages. body { background-color:powderblue; } .main { text-align:center; } .GFG { color:#009900; font-size:50px; font-weight:bold; } #geeks { font-style:bold; font-size:20px; }
- 15. • Below is the HTML file that is making use of the created external style sheet • link tag is used to link the external style sheet with the html webpage. • href attribute is used to specify the location of the external style sheet file. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="geeks.css"/> </head> <body> <div class = "main"> <div class ="GFG">GeeksForGeeks</div> <div id ="geeks"> A computer science portal for geeks </div> </div> </body> </html>
- 17. • CSS text formatting properties is used to format text and style text. • CSS text formatting include following properties: • 1.Text-color • 2.Text-alignment • 3.Text-decoration • 4.Text-transformation • 5.Text-indentation • 6.Letter spacing • 7.Line height • 8.Text-direction • 9.Text-shadow • 10.Word spacing
- 18. <html> <head><style> h1 { color:red; text-align:center; text-decoration:underline; text-transform:lowercase; text-indent:80px; letter-spacing:4px; line-height:40px; direction: rtl; text-shadow:3px 1px blue; word-spacing:15px; } h2{color:green;} </style> </head> <body> <bdo dir="rtl">This is text formatting properties.</bdo> <h1>DItms</h1> <h2>TEXT FORMATTING</h2> </body> </html>
- 20. •CSS Border • The CSS border is a shorthand property used to set the border on an element. • The CSS • border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below • border-style • border-color • border-width • border-radius
- 21. • 1) CSS border-style • The Border style property is used to specify the border type which you want to display on the web page. • There are some border style values which are used with border-style property to define a border. • The border-style property specifies what kind of border to display. • 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
- 23. • 2) CSS border-width • The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border. • You can individually change the width of the bottom, top, left, and right borders of an element using the following properties − • border-bottom-width changes the width of bottom border. • border-top-width changes the width of top border. • border-left-width changes the width of left border. • border-right-width changes the width of right border. • border-width:thin/medium/thick
- 25. • The border-color Property • The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties − • border-bottom-color changes the color of bottom border. • border-top-color changes the color of top border. • border-left-color changes the color of left border. • border-right-color changes the color of right border. • Border-color
- 27. • This CSS property sets the rounded borders and provides the rounded corners around an element, tags, or div. It defines the radius of the corners of an element. • It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.
- 28. Property Description border-top-left-radius It is used to set the border-radius for the top-left corner border-top-right-radius It is used to set the border-radius for the top-right corner border-bottom-right-radius It is used to set the border-radius for the bottom-right corner border-bottom-left-radius It is used to set the border-radius for the bottom-left corner
- 29. • <html> <head> • <style> • div { • padding: 50px; • margin: 20px; • border: 6px ridge red; • width: 50px; • float: left; • height: 50px; • } • p{ • font-size: 25px; • } • #one { • border-radius: 90px; • background: lightgreen; • } • #two { • border-radius: 25% 10%; • background: orange; • } • #three { • border-radius: 35px 10em 10%; • background: cyan; • } • #four { • border-radius: 50px 50% 50cm 50em; • background: lightblue; • } • </style>
- 31. •CSS Margin • CSS Margin property is used to define the space around elements. It is completely transparent and doesn't have any background color. It clears an area around the element. • Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property.
- 32. Property Description margin This property is used to set all the properties in one declaration. margin-left it is used to set left margin of an element. margin-right It is used to set right margin of an element. margin-top It is used to set top margin of an element. margin-bottom It is used to set bottom margin of an element. CSS Margin Properties
- 33. Value Description auto This is used to let the browser calculate a margin. length It is used to specify a margin pt, px, cm, etc. its default value is 0px. % It is used to define a margin in percent of the width of containing element. inherit It is used to inherit margin from parent element. CSS Margin Values These are some possible values for margin property.
- 35. • Positioning use of classes in CSS CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element. static relative fixed absolute sticky Relative Positioning Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position. You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.
- 37. • Absolute Positioning • An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner. • You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. • Move Left - Use a negative value for left. • Move Right - Use a positive value for left. • Move Up - Use a negative value for top. • Move Down - Use a positive value for top.
- 39. • Fixed Positioning • Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window. • You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. • Move Left - Use a negative value for left. • Move Right - Use a positive value for left. • Move Up - Use a negative value for top. • Move Down - Use a positive value for top.
- 41. • color properties • The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the background color or the font color of an element. • In CSS • , we use color values for specifying the color. We can also use this property for the border-color and other decorative effects. • We can define the color of an element by using the following ways: • RGB format. • RGBA format. • Hexadecimal notation. • HSL. • HSLA. • Built-in color.
- 42. • RGB Format • RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the color of an HTML • element simply by specifying the values of R, G, B that are in the range of 0 to 255. • The color values in this format are specified by using the rgb() property. This property allows three values that can either be in percentage or integer (range from 0 to 255). • This property is not supported in all browsers; that's why it is not recommended to use it. • Syntax color: rgb(R, G, B);
- 43. • RGBA Format • It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent. • Syntax color:rgba(R, G, B, A);
- 44. • Hexadecimal notation • Hexadecimal can be defined as a six-digit color representation. This notation starts with the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red (RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent the blue (BB) color value. • The black color notation in hexadecimal is #000000, and the white color notation in hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000, #00FF00, #0000FF, #FFFF00, and many more. • Syntax color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
- 45. • Short Hex codes • It is a short form of hexadecimal notation in which every digit is recreated to arrive at an equivalent hexadecimal value. • For example, #7B6 becomes #77BB66 in hexadecimal. • The black color notation in short hex is #000, and the white color notation in short hex is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.
- 46. • HSL • It is a short form of Hue, Saturation, and Lightness. Let's understand them individually. • Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red, 120 represents green, 240 represents blue. • Saturation: It takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible. • Lightness: The lightness of the color can be defined as the light that we want to provide the color in which 0% represents black (there is no light), 50% represents neither dark nor light, and 100% represents white (full lightness). • Syntax color:hsl(H, S, L);
- 47. • HSLA • It is entirely similar to HSL property, except that it contains A (alpha) that specifies the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully transparent, and 1.0 indicates not transparent. • Syntax color:hsla(H, S, L, A);
- 48. • Built-in Color • As its name implies, built-in color means the collection of previously defined colors that are used by using a name such as red, blue, green, etc. • Syntax • color: color-name;
- 49. S.no. Color name Hexadecimal Value Decimal Value or rgb() value 1. Red #FF0000 rgb(255,0,0) 2. Orange #FFA500 rgb(255,165,0) 3. Yellow #FFFF00 rgb(255,255,0) 4. Pink #FFC0CB rgb(255,192,203) 5. Green #008000 rgb(0,128,0) 6. Violet #EE82EE rgb(238,130,238) 7. Blue #0000FF rgb(0,0,255) 8. Aqua #00FFFF rgb(0,255,255) 9. Brown #A52A2A rgb(165,42,42) 10. White #FFFFFF rgb(255,255,255) 11. Gray #808080 rgb(128,128,128)
- 50. • <html> • <head> • <title>CSS hsl color property</title> • <style> • h1{ • text-align:center; • } • #rgb{ • color:rgb(255,0,0); • } • #rgba{ • color:rgba(255,0,0,0.5); • } • #hex{ • color:#EE82EE; • } • #short{ • color: #E8E; • } • #hsl{ • color:hsl(0,50%,50%); • } • #hsla{ • color:hsla(0,50%,50%,0.5); • } • #built{ • color:green; • } • </style> • </head>
- 51. • Use Of Div & Span tag: Both the tags (<div> and <span>) are used to represent the part of the webpage, <div> tag is used a as block part of the webpage and <span> tag is used as a inline part of the webpage like below: <div>A Computer Science Portal <span>ditms</span></div>
- 52. • HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a block-level tag. In this example, the div tag contains the entire width. It will be displayed div tag each time on a new line, not on the same line.
- 53. • <!DOCTYPE html> • <html> • • <head> • <title>Div tag</title> • • <style> • div { • color: white; • background-color: #009900; • margin: 2px; • font-size: 25px; • } • </style> • </head> • • <body> • <div> div tag </div> • <div> div tag </div> • <div> div tag </div> • <div> div tag </div> • </body> • • </html> Output:
- 54. • HTML <span> tag: The HTML span element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes). A better way to use it when no other semantic element is available. The span tag is very similar to the div tag, but div is a block-level tag and span is an inline tag.
- 55. • <!DOCTYPE html> • <html> • • <head> • <title>span tag</title> • </head> • • <body> • <h2>Welcome To GFG</h2> • • <!-- Inside paragraph applying span tag • with different style --> • <p><span style="background-color:lightgreen"> • GeeksforGeeks</span> is A Computer Science Portal • where you can<span style="color:blue;"> • Publish</span> your own <span • style="background-color:lightblue;">articles</span> • and share your knowledge with the world!! • </p> • </body> • • </html> Output: