MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
- 1. 6.53 CSS
- 2. WHAT IS CSS CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications. 7/1/20XX 2
- 3. WHAT DOES CSS DO? •You can add new looks to your old HTML documents. •You can completely change the look of your website with only a few changes in CSS code. 7/1/20XX 3
- 4. WHY USE CSS THESE ARE THE THREE MAJOR BENEFITS OF CSS: 7/1/20XX 4 1) Solves a big problem 2) Saves a lot of time 3) Provide more attributes
- 5. CSS SYNTAX A CSS RULE SET CONTAINS A SELECTOR AND A DECLARATION BLOCK.
- 6. THERE ARE THREE TYPES OF CSS • Inline CSS • Internal or Embedded CSS • External CSS
- 7. INLINE CSS <!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;"> ComSci </p> </body> </html>
- 8. INTERNAL OR EMBEDDED CSS <!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>
- 9. EXTERNAL CSS body { background-color:powderblue; } .main { text-align:center; } .bg { color:#009900; font-size:50px; font- weight:bold; } #text { font-style:bold; font-size:20px; }
- 10. ADDING CSS IN HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=“oms.css"/> </head> <body> <div class = "main"> <div class =“gg">HEllo</div> <div id ="geeks"> Aim High ComSci </div> </div> </body> </html>
- 11. THANK YOU 7/1/20XX Pitch deck title 11
Editor's Notes
- #5: Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process. CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file. CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
- #6: Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc. Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations: color: yellow; font-size: 11 px; Each declaration contains a property name and value, separated by a colon. Property: A Property is a type of attribute of HTML element. It could be color, border etc. Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.
- #7: Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. 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. 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.
- #11: 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.