1. Cascading Style sheet

2. What is CSS?  CSS stands for Cascading Style Sheets  Cascading: refers to the procedure that determines which style will apply to a certain  section, if you have more than one style rule.  Style: how you want a certain part of your page to look. You can set things like color,  margins, font, etc for things like tables, paragraphs, and headings.  Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage  will look.  CSS describes how html elements are to be displayed on the screen, paper, or in other media.

3. History  CSS1 was the first edition introduced in 1996.  CSS2 was published in 1998 and provides enhancement over CSS1.  CSS2.1 was the last was the last 2 nd generation of CSS.  CSS3 is the latest edition. Several new functionalities have been provided through CSS3.  Functions like rounded corners, background decoration, box shadows, which are demonstrated in the subsequent sections, are introduced in this version.

4. Advantages  A web application will contains hundreds of web pages, which are created using HTML.  Formatting these HTML pages will be a laborious process, as formatting elements need to be applied to each and every page.  CSS saves lots of work as we can change the appearance and layout of all the web pages by editing just one single CSS file.

5. CSS Syntax Rules  Rule have two parts - Selector and declaration.  Selector: The HTML element you want to add style to.  etc.  Declaration: The statement of style for that element. Made up of property and value.

6. CSS Style Example  Selector - I want the text color of my paragraph to be red and the background color to be black.

7. CSS Selectors  CSS selectors allow you to select and manipulate HTML elements based on their id, class, type, attribute, and more.  Examples –  Declaring CSS Rule For a Class Attribute  The HTML  Book  The CSS .pdf { background: url(images/pdf.gif) no-repeat left 50%;}  Use a period when writing a rule for a class

8. CSS Selectors (Cont.)  Declaring CSS rule for Id attribute  The HTML  main content  The CSS  #wrapper { width:250px; margin:0 auto;}  Use a pound sign when writing a rule for Id  Declaring a CSS Rule for a Elements Attribute  It will style all the content of that element which you are selecting.  The HTML  Welcome to the CSS  learn CSS in one day  The CSS  p {text-align: center; color: blue;}

9. CSS Selectors (Cont.)  Grouping Selectors  You can group all the selectors of same style to minimize the code. The selectors should be separated with comma.  Example  H2 { text-align: center; color: red; }  p { text-align: center; color: red; }  Grouped Selectors  h2,p { text-align: center; color: red; }

10. Inserting a Style Sheet  You can do in three different ways-  1. External Style Sheet  Styles are specified in an external CSS file. you can change the looks of entire website by using single external style sheet.  E.g.:  2. Internal Style Sheet  To Appy specific styles to a single HTML file inside the head section of an HTML page.  E.g.: p { text-align :left; font-size :24px; }  3. Inline Styles  Styles are specified inside an HTML tag/element.  E.g.: Demo of Inline Style

11. Inserting a Style Sheet  Multiple Style Sheets – It can be referenced inside an HTML document.  The questions is, what styles will be applicable when there is more than one style specified?  All styles cascade into a new virtual style sheet by applying the  following rules, where the higher number has the greater priority:  1. Browser default.  2. External Stylesheet.  3. Internal Stylesheet (styles defined in head section).  4. Inline Style (styles defined in an HTML element).

12. Formatting with CSS Properties  CSS Background  We can use CSS Background properties to define the background effects of an element.  The following properties can be used for background effects :  a. background-color  b. background-image  c. background-repeat  d. background-position

13. Formatting with CSS Properties  CSS Background Image  You can use an image as the background for an element using background-image property.  Example body{ background-image: url(‘java.png’); }  By default, the image is repeated, both horizontally and vertically, so as to cover the entire body (or the element on which it is applied).

14. Formatting with CSS Properties  CSS Background Color  The background-color property is used to specify the background color of an element.  Example body{ background-color :darkblue; }  Similarly, we can specify the background for any element (wherever applicable). p { background-color :orange; }

