Downloaded 310 times
Uploaded byseedinteractive
CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.
CSS
- 1.
- 2. Introduction to CSSCSS stands for Cascading Style Sheets A style language that defines layout of HTML documents CSS is supported by all browsers today
- 3. The benefits ofCSS control layout of many documents from one single style sheet; more precise control of layout; apply different layout to different media-types (screen, print, etc.); numerous advanced and sophisticated techniques.
- 4. CSS Basic Syntaxselector { property : value } the HTML element/tag you wish to define the attribute you wish to change the value of the property
- 5. CSS Example Codesbody {color: black} p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial } h1,h2,h3,h4,h5,h6 { color: green } p.right {text-align: right}
- 6. Applying CSS toan HTML Document Inline Styles – you only use a style to the single instance of an HTML tag Internal Style - you define internal styles in the head section by using the <style> tag External Style - you can change the look of an entire Web site by changing one file
- 7. Inline Style <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>
- 8. Internal Style <html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html>
- 9. External Style style.cssbody { background-color: #FF0000; } HTML Document <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html>