Introduction to css & its attributes with syntax
- 1. Cascading Style Sheet (CSS) By M.Priyadharshini MCA
- 2. Introduction CSS – Cascading Style Sheet. It define how to display HTML elements. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.
- 3. CSS Syntax
- 4. We have 3 types of CSS ➢Inline style sheet <H1 style="color: maroon"> ➢Embeded style sheet <style> </style> ➢External style sheet <link href="style.css"> We type the code in notepad and save it in .html format.
- 5. Inline style sheet: We can write css properties directly at the tags by using style attribute. Inline style(inside an HTML element) <p style="color:sienna;margin- left:20px">This is a paragraph.</p>
- 6. Properties: ➔ Background-color: Used to change the bgcolor of a text in a web page. ➔ Color: Used to apply Color to the text in a web page. ➔ Text-align: Used to adjust the text in left, right, centre of the page. ➔ Word-spacing: Used to give specified space in b/w the words. ➔ Letter-spacing: Used to give specified space in b/w the letters.(ex: 12px px means pixel).
- 7. Embeded style sheet. : we write css properties at the head part by using style attribute. Embeded style sheet(in the head section) <head> < style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} < /style> < /head>
- 8. properties url: it helps to bring the image to a web page by giving its address or the image name with format.(ex: bg.jpg) “background- image: url (“nh.jpg”) Background-repeat: when we add an image then it will be added in a x , y axis format , no- repeat. So we have 4 types Background-color: to give color to the webpage.
- 9. External style sheet: we write the css properties in another notepad and save it with .css format. We are calling this css file at the head part of the html by using link tag. External style sheet <head> < link rel="stylesheet" type="text/css" href="mystyle.css"> < /head>
- 10. properties ● Link: This is used to link the code in different notepads.
- 11. CSS Styling CSS Box Model CSS Advanced Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding CSS Display CSS Positioning CSS Floating CSS Align CSS Tags Categories
- 12. Thank you