Download to read offline
What is CSS.pptx power point presentation
- 1. What is CSS? CSSstands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media . CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
- 2. Why Use CSS? CSSis used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
- 3. CSS Solved aBig Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process to solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!
- 4. CSS Syntax A CSSrule consists of a selector and a declaration block. 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.
- 5. Advantages of CSS CSSsaves time. You can write CSS once and then reuse the 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. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages to make them compatible with future browsers. Platform Independence − The Script offer consistent platform independence and can support latest browsers as well.
- 6. Disadvantages of CSS Browser Compatibility: CSS works differently on different browsers. Internet Explorer and Opera supports CSS as a different logic. Different syntax to HTML: CSS as developed independently of HTML and uses a different syntax, so web developer has to lean two sets of formatting syntax instead of one. Lack of security: CSS is an open text based system. There is no built-in security and anyone with read/ write access to website can disturb the formatting by changing CSS file.
- 7. Example Inthis example all <p> elements will be center-aligned, with a red text color:
- 8. <!DOCTYPE html> <html> <head> <style> p { text-align:center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> Example Explained p is a selector in CSS (it points to the HTML element you want to style: <p>).
- 9. Using CSS CSS canbe added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements Internal - by using a <style> element in the <head> section External - by using a <link> element to link to an external CSS file The most common way to add CSS, is to keep the styles in external CSS files.
- 10. Inline CSS We canuse style attribute of any HTML element to define style rules. These elements will be applied to that element only. Syntax: <element style=“style rule”> Example:- <!DOCTYPE html> <html> <body> <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> </body> </html>
- 11. Internal CSS orEmbedded CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:
- 12. <!DOCTYPE html> <html> <head> <style> body {background-color:powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 13. External CSS Anexternal style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! The <link> element can be used to include an external style sheet file in HTML document. An external style sheet is a separate text file with .CSS extension. The <LINK> tag goes in header section.
- 14. EXAMPLE: code for externalstyle sheet body { background-color: powderblue; } h1 { color: blue; } p { color: red; } code for HTML DOCUMENT <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 15. Imported CSS @importedrule statement is used to import an external style sheet in a manner similer to <LINK> element. The @import rule statement goes inside the head section. Syntax: <head> <style type=“text/css”> @import “url”; </style> </head>
- 16. Example: Body{ background-color : lightblue; font-family: impact; } H1,h2{ font weight:bold; font size:24pt; color:red; } Note: save above external style sheet with name “ext.css”
- 17. Code to importexternal css in html document <html> <head> <style type=“text/css”> @import url(“ext.css”); </style> </head> <body> <h1> WELCOME TO THE WORLD OF STYLE SHEET</h1> <h2> This is how to import External style sheet</h2> </body> </html>
- 18. CSS selector Inaddition to setting a style for a HTML element,CSS allows us to specify own selector called “id” and “class Different types of selector are: A)CSS element selector: e.g:- p{ text-align:center color: blue; }
- 19. B) CSSID Selector: <html> <head> <style> #para1{ text-align: center; color:blue;} </style> </head> <body> <p id=“para1”>Hello CSS </p> <p>This paragraph will not be affected</p> </body> </html>
- 20. CSS ClassSelector: The class selector selects HTML elements with a specific class attribute.it is used with period(.) followed by class name. <html> <head> <style> .center{ text-align : center; color: blue} </style> </head> <body> <h1 class=“center”>This heading is blue and center-aligned</h1> <p class=“center”> This paragraph is blue and center aligned</p> </body> </html>
- 21. CSS groupSelector: The grouping selector is used to select all the elements with the same style definitions. <html> <head> <style>h1,h2,p{text-align:center; color:blue} </style> </head> <body> <h1>Hello javatpoint.com</h1> <h2>hello javatpoint.com</h2> <p> this is a paragraph</p> </body> </html>