Downloaded 11 times
More Related Content
Similar to Need for css,introduction to css & basic syntax wt
Need for css,introduction to css & basic syntax wt
- 1. Name :- AkashRana Class :- CE-2 Batch :- A Enrollment :- 150410107090 Sub :- WT
- 2. Topic :- Introductionto CSS, Need for CSS & Its Basic Syntax
- 3. Introduction to CSS •CSS – Cascading Style Sheet. • The CSS is a markup language used in the web development for presentation purpose. • The primary intension of CSS was to separate out the web content from the web presentation. • Various elements such as text ,font and color are used in CSS for presentation purpose .Thus CSS specification can be applied to bring the styles in the web doucument.
- 4. Need for CSS •By combining CSS with the html document, considerable amount of flexibility into the content submission can be achieved. • Similarly, separating out the style from actual contents help in managing large-scale complex sites. • If CSS is used, effectively then global style sheet can be applied to a web document. This helps in maintaining the consistency in the web document. • If small change needs to be done in the style of web content, then CSS makes it more convenient.
- 5. Basic Syntax &Structure • Three levels of CSS :- Inline style sheet Document level style sheet External level style sheet
- 6. Inline Style Sheet •In Inline Style Sheet the styles are applied to HTML tags. This tag can be applied using the following rule :- Tag { property: value} For Eg :- < p style =“font-family: Arial;color:red> • Here for the tag p two properties are used such as font- family and color and those are associated with the values such as arial and red respectively. In the body section the style sheets are created.
- 7. Inline Style Sheet •This method is called in-line style sheet because the style is applied at the occurrence of the HTML element. Using the style attribute the desired style can be set to the selector. • Advantages :- We can apply uniform style on tags for the whole document using inline style sheet. • Disadvantage :- It is not much suitable for web page designing because the actual contents of the web page are mixed with the presentation.
- 8. Document Level StyleSheet • This type of style sheet appears in the head section and in the body section newly defined selector tags are used with the actual contents. • For eg :- In the below HTML script we have defined h1,h2 and p selectors. For each of these selectors different property and values are set. The important thing while writing in this is that we should have to mention style type=“text/css” in the head section. By this the browser will come to know that the program is making use of CSS.
- 9. Document Level StyleSheet • <html> <head> <title> Document level style sheet </title> < style type=“text/css”> h1 { font-family: Arial; color:green } h2 {font-family:Arial; color:red; left:20px } p { font-size:14pt; font-family: verdana} </style> </head> <body> <h1> <center> hello</center></h1> <h2> hi</h2> <p> This is a pragraph </p> </body> </html>
- 10. Document Level StyleSheet • Advantages :- Helps to define the layout of the web page. Used when we want to apply the unique style sheet for the web page. • Disadvantages :- When we want to apply the style to more than one documents at a time then the document level style sheet is of no use.
- 11. External Style Sheet •When we want to apply particular style to more than one web documents in such case external style sheet is used. • The central idea in this type of style sheet is that the desired style is stored in one .css file. • And the name of that file has to be mentioned in our webpage. Then the styles defined in .css file will be applied to all these web pages.
- 12. External Style Sheet <html> <head> <linkrel=“stylesheet” type=“text/css” href=“ex1.css”/> </head> <body> <h1><center> Hello </center></h1> <p> Paragraph </p></body></html> The cascading style sheet ex1.css can be h1 { font-family:Arial} p {font-family:Monotype Corsiva; font-size:14pt}
- 13. External Style Sheet •When we want to link external style sheet then we have to use <link> tag which is to be written in the head section. • Advantage :- If we want to change any style then we have to modify only one file.
- 14.