Cashcading stylesheets
•Download as PPTX, PDF•
1 like•281 views
The seminar covered the history and introduction of CSS, what CSS is, why it's used, CSS syntax including selectors and properties, and ways to insert CSS like external, internal, and inline styles. CSS was first proposed in 1994 and has evolved through levels 1, 2, 2.1, and 3. It allows separating design from HTML for easier maintenance, centralized styling across pages, and reduced file sizes. Syntax uses selectors and declarations with properties and values. Comments can explain code. CSS properties control various aspects of text, fonts, backgrounds, and lists.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (17)
Similar to Cashcading stylesheets
Similar to Cashcading stylesheets (20)
More from reddivarihareesh
Recently uploaded
Recently uploaded (20)
Cashcading stylesheets
- 2. History of CSS Introduction of CSS What is CSS? Why use CSS? CSS Syntax CSS Selectors. Why to Insert CSS? CSS Properties.
- 3. History CSS Was first proposed by Hakon Winum Lie on October 10, 1994. Lie was Working with Tim Berners-Lee at CERN. CSS has various levels and profiles: Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2,css3. Css1:- The first CSS specification to become an official W3C Recommendation is CSS level 1. Published inDecember 17, 1996. Håkon Wium Lie and Bert Bos. Css2: CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. A superset of CSS 1, CSS 2
- 4. Css2.1:- CSS level 2 revision 1, often referred to as "CSS 2.1", fixes errors in CSS 2, removes poorly supported or not fully interoperable features. CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011 CSS3:- different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group
- 5. Introduction CSS is a rule based language designed to be called from an HTML,XHTML or XML document. CSS was created by w3(consortium). The purpose of Cascading Style Sheets is to allow web authors to manipulate a web page’s appearance without affecting it’s HTML structure.
- 6. What is CSS? CSS stands for Cascading Style Sheets. It is not a language. It is a part of design. CSS is a heart of HTML. CSS allows us to apply formatting and styling to the HTML that builds our web pages. Style: CSS deals specifically with the presentation domain of designing a web pages. like(color, font, layout , Tables, Paragraphs and Headings )
- 7. Why use CSS? Allows for much richer documents appearances than HTML Reduce workload by centralizing commands for visual appearances instead of the HTML document. Use same style on multiple pages. Reduce page download size.
- 8. CSS Syntax: H1 { color : blue; font-size : 12px; } property value property value Selector The HTML element you want to add style to. (examples: p, h2, body, img, table) Declaration: Property: what aspect you want to change (examples: color, font-size, margin) Value: the exact setting for that aspect (examples: red, italic, 14pt) P { color : red; text-align : center; }
- 9. CSS comments: Comments are used to explain your code and may help you when you edit the source code at a later date /* this is a comment */ p{ text-align: center ; /* this is paragraph */ }
- 10. CSS Selectors: Style for a HTML element, CSS allows you to specific your own selectors called “Id” and “Class”. Id: this selector is used to specific a style for a single, unique elements. is defined with a “#”. #p { font-size: 10px; font-color: White; } Class: the class selector is used to specify a style for a group of elements. And used to HTML class attribute. A class selector is a name preceded by a period (.) .class {color: red} .class { font-size: 10px; font-color: White; }
- 11. Ways to Insert CSS: Attaching a style sheets to a page by adding the code to the <head> 1. External Style Sheet 2. Internal Style Sheets 3. Inline Style
- 12. 1.External Style Sheets It is ideal when the style is applied to many pages. Styles are saved in a separate file, with the extension .css <head> <link rel=“ style sheets” type=“text/css” href=“mystyle.css”/> </head>
- 13. 2.Internal Style Sheet Define style tag inside head section Styles are defined within the <style> </style> tag, which is placed in the header of the html file (i.e., within <head> and </head>). <head> <style type=“text/css”> h1 { color : red; } p { margin-left : 20px; } </style> </shead>
- 14. 3.Inline Style CSS is not attaching in the <header> but is used directly within HTML tages. Example <p style="font-size: 10pt; color: red; font-weight: bold; font-family: Arial, Helvetica, sans-serif"> This is a local style sheet declaration. </p>
- 15. CSS Properties Styling backgrounds I. Background-color II. Back ground-images III. Background-repeat (v,h) IV. Background-position c,r Text I. Text color II. Text alignment III. Text decoration (underline, blink) IV. Text transformation (lc,uc)
- 16. Font: font-family : A prioritized list of font family names and/or generic family names for an element p{ font-family:”times new roman” } font-size : Sets the size of a font h1 { font-size : 40px; } font-style : Sets the style of the font p.normal { font-style : normal; } font-weight : Sets the weight of a font. p.normal { font-weight : bold; }
- 17. List Properties: list-style-image : Sets an image as the list-item marker ex: url list-style-position : Places the list-item marker in the list. ex: inside outside list-style-type : Sets the type of the list-item marker ex: circle, square, decimal ,lower-roman, upper- roman, lower-alpha, upper-alpha .
- 18. Conclusion: Cascading style sheets conclude it will give special appearance and look and field good dynamic and static web page. and ways to inserting to CSS By the using of CSS properties, such as colors and fonts weights.
- 19. References: www.studymafia.org www.wikipedia.com www.w3schools.com