15. Formatting with CSS Properties  CSS Background Position  If the background image disturbs the text, i.e. if the text cannot be read clearly due to  the image in the background, we can set the position of the background image. Example body{ background-image: url(“snapdeal.jpg"); background-repeat: no-repeat; background-position :right top;  }

16. Formatting with CSS Properties  CSS Background Shorthand  You can also specify all the properties in a single property.  This property is known as shorthand property.  For specifying shorthand property, you just need to use background.  Example body{ background: cyan url(‘snapdeal.jpg') no-repeat right top ; }

17. Formatting with CSS Properties  Text Formatting  The following properties can be used for formatting text : 1. Text Color 2. Text Alignment 3. Text Decoration 4. Text Transformation 5. Text Indentation

18. Formatting with CSS Properties  Text Alignment  We can either align the text to the left, right, center or we can make it justified.  Example p{ text-align :left; } h1{ text-align :center;}  Text Color  The color property is used to set the color of text.  Example body{ color :blue;} p1 { color :magenta;}

19. Formatting with CSS Properties  Text Decoration  You can use text-decoration property to set or remove decorations from text.  Example p{ text-decoration: overline;} p { text-decoration: line-through;} p { text-decoration: underline;}  Text Transformation  You can use text-transform property to specify uppercase and lowercase letters of any text.  Example h1{ text-transform: uppercase;} h2 { text-transform: lowercase;} p { text-transform: capitalize;}

20. Formatting with CSS Properties  CSS Font  CSS font properties are used to define the font family, size, style and boldness of the text.  In CSS, there are two types of font family names:  generic family - a group of font families with a similar look (like "Serif" or "Monospace").  font family - a specific font family (like "Times New Roman" or "Arial").  Comments in CSS  /* comment */ - This is comment used in CSS.

21. Formatting with CSS Properties  CSS Font Family  The font-family property should hold several font names as a "fallback" system. If the  browser does not support the first font, it tries the next font.  Example :  p { font-family:”Arial”, Times, “Sans-serif ”;}  CSS Font Style  You can use the property font-style to specify mostly italic text. It has three values –  Normal, Italic, Oblique (similar to italic).

22. Formatting with CSS Properties  CSS Font Size  You can use the font-size property to set the size of text. The font-size value can be  absolute or it can be relative.  Example h1 { font-size: 30px; } p { font-size: 14px; }

23. Formatting with CSS Properties  CSS Font Size with em (Relative Size)  You may face resizing problems, when you use older versions of browsers.  To avoid such problems, you can use set font size using em, instead of pixels.  The em size unit is a W3C recommendation.1 em is equal to the current font size.  The default text size is 16 px. So, the default size of 1 em is 16 px.  Example h2 { font-size: 1.875em; /* 30px/16=1.875em */ }

24. Formatting with CSS Properties  CSS Links  You can use CSS styles to style any link. Links can be  styled in different ways by using any CSS property like color, font-family etc.  Links can be in one of the following states :  a: link – Unvisited link  a: visited – A link that the user has visited  a: hover – A link over which the mouse pointer is moving  a: active – A link, which has been just clicked  Links can be styled according to their states.

25. Formatting with CSS Properties  CSS Links

26. Formatting with CSS Properties  CSS List  You can use CSS list properties for  Setting different list item markers for ordered lists  Setting different list item markers for unordered lists  Set an image as the list item marker  Values-  list-style-type  list-style-image

27. Formatting with CSS Properties  Box Model : Introduction  Box model is useful for designing the layout of an HTML Page.  CSS Box model describes a box that wraps around HTML elements.  Using this model, we can define the margins, borders, padding and the actual content. We  can place border around elements and space elements in relation to each other.

28. Formatting with CSS Properties  CSS Padding  You can use the CSS padding properties to define the space between the element border  and the element content. It is possible to change the top, right, bottom and  left padding independently using separate properties.  You can also use a shorthand padding property to change all paddings in a single statement.  Individual padding properties can be specified as follows :  padding-top:20px;  padding-bottom:30px;  padding-right:25px;  padding-left:10px;  In shorthand-  padding : 20px 30px 25px 10px;

29. Formatting with CSS Properties  CSS Border  You can use the CSS Border properties to specify  the style and color of an element’s border.  Values  border-style  border-width  border-color

30. Formatting with CSS Properties  CSS Margin  Using CSS Margin properties you can specify the space around elements.  Values:  margin-top:50px;  margin-bottom:30px;  margin-right:25px;  margin-left:10px;  In shorthand  margin:  50px 30px 25px 10px;

31. CSS Icons  How to add Icons  The simplest way to add an icon to your html page, is with icon library, such as Font Awesome.  Add the name of the specified icon class to any inline html element (like or ).  All the icons in the icon library below are scalable vectors that can be customized with CSS(size,color,shadow,etc.).  Font AweSome Icons  To use font AweSome icons Add the following line insdie the section of your HTML page.  https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css  Note no downloading or installation is required.

32. CSS Outline  The CSS outline properties specify the style, color, and width of an outline.  An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".  However, the outline property is different from the border property - The outline is NOT a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.  This element has a thin black border and an outline that is 10px wide and green.

33. Outline Style  The outline-style property specifies the style of the outline.  The outline-style property can have one of the following values:  dotted - Defines a dotted outline  dashed - Defines a dashed outline  solid - Defines a solid outline  double - Defines a double outline  groove - Defines a 3D grooved outline. The effect depends on the outline-color value  ridge - Defines a 3D ridged outline. The effect depends on the outline-color value  inset - Defines a 3D inset outline. The effect depends on the outline-color value  outset - Defines a 3D outset outline. The effect depends on the outline-color value  none - Defines no outline  hidden - Defines a hidden outline

34. Cont…  The following example first sets a thin black border around each element, then it shows the different outline-style values:  Example p { border: 1px solid black; outline-color: red; }  p.dotted {outline-style: dotted;}  p.dashed {outline-style: dashed;}  p.solid {outline-style: solid;}  p.double {outline-style: double;}  p.groove {outline-style: groove;}  p.ridge {outline-style: ridge;}  p.inset {outline-style: inset;}  p.outset {outline-style: outset;}