Cordova training - Day 2 Introduction to CSS 3
Download as PPTX, PDF1 like238 views
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.
![TYPES OF SELECTORS
Class Selectors
.black
ID Selectors
#black
Child Selectors
body > p
Attribute Selectors
input[type = "text"]](https://image.slidesharecdn.com/day2-introductiontocss3-170425040715/85/Cordova-training-Day-2-Introduction-to-CSS-3-9-320.jpg)
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 }
- 6. CSS SYNTAX
- 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
- 27. THANK YOU