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

Cordova training - Day 2 Introduction to CSS 3

•Download as PPTX, PDF•
•
Binu Paul
Binu Paul

This document provides an introduction to CSS3 and its key concepts. It discusses how CSS is used to control the style and presentation of HTML documents. The main topics covered include the advantages of CSS like time savings and easy maintenance, the different CSS modules, syntax involving selectors, properties and values, and how to include CSS through different methods. It also explains various CSS properties for styling text, backgrounds, borders, images and positioning elements.

Related slideshows

Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 
Css3
Css3Css3
Css3
 
CSS
CSS CSS
CSS
 
1 of 27
CORDOVA TRAINING SESSION: 2 – INTRODUCTION TO CSS 3
INTRODUCTION TO CSS 3  CSS is used to control the style of a web document in a simple and easy way.  CSS is the acronym for "Cascading Style Sheet".  Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.  CSS handles the look and feel part of a web page.  Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout design, variations in display for different devices and screen sizes as well as a variety of other effects.
ADVANTAGES OF CSS  Advantages of CSS:  CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.  Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.  Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.  Offline Browsing - The cache also ensures faster loading and better overall performance of the website.
CSS MODULES  Selectors  Box Model  Backgrounds and Borders  Image Values and Replaced Content  Text Effects  2D/3D Transformations  Animations  Multiple Column Layout  User Interface
CSS SYNTAX  A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.  A style rule is made of three parts:  Selector - A selector is an HTML tag at which a style will be applied  Property - A property is a type of attribute of HTML tag  Value - Values are assigned to properties  You can put the rule as:  selector { property: value }
CSS SYNTAX
TYPES OF SELECTORS  We can define selectors in various simple ways. They are:  Type selectors  Universal Selectors  Descendant Selectors  Class Selectors  ID Selectors  Child Selectors  Attribute Selectors
TYPES OF SELECTORS  We can define selectors in various simple ways. They are:  Type selectors  div, p, h1  Universal Selectors  *  Descendant Selectors  ul em
TYPES OF SELECTORS  Class Selectors  .black  ID Selectors  #black  Child Selectors  body > p  Attribute Selectors  input[type = "text"]
MULTIPLE STYLE RULES  You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block. All the property and value pairs are separated by a semi colon. You can keep them in a single line or multiple lines. For better readability we keep them into separate lines.  Example: h1 { color: #36C; font-weight: normal; margin-bottom: 1em; text-transform: lowercase; }
ADDING CSS TO A PAGE  There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.  Embedded CSS - The <style> Element  Inline CSS - The style Attribute  External CSS - The <link> Element  Imported CSS - @import Rule
CSS RULES OVERRIDING  We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.  Inline style sheet takes highest priority  Any rule defined in <style></style> tags will override rules defined in any external style sheet file  Any rule defined in external style sheet file takes lowest priority
CSS COMMENTS  You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
CSS MEASUREMENT UNITS  CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. The most commonly used one’s are:  %  mm  cm  px  em  pt
CSS COLORS  CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders.  You can specify your color values in various formats:  HEX code - #RRGGBB  Short HEX code - #RGB  RGB % - rgb(rr%, gg%, bb%)  RGB Absolute – rgb(r,g,b)  Color value – red, green, blue etc.
CSS BACKGROUNDS  Using CSS, you can set the following background properties of an element.  background-color  background-image  background-repeat  background-position  background-attachment  background
CSS FONTS  Using CSS, You can set following font properties of an element.  font-family  font-style  font-weight  font-size  font
CSS TEXT  Using CSS, you can manipulate the text related properties of an element.  color  direction  letter-spacing  word-spacing  text-indent  text-align
CSS IMAGES  Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.  CSS plays a good role to control image display. You can set the following image properties using CSS.  border  height  width
CSS BORDERS  The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:  border-color  border-style  border-width
CSS MARGINS  The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. We have the following properties to set an element margin:  margin  margin-left|right|top|bottom
CSS PADDINGS  The padding property allows you to specify how much space should appear between the content of an element and its border. We can also set different values for the padding on each side of the box using the following properties  padding  padding-left|right|top|bottom
CSS DIMENSIONS  You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this slide, we will learn how we can change the dimensions of boxes.  height, min-height, max-height  width, min-width, max-width  line-height
CSS SCROLL BARS  There may be a case when an element's content might be larger than the amount of space allocated to it. CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:  visible  hidden  scroll  auto
CSS VISIBILITY  A property called visibility allows you to hide an element from view. You can use this property along with JavaScript to create very complex menu and very complex webpage layouts.  The visibility property can take the values listed below:  visible  hidden
CSS POSITIONING  CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.  The positioning can take the values listed below:  Relative  Absolute  Fixed
THANK YOU

More Related Content

Cordova training - Day 2 Introduction to CSS 3

  • 1. CORDOVA TRAINING SESSION: 2 – INTRODUCTION TO CSS 3
  • 2. INTRODUCTION TO CSS 3  CSS is used to control the style of a web document in a simple and easy way.  CSS is the acronym for "Cascading Style Sheet".  Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.  CSS handles the look and feel part of a web page.  Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout design, variations in display for different devices and screen sizes as well as a variety of other effects.
  • 3. ADVANTAGES OF CSS  Advantages of CSS:  CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.  Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.  Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.  Offline Browsing - The cache also ensures faster loading and better overall performance of the website.
  • 4. CSS MODULES  Selectors  Box Model  Backgrounds and Borders  Image Values and Replaced Content  Text Effects  2D/3D Transformations  Animations  Multiple Column Layout  User Interface
  • 5. CSS SYNTAX  A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.  A style rule is made of three parts:  Selector - A selector is an HTML tag at which a style will be applied  Property - A property is a type of attribute of HTML tag  Value - Values are assigned to properties  You can put the rule as:  selector { property: value }
  • 7. TYPES OF SELECTORS  We can define selectors in various simple ways. They are:  Type selectors  Universal Selectors  Descendant Selectors  Class Selectors  ID Selectors  Child Selectors  Attribute Selectors
  • 8. TYPES OF SELECTORS  We can define selectors in various simple ways. They are:  Type selectors  div, p, h1  Universal Selectors  *  Descendant Selectors  ul em
  • 9. TYPES OF SELECTORS  Class Selectors  .black  ID Selectors  #black  Child Selectors  body > p  Attribute Selectors  input[type = "text"]
  • 10. MULTIPLE STYLE RULES  You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block. All the property and value pairs are separated by a semi colon. You can keep them in a single line or multiple lines. For better readability we keep them into separate lines.  Example: h1 { color: #36C; font-weight: normal; margin-bottom: 1em; text-transform: lowercase; }
  • 11. ADDING CSS TO A PAGE  There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.  Embedded CSS - The <style> Element  Inline CSS - The style Attribute  External CSS - The <link> Element  Imported CSS - @import Rule
  • 12. CSS RULES OVERRIDING  We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.  Inline style sheet takes highest priority  Any rule defined in <style></style> tags will override rules defined in any external style sheet file  Any rule defined in external style sheet file takes lowest priority
  • 13. CSS COMMENTS  You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.
  • 14. CSS MEASUREMENT UNITS  CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. The most commonly used one’s are:  %  mm  cm  px  em  pt
  • 15. CSS COLORS  CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders.  You can specify your color values in various formats:  HEX code - #RRGGBB  Short HEX code - #RGB  RGB % - rgb(rr%, gg%, bb%)  RGB Absolute – rgb(r,g,b)  Color value – red, green, blue etc.
  • 16. CSS BACKGROUNDS  Using CSS, you can set the following background properties of an element.  background-color  background-image  background-repeat  background-position  background-attachment  background
  • 17. CSS FONTS  Using CSS, You can set following font properties of an element.  font-family  font-style  font-weight  font-size  font
  • 18. CSS TEXT  Using CSS, you can manipulate the text related properties of an element.  color  direction  letter-spacing  word-spacing  text-indent  text-align
  • 19. CSS IMAGES  Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.  CSS plays a good role to control image display. You can set the following image properties using CSS.  border  height  width
  • 20. CSS BORDERS  The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:  border-color  border-style  border-width
  • 21. CSS MARGINS  The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. We have the following properties to set an element margin:  margin  margin-left|right|top|bottom
  • 22. CSS PADDINGS  The padding property allows you to specify how much space should appear between the content of an element and its border. We can also set different values for the padding on each side of the box using the following properties  padding  padding-left|right|top|bottom
  • 23. CSS DIMENSIONS  You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this slide, we will learn how we can change the dimensions of boxes.  height, min-height, max-height  width, min-width, max-width  line-height
  • 24. CSS SCROLL BARS  There may be a case when an element's content might be larger than the amount of space allocated to it. CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:  visible  hidden  scroll  auto
  • 25. CSS VISIBILITY  A property called visibility allows you to hide an element from view. You can use this property along with JavaScript to create very complex menu and very complex webpage layouts.  The visibility property can take the values listed below:  visible  hidden
  • 26. CSS POSITIONING  CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.  The positioning can take the values listed below:  Relative  Absolute  Fixed