Concept of CSS unit3
Download as PPTX, PDF2 likes304 views
The document covers various aspects of CSS, including creating stylesheets, CSS properties, and styling techniques for backgrounds, text formats, and fonts. It explains the structure of CSS rules, the significance of external stylesheets, and various properties for font and text styling. Additionally, it discusses the layout of block elements, tables, and lists, highlighting how to effectively control their appearance using CSS.
Concept of CSS unit3
- 1. Concept of CSS UNIT III PART I BY:SURBHI SAROHA
- 2. SYLLABUS • Creating Style Sheet • CSS Properties • CSS Styling(Background , Text Format , Controlling Fonts) • Working with block elements and objects • Working with lists and Tables SURBHI SAROHA 2
- 3. Creating Style Sheet • <!DOCTYPE html> • <html> • <head> • <style> • body { • background-color: lightblue; • } • h1 { • color: white; • text-align: center; • } SURBHI SAROHA 3
- 4. CSS Example • p { • font-family: verdana; • font-size: 20px; • } • </style> • </head> • <body> • <h1>My First CSS Example</h1> • <p>This is a paragraph.</p> • </body> • </html> SURBHI SAROHA 4
- 5. What is CSS? • 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 control the layout of multiple web pages all at once • External style sheets are stored in CSS files SURBHI SAROHA 5
- 6. Why Use CSS? • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. • The style definitions are normally saved in external .css files. • When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. • To solve this problem, the World Wide Web Consortium (W3C) created CSS. • CSS removed the style formatting from the HTML page! SURBHI SAROHA 6
- 7. CSS Syntax • A CSS rule-set consists of a selector and a declaration block: SURBHI SAROHA 7
- 8. Cont…. • The selector points to the HTML element you want to style. • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon. • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. SURBHI SAROHA 8
- 9. In this example all <p> elements will be center-aligned, with a red text color: • <!DOCTYPE html> • <html> • <head> • <style> • p { • color: red; • text-align: center; • } • </style> • </head> • <body> SURBHI SAROHA 9
- 10. Cont… • <p>Hello World!</p> • <p>These paragraphs are styled with CSS.</p> • </body> • </html> SURBHI SAROHA 10
- 11. CSS Properties • Font Properties • Font Family • Font Style • Font Variant • Font Weight • Font Size • Font SURBHI SAROHA 11
- 12. Cont… • Color and Background Properties • Color • Background Color • Background Image • Background Repeat • Background Attachment • Background Position • Background SURBHI SAROHA 12
- 13. Cont…. • Text Properties • Word Spacing • Letter Spacing • Text Decoration • Vertical Alignment • Text Transformation • Text Alignment • Text Indentation • Line Height SURBHI SAROHA 13
- 14. CSS Styling(Background , Text Format , Controlling Fonts) • Styling Fonts with CSS • Choosing the right font and style is very crucial for the readability of text on a page. • CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on. • The font properties are: font-family, font- style, font-weight, font-size, and font-variant. SURBHI SAROHA 14
- 15. Font Family • The font-family property is used to specify the font to be used to render the text. • This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user's system, browser tries to use the second one, and so on. • Hence, list the font that you want first, then any fonts that might fill in for the first if it is not available. • You should end the list with a generic font family which are five — • serif, sans-serif, monospace, cursive and fantasy. SURBHI SAROHA 15
- 16. Example • body { font-family: Arial, Helvetica, sans-serif; } • <!DOCTYPE html> • <html lang="en"> • <head> • <meta charset="utf-8"> • <title>Setting font-family in CSS</title> • <style> • body { • font-family: Arial, Helvetica, sans-serif; • } SURBHI SAROHA 16
- 17. Cont…. • </style> • </head> • <body> • <h1>This is a heading</h1> • <p>This is a paragraph.</p> • </body> • </html> SURBHI SAROHA 17
- 18. Font Style • The font-style property is used to set the font face style for the text content of an element. • The font style can be normal, italic or oblique. The default value is normal. SURBHI SAROHA 18
- 19. Example • <!DOCTYPE html> • <html lang="en"> • <head> • <meta charset="utf-8"> • <title>Setting font-style in CSS</title> • <style> • p.normal { • font-style: normal; • } • p.italic { • font-style: italic; • } SURBHI SAROHA 19
- 20. Cont…. • p.oblique { • font-style: oblique; • } • </style> • </head> • <body> • <p class="normal">This is a normal paragraph.</p> • <p class="italic">This is a paragraph with italic font style.</p> • <p class="oblique">This is a paragraph with oblique font style.</p> • </body> • </html> SURBHI SAROHA 20
- 21. Font size • The font-size property is used to set the size of font for the text content of an element. • There are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems, etc. SURBHI SAROHA 21
- 22. Example • <!DOCTYPE html> • <html lang="en"> • <head> • <meta charset="utf-8"> • <title>Defining Font Size Using Pixels</title> • <style> • h1 { • font-size: 24px; • } • p { • font-size: 14px; • } SURBHI SAROHA 22
- 23. Cont… • </style> • </head> • <body> • <h1>This is a heading</h1> • <p>This is a paragraph.</p> • </body> • </html> SURBHI SAROHA 23
- 24. Working with block elements and objects • block: This turns any styled element into a block, after which further block-styling attributes may be applied. • Block-level elements take up the full width of available space, including line space above and below the element, similar to the way paragraphs have space above and below them. SURBHI SAROHA 24
- 25. Cont… • The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. • In this article, we examine the factors that determine an element's containing block. • When a user agent (such as your browser) lays out a document, it generates a box for every element. SURBHI SAROHA 25
- 26. Cont…. • Each box is divided into four areas: • Content area • Padding area • Border area • Margin area SURBHI SAROHA 26
- 27. SURBHI SAROHA 27
- 28. Working with lists and Tables • You can set following properties of a table − • The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. • The border-spacing specifies the width that should appear between table cells. • The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. SURBHI SAROHA 28
- 29. CSS - Tables • The empty-cells specifies whether the border should be shown if a cell is empty. • The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. SURBHI SAROHA 29
- 30. The border-spacing Property • <style type="text/css"> • /* If you provide one value */ • table.example {border-spacing:10px;} • /* This is how you can provide two values */ • table.example {border-spacing:10px; 15px;} • </style> SURBHI SAROHA 30
- 31. The caption-side Property • The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. • The table that follows lists the possible values. • This property can have one of the four values top, bottom, left or right. The following example uses each value. SURBHI SAROHA 31
- 32. The caption-side Property • <html> • <head> • <style type = "text/css"> • caption.top {caption-side:top} • caption.bottom {caption-side:bottom} • caption.left {caption-side:left} • caption.right {caption-side:right} • </style> • </head> • <body> • SURBHI SAROHA 32
- 33. The caption-side Property • <table style = "width:400px; border:1px solid black;"> • <caption class = "top"> This caption will appear at the top </caption> <tr><td > Cell A</td></tr> • <tr><td > Cell B</td></tr> • </table> <br /> • <table style = "width:400px; border:1px solid black;"> • <caption class = "bottom"> This caption will appear at the bottom </caption> • <tr><td > Cell A</td></tr> • <tr><td > Cell B</td> • </tr> • </table> SURBHI SAROHA 33
- 34. The caption-side Property • <br /> <table style = "width:400px; border:1px solid black;"> • <caption class = "left"> This caption will appear at the left </caption> • <tr><td > Cell A</td></tr> • <tr><td > Cell B</td></tr> • </table> <br /> <table style = "width:400px; border:1px solid black;"> • <caption class = "right"> This caption will appear at the right </caption> • <tr><td > Cell A</td></tr> • <tr><td > Cell B</td></tr> • </table> • </body> • </html> SURBHI SAROHA 34
- 35. SURBHI SAROHA 35
- 36. CSS - Lists • We have the following five CSS properties, which can be used to control lists − • The list-style-type allows you to control the shape or appearance of the marker. • The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. • The list-style-image specifies an image for the marker rather than a bullet point or number. • The list-style serves as shorthand for the preceding properties. • The marker-offset specifies the distance between a marker and the text in the list. SURBHI SAROHA 36
- 37. Example • <html> • <head> </head> • <body> • <ul style = "list-style-type:circle;"> <li>Maths</li> • <li>Social Science</li> • <li>Physics</li> • </ul> <ul style = "list-style-type:square;"> <li>Maths</li> • <li>Social Science</li> <li>Physics</li> • </ul> <ol style = "list-style-type:decimal;"> <li>Maths</li> SURBHI SAROHA 37
- 38. Cont…. • <li>Social Science</li> • <li>Physics</li> • </ol> <ol style = "list-style-type:lower-alpha;"> <li>Maths</li> • <li>Social Science</li> • <li>Physics</li> </ol> • <ol style = "list-style-type:lower-roman;"> <li>Maths</li> • <li>Social Science</li> • <li>Physics</li> </ol> • </body> • </html> SURBHI SAROHA 38
- 39. SURBHI SAROHA 39
- 40. The list-style Property • The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order. • Here is an example − SURBHI SAROHA 40
- 41. Example • <html> • <head> </head> • <body> <ul style = "list-style: inside square;"> <li>Maths</li> • <li>Social Science</li> • <li>Physics</li> • </ul> <ol style = "list-style: outside upper-alpha;"> • <li>Maths</li> • <li>Social Science</li> • <li>Physics</li> </ol> • </body> • </html> SURBHI SAROHA 41
- 42. SURBHI SAROHA 42
- 43. Thank you SURBHI SAROHA 43