More Related Content
Similar to Introduction HTML and CSS (20)
Recently uploaded (20)
Introduction HTML and CSS
- 2. •CSS stands 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 cont rol the layout of multiple web pages all at once •External stylesheets are stored in CSS files.
- 4. CSS Syntax
- 5. Including CSS in HTML Documents CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document: •Inline styles — Using the style attribute in the HTML start tag. •Embedded styles — Using the <style> element in the head section of a document. •External style sheets — Using the <link> element, pointing to an external CSS file.
- 8. External Style Sheets An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. <!DOCTYPE html> <html lang="en"> <head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html>
- 9. Importing External Style Sheets The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles. <style> @import url("css/style.css"); p { color: blue; font-size: 16px; } </style>
- 10. CSS Selectors The CSS element Selector The element selector selects HTML elements based on the element name. <style> p { text-align: center; color: red; } </style>
- 11. The CSS id Selector To select an element with a specific id, write a hash (#) character, followed by the id of the element. <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p>
- 12. CSS Comments A CSS comment is placed inside the <style> element, and starts with /* and ends with */: <head> <style> /* This is a single-line comment */ p { color: red; } </style> </head>
- 13. CSS Background Color <body> <h1 style="background- color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body>
- 14. CSS Border Color <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html>