More Related Content
Similar to CSS INTRODUCTION SLIDES WITH HTML CODE.pdf (20)
Recently uploaded (20)
CSS INTRODUCTION SLIDES WITH HTML CODE.pdf
- 1. CSS
- 2. DIV Tag in HTML • The <div> tag defines a division or a section in an HTML document. • The <div> tag is easily styled by using the class or id attribute. • The HTML Content Division element (<div>) is the generic container for flow content. • It has no effect on the content or layout until styled in some way using CSS)
- 3. Cascading style-sheets (CSS) • Created by Hakon Lie of MIT in 1994 • Has become the W3C standard for controlling visual presentation of web pages • Cascading style-sheets are powerful mechanism to add style to web document • Enforce standards and uniformity • Create dynamic effects • Works by allowing you to specify rules
- 4. Advantages of CSS • Saves time • Easy to change • Keep consistency • Give you more control over layout • Use styles with JavaScript • Make it easy to create a common format for all the Web pages
- 5. Types of Style Sheets • In-line styles • Embedded/internal styles • External style sheet
- 6. In-line Style Sheet • Add styles to each tag within the HTML file • Use it when you need to format just a single section in a web page • Style attribute is used to add style • Example • <h1 style=“color:red; font-family: sans-sarif;” > This is my content </h1>
- 7. Internal Style Sheet • A style is applied to the entire HTML file • Use it when you need to modify all instances of particular element (e.g., h1) in a web page •This is define between head tag Example <style> h1 { color:red; font-family:sans-serif; } </style>
- 8. OUTPUT
- 9. External Style Sheet • An external style sheet is a text file containing the style definition (declaration) having extension .css • Use it when you need to control the style for an entire web site • Steps to create external style sheet:- • Open a new blank document in Notepad or Notepad++ • Type style declarations, For example: h1 {color:red; font-family:calibri;} • Do not include <style> tags • Save the document as filename.css
- 10. External Style Sheet • Open an HTML file • Between <head> and </head> add <link href=URL rel=“relation_type” type=“link_type”> • URL is the file.css • Relation_type=“stylesheet” • Link_type=“text/css” • Save this file as .html For example if .html and the .css file are in the same directory <link href=file.css rel=“stylesheet” type=“text/css”>
- 11. Defining CSS Rule A rule consists of • A selector: element or elements the declaration applies to • Declaration: how the elements referred to in the selector should be styled • Property: which is the property of the selected element • Value: which is a specification for this property
- 12. Using ID’s ° Use an id to distinguish something, like a paragraph, from the others in a document ° The id selector is used to specify a style for a single, unique element ° For example:- ° CSS file: ° #id_name {style attributes and values} ° HTML file ° <tag ID=id_name>
- 13. Using Classes ° HTML and XHTML require each id be unique– therefore an id value can only be used once in a document ° You can mark a group of elements with a common identifier using the class attribute ° To create a class • tag.class_name {style attributes} or .class_name {style attributes} ° To apply a style • <tag CLASS=class_name> • <h1 CLASS=FirstHeader>Content goes here….</h1>
- 14. Difference between ID’s and Classes ° You can’t have more than one tag with the same ID value ° You can apply the same Class value to multiple document tags ° Use ID's for any elements that are simply used once on a page ° OR ° Only use classes to style websites, but, when you have to use an element in JavaScript, use an identifier
- 15. HTML File CSS File file.css Page.html
- 16. OUTPUT
- 17. HTML File CSS File file.css Page.html We can use more than one classes in one tag by using “space”
- 18. OUTPUT
- 19. CSS Font properties ° font-family ° font-size ° font-weight ° font-style ° font-variant
- 20. CSS Font properties font-family: ° Specifies the typeface or family of font that should be used Common values: ° Arial, Courier/Courier New, Georgia, Times/Times New Roman and Verdana Example: h1{ font-family:arial }
- 21. CSS Font properties font-size: ° Specifies the size of a font Common values: ° In pixels (12px,20px etc.) ° Absolut size (small, medium, lage, x-large etc.) Example: h1{ font-size:20px }
- 22. CSS Font properties font-weight: ° Specifies whether the font should be bold or normal Common values: ° Normal, bold, bolder, lighter ° 100, 200, 300, 400, 500, 600, 700, 800, 900 Example: h1{ font-weight : bold }
- 23. CSS Font properties font-style: ° Specifies whether the font should be normal, italic or oblique Common values: ° Normal, italic, oblique Example: h1{ font-style : italic }
- 24. CSS Font properties font-variant: ° Specifies whether the font should be normal or small-caps (smaller version of upper case) Common values: ° Normal, small-caps Example: h1{ font-variant : small-caps}
- 25. CSS Text properties ° color ° text-align ° vertical-align ° text-decoration ° text-transform ° word-spacing ° letter-spacing
- 26. CSS Text properties ° color: • specifies the color of the text • P{color : green} ° text-align: • horizontal alignment of the text • Left, right, center or justify ° vertical-align: • Vertical alignment of the text • Sub, super, top, middle, bottom
- 27. CSS Text properties ° text-decoration: • specifies the whether the text should be underline, overline, line-through or blinking ° text-transform: • text should be lowercase, uppercase or capitalized ° letter-spacing: • Specifies the space between letters • H1{letter-spacing:3px}
- 28. CSS Text properties ° word-spacing: • Specifies the space between words • H1{word-spacing:4px}
- 29. CSS Background properties ° background-color: • Specifies the background color ° background-image: • Specifies the background image ° background-repeat: • Specifies whether the image should repeat or not ° background-position: • Where an image should be positioned
- 30. CSS Border properties ° border-style (solid, dashed, doted, double etc.) ° border-color ° border-bottom (solid, dashed, doted, double etc.) °Padding-left °Padding-right °Padding-top °padding-bottom CSS Padding properties
- 31. Styling “HYPERLINKS” ° color : • Changes the color of the links ° background-color : • Highlights the link, as if it had been highlighted with a highlighter pen ° text-decoration : • Underline, strike through, over-line, blink
- 32. Styling “HYPERLINKS” ° Pseudo-classes of links: ° Link: • Styles for links in general ° Visited: • Styles the links which are already visited ° Hover: • Styles when some on hovering over a link ° Active: • Styles the links when a links is being clicked