Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Css.html

•Download as PPTX, PDF•
•
A
Anaghabalakrishnan

This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as used to format and style web pages, describes the advantages of using CSS including simplifying design changes and creating style sheets for different audiences. It then explains the basic syntax of CSS using examples and describes the three types of CSS styles: internal, inline, and external styles. Finally, it outlines different CSS selectors including element, id, and class selectors and provides an example of how to use CSS to style an HTML table.

1 of 21
Css.html
Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
Anaghabalakrishnan anaghabalakrishnan07@gmail.com Anaghabalakrishnanchintu twitter.com/username in.linkedin.com/in/profilename 12345679 topic
CASCADING STYLE SHEET (CSS) • Cascading style sheet are used to format the layout of Web pages. • They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML.
ADVANTAGES OF CSS • CSS simplifies design changes. • Separating content from design enables you to create different style sheet for different audiences and devices. • As you get advanced with CSS, you can even create multiple style sheets for the same Web page.
CSS SYNTAX A CSS rule set consist of a selectors and a declaration block. A CSS declaration always end with a semicolon, and a declaration groups are surrounded by curly braces. p {color: red; text-align: center;} p-Selector. {color: red; text-align: center;}-Declaration. Where color and text-align is property, and blue and center is value.
TYPES OF CSS STYLES There are three types of CSS. 1. Internal (Embedded) Styles. 2. Inline Styles. 3. External Styles.
INTERNAL STYLES • It holds the CSS code for the webpage in the head section of the particular file. • This makes it easy to apply styles like classes or id’s in order to reuse the code. • The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
EXTERNAL STYLES • It is a .css file that you link your website to. • This makes it so that what ever you changes in the .css sheet, will effect every page in your website. • This prevents you from having to many code changes in each page. This is for “global” site changes.
INLINE STYLES • It is specific to the tag itself. • The inline style uses the “HTML” style attribute to style a specific tag. This is not recommend, as every CSS changes has to be made in every tag that has the inline style applied to it • .The inline style is good for one an individual CSS changes that you do not use repeatedly through the site.
CSS SELECTORS CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to find (or select) HTML elements based on their on id, class, type, attribute, and more. CSS selectors are .. 1. The element selector. 2. The id selector. 3. The class selector.
The element Selectors It selects elements based on the element name. We can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color) Example p { text-align: center; color: red; }
The id selector The id selectors uses the id attribute of an HTML elements to select a specific element. The id selectors is used if you want to select a single ,unique element.To select an element with a specific id,write a hash character ,followed by the id of the element. Example #para1 { text-align: center; color: red; }
The class selector Class selectors selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class. Example .center { text-align: center; color: red; }
Example of CSS <html> <head> <style> #rcorners { Border-radius:25px; Padding:20px; Width:200px; Height:150px; } </style></head> <body> <table border=“1” id=“rcorners”cellpadding=“10”> <tr><th colspan=“5”>EMPLOYEE DETAILS</th></tr> <tr> <td>Name</td> <td>Salary</td> </tr> <tr><td>anu</td><td>10000</td ></tr> <tr><td>manu</td><td>10000</ td></tr> </body> </html>
Css.html
Css.html
Thankyou…
Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com Contact Us

More Related Content

Css.html

  • 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  • 4. CASCADING STYLE SHEET (CSS) • Cascading style sheet are used to format the layout of Web pages. • They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML.
  • 5. ADVANTAGES OF CSS • CSS simplifies design changes. • Separating content from design enables you to create different style sheet for different audiences and devices. • As you get advanced with CSS, you can even create multiple style sheets for the same Web page.
  • 6. CSS SYNTAX A CSS rule set consist of a selectors and a declaration block. A CSS declaration always end with a semicolon, and a declaration groups are surrounded by curly braces. p {color: red; text-align: center;} p-Selector. {color: red; text-align: center;}-Declaration. Where color and text-align is property, and blue and center is value.
  • 7. TYPES OF CSS STYLES There are three types of CSS. 1. Internal (Embedded) Styles. 2. Inline Styles. 3. External Styles.
  • 8. INTERNAL STYLES • It holds the CSS code for the webpage in the head section of the particular file. • This makes it easy to apply styles like classes or id’s in order to reuse the code. • The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
  • 9. EXTERNAL STYLES • It is a .css file that you link your website to. • This makes it so that what ever you changes in the .css sheet, will effect every page in your website. • This prevents you from having to many code changes in each page. This is for “global” site changes.
  • 10. INLINE STYLES • It is specific to the tag itself. • The inline style uses the “HTML” style attribute to style a specific tag. This is not recommend, as every CSS changes has to be made in every tag that has the inline style applied to it • .The inline style is good for one an individual CSS changes that you do not use repeatedly through the site.
  • 11. CSS SELECTORS CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to find (or select) HTML elements based on their on id, class, type, attribute, and more. CSS selectors are .. 1. The element selector. 2. The id selector. 3. The class selector.
  • 12. The element Selectors It selects elements based on the element name. We can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color) Example p { text-align: center; color: red; }
  • 13. The id selector The id selectors uses the id attribute of an HTML elements to select a specific element. The id selectors is used if you want to select a single ,unique element.To select an element with a specific id,write a hash character ,followed by the id of the element. Example #para1 { text-align: center; color: red; }
  • 14. The class selector Class selectors selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class. Example .center { text-align: center; color: red; }
  • 15. Example of CSS <html> <head> <style> #rcorners { Border-radius:25px; Padding:20px; Width:200px; Height:150px; } </style></head> <body> <table border=“1” id=“rcorners”cellpadding=“10”> <tr><th colspan=“5”>EMPLOYEE DETAILS</th></tr> <tr> <td>Name</td> <td>Salary</td> </tr> <tr><td>anu</td><td>10000</td ></tr> <tr><td>manu</td><td>10000</ td></tr> </body> </html>
  • 19. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  • 20. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
  • 21. Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com Contact Us