Download to read offline
Uploaded bySumit Rana
Css how to insert css
This document discusses three ways to insert CSS styles into HTML: inline styles, internal styles, and external styles. Inline styles use the style attribute within individual HTML elements. Internal styles define CSS rules within the <style> tags in the <head> section and can affect multiple elements. External styles link to an external CSS file with the <link> tag and allow one CSS file to style multiple pages. The document provides examples of each method and compares their usage and scope.
More Related Content
![Cascading style sheet (css)]](https://cdn.slidesharecdn.com/ss_thumbnails/cascadingstylesheetcss-130819011155-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Css how to insert css
Css how to insert css
- 1. CSS-How to insertCSS By- Sumit Rana
- 2. Three Ways ToInsert CSS • Inline Style • Internal Style • External Style
- 3. Inline Style • InlineStyle is use for a Specific Element. • It is used as a style attribute of a particular tag. • The style attribute contains the CSS property. • It is used only for one element.
- 4. Inline Style Example •<h1 style="color:blue;font-size:30px;">This is a heading</h1> • <p style=“font-size=20px;text-align=center”> This is a Paragraph</p>
- 5. Internal Style • ItSpecify the CSS Style in the head section of the HTML document. • It is used for multiple tags. • <style> tag is used in the head section. • <style> tag contains the style properties.
- 6. Internal Style Example •<head> <style> body { background-color: cyan; } h1 { color: red; font-size: 40px; } </style> </head>
- 7. External Style • Itis used to put a CSS Style into number of HTML documents. • It just links the CSS Style into the head section of HTML. • Just one file can be used to design the entire style of the website. • Each page should contain the <link> tag in the head section which gives reference to Style sheet to the page.
- 8. External Style Example •<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 9. Difference Inline • CSS Style-Inside tag • Affects only one Tag Internal • CSS Style- Reference head section • Affects Multiple Pages External • CSS Style- Inside head section • Affects Multiple Tag
- 10. Difference Inline • <h1 style="color:b lue;font- size:30px;">Thisis a heading</h1> Internal • <head> <link rel="stylesheet" type ="text/css" href="mystyle. css"> </head> External • <head> <style> h1 { color: red; font-size: 40px; } </style> </head>
- 11. Thank You ! BySumit Rana