SlideShare a Scribd company logo

Css

•Download as PPTX, PDF•
•
N
Nasla C.K

This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS as used to style and lay out web pages, working with HTML. Key points covered include: - CSS allows separation of document structure (HTML) from presentation (CSS). - CSS works with the box model and can control colors, fonts, layout, and other design aspects. - Styles can be defined internally, externally, or inline. External is best for multiple pages. - Selectors identify HTML elements to which styles apply. Types include elements, classes, IDs. - Common style properties covered are backgrounds, text, fonts, borders, and tables. - An example is provided to demonstrate CSS syntax and

Related slideshows

Css
CssCss
Css
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
1 of 29
Css
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
Nasla.C.K naslack31@gmail.com in.linkedin.com/in/nasla 12345656 CSS
CONTENTS • What is CSS? • Style Sheet • Advantages of CSS • Selectors • Style Properties • Example
CSS • CSS stands for Cascading Style Sheet. • HTML and CSS work together to produce beautiful and functional Web sites • HTML = structure & CSS = style • “HTML without CSS is like a piece of candy without a pretty wrapper.”
CSS • CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float. • CSS can control many elements of our web pages: colors, fonts, alignment, borders, backgrounds, spacing, margins, and much more.
CSS • An HTML file (or multiple files) links to a CSS file (or multiple CSS files) and when the web browser displays the page, it references the CSS file(s) to determine how to display the content. • Allows elements to “inherit” styles from parent elements.
Attaching a Style Sheet • Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel="stylesheet" type="text/css" href="css/styles.css" />
Attaching a Style Sheet 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red”>Some Text</p>
Attaching a Style Sheet • It will use a priority system to determine which format to display on the page. – Inline style (highest priority) – Internal style sheet (second priority) – External style sheet (third priority)
Advantages of CSS • CSS saves time • Pages load faster Less code means faster download times. • Easy maintenance To change the style of an element, you only have to make an edit in one place. • Superior styles to HTML CSS has a much wider array of attributes than HTML. • Consistency : A Standard flow, look & feel can be maintained for all pages of a Web Site.
Selectors • A selector identifies elements on an HTML page . • A CSS Rule is made up of a selector and a declaration. • A declaration consists of property and value. • selector {property: value;} declaration
Selectors • The declaration groups are surrounded by curly brackets:, { }. • A semicolon must follow each style declaration. • You can define as many selectors as you wish for the element you are formatting.
Selectors • Types, – Element Selector – Class selectors – Contextual selectors • Element Selector A selector, here in green, is often an element of HTML. – body {background: purple; } – h1 {color: green; }
Selectors • ID and Class selectors: • IDs (#) are unique and can only be used once on the page. • Classes (.) can be used as many times as needed. i.e. reusable.
Selectors • HTML Code: <h1 id=“mainHeading”>Names</h1> <p class=“name”>Joe</p> • CSS Code: #mainHeading {color: green} .name {color: red}
Selectors • Contextual selectors For selecting tags according to condition. Eg: If we need to select paragraph tags inside table tag – table p { color: blue } This one is saying that you want to set the value for <p> tags that belongs to <table> tags.
Style Properties • Background • Font • Text • Border • Table
Style Properties • Background properties. – background-color – background-image – background-repeat – background-attachment – background-position – background
Style Properties • Text properties. – Text-indent – Text-align – Text-decoration – Letter-spacing – Text-transform – Word-spacing
Style Properties • Font properties. – Font – Font-family – Font-size – Font-style – @font-face – Font-kerning
Style Properties • Border Properties – border – Border-style – Border-width – Border-color – Border-radius
Style Properties • Table properties – border-collapse – Border-spacing – Padding – Height – Width – Caption-side
Example
Example
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

  • 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. CONTENTS • What is CSS? • Style Sheet • Advantages of CSS • Selectors • Style Properties • Example
  • 5. CSS • CSS stands for Cascading Style Sheet. • HTML and CSS work together to produce beautiful and functional Web sites • HTML = structure & CSS = style • “HTML without CSS is like a piece of candy without a pretty wrapper.”
  • 6. CSS • CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float. • CSS can control many elements of our web pages: colors, fonts, alignment, borders, backgrounds, spacing, margins, and much more.
  • 7. CSS • An HTML file (or multiple files) links to a CSS file (or multiple CSS files) and when the web browser displays the page, it references the CSS file(s) to determine how to display the content. • Allows elements to “inherit” styles from parent elements.
  • 8. Attaching a Style Sheet • Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel="stylesheet" type="text/css" href="css/styles.css" />
  • 9. Attaching a Style Sheet 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red”>Some Text</p>
  • 10. Attaching a Style Sheet • It will use a priority system to determine which format to display on the page. – Inline style (highest priority) – Internal style sheet (second priority) – External style sheet (third priority)
  • 11. Advantages of CSS • CSS saves time • Pages load faster Less code means faster download times. • Easy maintenance To change the style of an element, you only have to make an edit in one place. • Superior styles to HTML CSS has a much wider array of attributes than HTML. • Consistency : A Standard flow, look & feel can be maintained for all pages of a Web Site.
  • 12. Selectors • A selector identifies elements on an HTML page . • A CSS Rule is made up of a selector and a declaration. • A declaration consists of property and value. • selector {property: value;} declaration
  • 13. Selectors • The declaration groups are surrounded by curly brackets:, { }. • A semicolon must follow each style declaration. • You can define as many selectors as you wish for the element you are formatting.
  • 14. Selectors • Types, – Element Selector – Class selectors – Contextual selectors • Element Selector A selector, here in green, is often an element of HTML. – body {background: purple; } – h1 {color: green; }
  • 15. Selectors • ID and Class selectors: • IDs (#) are unique and can only be used once on the page. • Classes (.) can be used as many times as needed. i.e. reusable.
  • 16. Selectors • HTML Code: <h1 id=“mainHeading”>Names</h1> <p class=“name”>Joe</p> • CSS Code: #mainHeading {color: green} .name {color: red}
  • 17. Selectors • Contextual selectors For selecting tags according to condition. Eg: If we need to select paragraph tags inside table tag – table p { color: blue } This one is saying that you want to set the value for <p> tags that belongs to <table> tags.
  • 18. Style Properties • Background • Font • Text • Border • Table
  • 19. Style Properties • Background properties. – background-color – background-image – background-repeat – background-attachment – background-position – background
  • 20. Style Properties • Text properties. – Text-indent – Text-align – Text-decoration – Letter-spacing – Text-transform – Word-spacing
  • 21. Style Properties • Font properties. – Font – Font-family – Font-size – Font-style – @font-face – Font-kerning
  • 22. Style Properties • Border Properties – border – Border-style – Border-width – Border-color – Border-radius
  • 23. Style Properties • Table properties – border-collapse – Border-spacing – Padding – Height – Width – Caption-side
  • 27. 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.
  • 28. 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
  • 29. 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