Download to read offline
2_css.pptx
- 1. Internship in WebDesigning RCS Technology CSS stand for "Cascading Style Sheet" Why to Learn CSS? Create Stunning Web site Become a web designer Control web Learn other languages
- 2. TODAY TARGET 2 CSS isused to control the style of a web document in a simple and easy way. CSS is the acronym for "Cascading Style Sheet“ Small Program of CSS <!DOCTYPE html> <html> <head> <title>This is document title</title> <style> h1 { color: #36CFFF; } </style> </head> <body> <h1>Hello World!</h1> </body>
- 3. CSS – WHATIS IT Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. 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 −
- 4. CSS-Sections Selector − Aselector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. . Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
- 5. CSS – WHATIS IT Selector Property-Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property. You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.
- 6. Applications of CSS 4 CSSsaves time Pages load faster Easy maintenance Superior styles to HTML Multiple Device Compatibility Global web standards
- 7. CONTENT AND STYLE 3 What is presented? Howis it presented? CSS HTML Y ou understand ⦁ Any document has two aspects:content and style Y ou see Information
- 8. ATTACH STYLE TOA PAGE 5 ⦁ Define style of each element by its style attribute. ⦁ Define style inside the <style></style> of the HTML document. ⦁ Multiple Style RulesYou 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 as defined in the following example − ⦁ h1 { ⦁ color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; ⦁ }
- 9. Embedded CSS 5 The <style>Element,You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tags. <!DOCTYPE html> <html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 10. Inline CSS -The style Attribute You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax − <html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>
- 11. Multiple Style Rules Youmay 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 as defined in the following example − h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } Grouping Selectors You can apply a style to many selectors if you like. example − h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
- 12. THE SIMPLE “CASCADING” 8 ⦁ Thehigher priority rules overrides the lower one ⦁ The style in style attribute (not recommended) ⦁ The style inside the <style> tag ⦁ The style“imported” inside the <style> tag via @import ⦁ The external style sheet which is linked to by the <link> tag ⦁ The style“imported” inside an external style sheet. ⦁ The default browser style ⦁ The style defined later overrides the previous one.
- 13. CSS SYNTAX 9 ⦁ A setof rules ⦁ A rules ⦁ One selector ⦁ One or more declaration ⦁ Each declaration ⦁ A css property ⦁ Its value:length,percent,color ,url,constant
- 14. THE CSS SIMPLE SELECTORS 10 ⦁Define the elements this rule applies to ⦁ A selector can be one or a sequence of ⦁ Universal selector * ⦁ HTML element h1 { ... } ⦁ Id definition #mainwrap { ... } ⦁ Class definition .post { ... } ⦁ Selectors can be grouped ⦁ h1, h2, .post, #wrap { ... }
- 15. THE CSS SIMPLESELECTORS (cont .) 11 ⦁ Any p element inside a blockquote element ⦁ blockquote p { … } ⦁ Any h1 element inside a element which the id is “sidebox” ⦁ #sidebox h1 { … } ⦁ Any p element have the class custom-para ⦁ p.custom-para { … }
- 16. CSS PROPERTIES :WIDTH and HEIGHT 14 ⦁ width:set the width of an element Value Description auto The browser calculates the width.This is default length Defines the width in px,cm,etc. % Defines the width in percent of the containing block Specifies that the value of the width property should be inherited from the parent element inherit
- 17. CSS PROPERTIES :WIDTH and HEIGHT 15 ⦁ height:set the height of an element Value Description auto The browser calculates the height.This is default length Defines the height in px,cm,etc. % Defines the height in percent of the containing block Specifies that the value of the height property should be inherited from the parent element inherit http://www .w3schools.com/cssref/pr_dim_width.asp
- 18. CSS LENGTH and PERCENTAGE 16 ⦁Length:px,em,mm,cm,in,pt Notation Meaning px One pixel in normal screen display em The font height pt 1/ 72 inch mm,cm,in millimeters,centimeters,inches Percentage:% ⦁ MORE ABOUT DIMENSION ⦁ max-width,min-width,max-height,min-height
- 19. CSS PROPERTIES: TEXT- ALIGN 19 ValueDescription left right Aligns the text to the left (default if ltr) Aligns the text to the right (default if rtl) center Centers the text justify Stretches the lines so that each line has equal width (like in newspapers and magazines) Specifies that the value of the text-align property should be inherited from the parent element inherit
- 20. CSS COLOR VALUES 22 ⦁CSS color name:red, white, navy, … ⦁ Numerical CSS color values: ⦁ RGB or RRGGBB values:#06f, #00ff27,… ⦁ RGBA values (CSS3):rgba(r, g, b, alpha) or rgba(r%, g%, b%, alpha) ⦁ Transparent
- 21. CSS PROPERTIES :TEXT- DECORATION 3 ⦁ text-decoration: set the width of an element Value Description none Defines a normal text.This is default Defines a line below the text underline overline Defines a line above the text line-through Defines a line through the text blink Defines a blinking text Specifies that the value of the text-decoration property should be inherited from the parent element inherit http://www .w3schools.com/cssref/pr_text_text-decoration.asp
- 22. CSS PROPERTIES :TEXT- TRANSFORM 4 ⦁ text-transform: controls the capitalization of text. Value Description none No capitalization.The text renders as it is.This is default capitalize T ransforms the first character of each word to uppercase uppercase T ransforms all characters to uppercase lowercase T ransforms all characters to lowercase inherit Specifies that the value of the text-transform property should be inherited from the parent element
- 23. CSS PROPERTIES : TEXT-IDENT 5 ⦁text-indent: specifies the indentation of the first line in a text-block. Lorem ipsum dolor sit amet,lugens quia quod ait regem ut casus homini interimat potius accipiet.Rationem non potentiaeApollonium contigit cum obiectum dixit.Dionysiadis eum est se sed esse deprecor.
- 24. CSS PROPERTIES : TEXT-IDENT 6 ValueDescription length Defines a fixed indentation in px,pt,cm,em,etc. % Defines the indentation in % of the width of the parent element Specifies that the value of the text-indent property should be inherited from the parent element inherit http://www .w3schools.com/cssref/pr_text_text-indent.asp
- 25. CSS FONTS –SERIF AND SANS-SERIF 8 ⦁ Serif and Sans-serif fonts ⦁ Monospace fonts ⦁ Courier New,Lucida Mono Console,Consolas, Ubuntu ⦁ Times New Roman, Georgia ⦁ Arial,T ahoma,Verdana, Segoe UI,Ubuntu
- 26. CSS PROPERTIES :FONT- FAMILY 9 ⦁ font-family: set font of the element Value Description family-name generic- family A prioritized list of font family names and/ or generic family names inherit Specifies that the font family should be inherited from the parent element ⦁ Try each font in the declared list until the browser finds this font in the local machine.
- 27. CSS PROPERTIES : FONT-SIZE 10 ⦁font-size:set size of a font Value Description xx-small, x-small, small, medium, large, Sets the font-size to a certain size x-large, xx-large smaller Sets the font-size to a smaller size than the parent element Sets the font-size to a larger size than the parent element Sets the font-size to afixedsize in px, cm,etc. Sets the font-size to a percent of the parent element's font size Specifies that the font size should be inherited from the parent element larger length % inherit
- 28. CSS PROPERTIES :LINE- HEIGHT 11 ⦁ line-height: specifies the line height. Value Description normal A normal line height.This is default A number that will be multiplied with the current font size to set the line height A fixed line height in px,pt,cm,etc. A line height in percent of the current font size Specifies that the value of the line-height property should be inherited from the parent element number length % inherit
- 29. CSS PROPERTIES :FONT- WEIGHT 12 ⦁ font-weight: sets how thick or thin characters in text should be displayed. Value Description normal bold bolder lighter Defines normal characters.This is default Defines thick characters Defines thicker characters Defines lighter characters 100, 200, 300, Defines from thin to thick characters. 400 is 400, 500, 600, the same as normal, and 700 is the same as 700, 800, 900 bold inherit Specifies that the font weight should be inherited from the parent element
- 30. CSS PROPERTIES : FONT-STYLE 13 ⦁font-style:set the font style of the text Value Description normal The browser displays a normal font style.This is default The browser displays an italic font style italic oblique The browser displays an oblique font style inherit Specifies that the font style should be inherited from the parent element
- 31. CSS PROPERTIES :FONT- VARIATION 14 ⦁ Font-variation: decide whether this text appears in the small-cap format. Value Description normal The browser displays a normal font.This is default small-caps The browser displays a small-caps font Specifies that the font variant should be inherited from the parent element inherit A SMALL-CAP FONT IS DISPLAYED LIKE THIS, JOHN!
- 32. CSS PROPERTIES : FONT 15 ⦁font: sets all the font properties in one declaration. Value Description font-style Specifies the font style.See font-style for possible values Specifies the font variant.See font-variant for possible values Specifies the font weight.See font-weight for possible values font-variant font-weight font- size/line- height font-family Specifies the font size and the line-height.See font-size and line-height for possible values Specifies the font family .See font-family for possible values
- 33. CSS PROPERTIES : BACKGROUND-COLOR 17 ⦁background-color:sets the background color of an element. ⦁ Include padding and border ,not margin (read more in the 5th day) Value Description color Specifies the background color.Look at CSS ColorValues for a complete list of possible color values. transparent Specifies that the background color should be transparent.This is default inherit Specifies that the background color should be inherited from the parent element
- 34. CSS PROPERTIES : BACKGROUND-IMAGE 18 ⦁background-image:sets the background image for an element. Value Description url('URL') The URL to the image none No background image will be displayed.This is default inherit Specifies that the background image should be inherited from the parent element
- 35. CSS PROPERTIES : BACKGROUND-REPEAT 19 ⦁background-repeat:sets if/ how a background image will be repeated. Value Description repeat The background image will be repeated both vertically and horizontally .This is default repeat-x repeat-y The background image will be repeated only horizontally The background image will be repeated only vertically no-repeat The background-image will not be repeated inherit Specifies that the setting of the background-repeat property should be inherited from the parent element
- 36. C S SPROPERTIES : BACKGROUND-ATTACHMENT 20 ⦁ ackground-attachment:sets whether a background image is fixed or scrolls with the rest of the page. Value Description scroll The background image scrolls with the rest of the page.This is default fixed The background image is fixed inherit Specifies that the setting of the background-attachment property should be inherited from the parent element
- 37. CSS PROPERTIES: BACKGROUND- POSITION 22 ValueDescription left top left center left bottom right top right center right bottom center top center center center bottom If you only specify one keyword,the other value will be "center" x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%.The right bottom corner is 100% 100%. If you only specify one value,the other value will be 50%. .Default value is:0% 0% The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0.Units can be pixels (0px 0px) or any other CSS units.If you only specify one value,the other value will be 50%.You can mix % and positions Specifies that the setting of the background-position property should be inherited from the parent element xpos ypos inherit
- 38. CSS PROPERTIES : BACKGROUND 23 ⦁background:sets all the background properties in one declaration. Value Description background-color Specifies the background color to be used background- position Specifies the position ofthe background images background-repeat Specifies how to repeat the background images background- attachment Specifies whether the background images are fixed or scrolls with the rest of the page background-image Specifies O NE or MO RE background images to be used
- 39. YOURTASK 25 ⦁ Improve yourprevious website by applying the new CSS rules ACTION Do more & more & Get more,&moremore …