1. LEARNING CSS www.techieweb.in Techieweb Solutions Techieweb solutions

2. I NTRODUCTION CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

3. Techieweb solutions Syntax of CSS CSS Syntax A CSS rule set consists of a selector and a declaration block: SELECTOR { PROPERTY: VALUE } The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon. Example: p {color:red;text-align:center;} OR p { color: red; text-align: center; }

4. Techieweb solutions Comments in CSS Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines. Example: p { color: red; /* This is a single-line comment */ text-align: center; /* This is a multi-line comment */ }

5. Techieweb solutions CSS Selectors CSS selectors allow you to select and manipulate HTML element(s). CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. The element Selector: The element selector selects elements based on the element name. You can select all elements on a page like this: Example: p { text-align: center; color: red; }

6. Techieweb solutions CSS Selectors The id Selector The id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. To find an element with a specific id, write a hash character (#). Example: #para1 { text-align: center; color: blue; }

7. Techieweb solutions CSS Selectors The class Selector The class selector finds elements with the specific class. The class selector uses the HTML class attribute. To find elements with a specific class, write a period character (.) Example:.center { text-align: center; color: red; } You can also specify that only specific HTML elements should be affected by a class. Example: p.center { text-align: center; color: red; }

8. Techieweb solutions Different Types of CSS Types of CSS: There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style

9. Techieweb solutions Inline Styles: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element: Example: This is a heading. Inline Style

10. Techieweb solutions Internal Style Sheet: o An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the tag, like this: Example: body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } Internal Style Sheet

11. Techieweb solutions External Style Sheet: An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the tag. The tag goes inside the head section: Example: o External Style Sheet

12. Techieweb solutions An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } External Style Sheet

13. Techieweb solutions CSS BACKGROUNDS With CSS, you are able to set the background color or image of any CSS element. In addition, you have control over how the background image is displayed. You may choose to have it repeat horizontally, vertically, or in neither direction. You may also choose to have the background remain in a fixed position, or have it scroll as it does normally. CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position

14. Techieweb solutions BACKGROUNDS COLORS Background Color: The background-color property specifies the background color of an element. Below are a couple examples of CSS backgrounds. Example: h4 { background-color: red; } p { background-color: #1078E1; } ul { background-color: rgb( 149, 206, 145); } o Output: This is a with red background color. This is a paragraph with blue color. This is a an unordered list: HTML CSS

15. Techieweb solutions BACKGROUND IMAGE Background Image: The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Example: body { background-image: url(“bg.gif"); } Output: Here we apply image to background. Hello CSS !!!!!!!!!

16. Techieweb solutions BACKGROUND REPEAT Background Image Repeat: By default, the background-image property repeats an image both horizontally and vertically. You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction. Example: body { background-image: url(“bg.gif"); background-repeat: repeat-x; } Output: In This Example Image is Repeating Horizontally

17. Techieweb solutions BACKGROUND POSITION Background Image-Position: The background-position property sets the starting position of a background image. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Example: body { background-color:yellow; background-image: url(“smallpic.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } Output: An Image with center position

18. Techieweb solutions CSS BORDERS Border in CSS: 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 The border-color Specifies the color of a border. The border-style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. The border-width Specifies the width of a border.

19. Techieweb solutions CSS BORDERS Border Color in CSS: The border-color property allows you to change the color of the border surrounding an element. border-bottom-color changes the color of bottom border. border-top-color changes the color of top border. border-left-color changes the color of left border. border-right-color changes the color of right border. Example: p.example1{ border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ }

20. Techieweb solutions CSS BORDERS Example: This example is showing all borders in different colors. Output: This example is showing all borders in different colors.

21. Techieweb solutions CSS BORDERS Border Style Property in CSS: The border-style property allows you to select one of the following styles of border: none: No border. (Equivalent of border-width:0;) solid: Border is a single solid line. dotted: Border is a series of dots. dashed: Border is a series of short lines. double: Border is two solid lines. groove: Border looks as though it is carved into the page. ridge: Border looks the opposite of groove. inset: Border makes the box look like it is embedded in the page. outset: Border makes the box look like it is coming out of the canvas. hidden: Same as none, except in terms of border-conflict resolution for table elements.

22. Techieweb solutions CSS BORDERS Border Style Property in CSS: Example: This is a dahsed border. This is a double border. Output: This is a dahsed border. This is a double border.

23. Techieweb solutions CSS BORDERS Border Width Property in CSS: The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick. border-bottom-width changes the width of bottom border. border-top-width changes the width of top border. border-left-width changes the width of left border. border-right-width changes the width of right border. Example: <p style="border-bottom-width:4px; border-top-width:10px; border-left-width: 2px; border-right-width:15px; border-style:solid;"> This is a a border with all four different width.

24. Techieweb solutions CSS BORDERS Border Width Property in CSS: Output: This is a a border with all four different width.

25. Techieweb solutions P OINTS TO REMEMBER Cursor in CSS: The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. CSS CURSOR Values Description auto Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on... crosshair A cross hair or plus sign defaultDisplay the normal mouse cursor icon pointerA hand icon that you see when you hover over an HTML link moveThe I bar waitThe mouse icon to represent the computer "thinking" textAn "I" shaped icon that is displayed when selecting text helpA question mark (usually)

26. Techieweb solutions CSS CURSOR Example: p { cursor: wait } h4 { cursor: help } h5 { cursor: crosshair }

27. Techieweb solutions CSS FLOATING Introduction: With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Example: This is an example for floating. This is an example for floating.

28. Techieweb solutions CSS FLOATING This is an example for floating. This is an example for floating. This is an example for floating. Output: Following example is for “float:right” This is an example for floating.This is an Example for floating. This is an example for floating. This is an example for floating. This is an example for floating. This is an example for floating.This is an example for floating.

29. Techieweb solutions CSS FLOATING Turning off Float - Using Clear: Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. Add a text line into the image gallery, using the clear property:.clear_image{ clear:both}

30. Techieweb solutions CSS FONTS o Fonts in CSS: CSS font properties define the font family, boldness, size, and the style of a text. You can set following font properties of an element: The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears. The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties.

31. Techieweb solutions CSS FONTS o Font Family in CSS: 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") The font family of a text is set with the font-family property. If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Example: This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. Output: This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

32. Techieweb solutions CSS FONTS o Font Style in CSS: The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported) Example: This text will be rendered in italic style Output: This text will be rendered in italic style

33. Techieweb solutions CSS FONTS o Font Variant in CSS: o Possible values are normal and small-caps. o Following is the example which demonstrates how to set the font variant of an element. Example: This text will be rendered as small caps Output: T HIS TEXT WILL BE RENDERED AS SMALL CAPS

34. Techieweb solutions CSS FONTS o Font Weight in CSS: o The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Example: This font is bold. This font is bolder. This font is 900 weight. Output: This font is bold. This font is bolder. This font is 900 weight.

35. Techieweb solutions CSS FONTS o Font Size in CSS: o The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in % Example: This font size is 20 pixels This font size is small This font size is large Output: This font size is 20 pixels This font size is small This font size is large

36. Techieweb solutions CSS FONTS o Shorthand Property of Font: o You can use the font property to set all the font properties at once. Example: Applying all the properties on the text. Output: A PPLYING ALL THE PROPERTIES ON THE TEXT.

37. Techieweb solutions CSS IMAGES Images in CSS: Images are very important part of any Web Page. Though it is not recommended to include lot of images but it is still important to use good images wherever it is required. CSS plays a good role to control image display. You can set following image properties using CSS. The border property is used to set the width of an image border. The height property is used to set the height of an image. The width property is used to set the width of an image. The -moz-opacity property is used to set the opacity of an image.

38. Techieweb solutions CSS IMAGES Image Border Property: The border property of an image is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border. Example:

39. Techieweb solutions CSS IMAGES Image Height Property: The height property of an image is used to set the height of an image. This property can have a value in length or in %. Example: Output:

40. Techieweb solutions CSS IMAGES Image Width Property: The width property of an image is used to set the width of an image. This property can have a value in length or in %. Example: Output:

41. Techieweb solutions CSS LINKS Links in CSS: Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are: The :link Signifies unvisited hyperlinks. The :visited Signifies visited hyperlinks. The :hover Signifies an element that currently has the user's mouse pointer hovering over it. The :active Signifies an element on which the user is currently clicking. Note: Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS

42. Techieweb solutions CSS LINKS Color of Links: Color value could be any color name in any valid format. Example: a:link {color:#FF0000 } Red Link Output: Red Link

43. Techieweb solutions CSS LINKS Color of Visited Links: Possible value could be any color name in any valid format. Example: a:visited {color:#00FF00 } Click the Link Output: Click the Link

44. Techieweb solutions CSS LINKS Color of Links when Mouse Over: To change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format. Example: a:hover {color:#00FF00 } Click the Link Output: Click the Link Note: You can not see the changes here but it will work on browser.

45. Techieweb solutions CSS LIST Lists in CSS: We have already learn Lists in HTML in CSS we are using an image for listing. The list-style-image Property: The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is as follows, similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find given image then default bullets are used. Example: Maths Social Science Physics

46. Techieweb solutions CSS LIST Maths Social Science Physics Output: Maths Social Science Physic Maths 2. Social Science 3. Physic

47. Techieweb solutions CSS MARGINS Margins in CSS : The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.. It is possible to use negative values to overlap content. There are following four properties to set an element margin. The margin A shorthand property for setting the margin properties in one declaration. The margin-bottom Specifies the bottom margin of an element. The margin-top Specifies the top margin of an element. The margin-left Specifies the left margin of an element. The margin-right Specifies the right margin of an element.

48. Techieweb solutions CSS MARGINS The Margin Property in CSS : The margin property allows you set all of the properties for the four margins in one declaration. Example: all four margins will be 15px OR all four margins will be 15px

49. Techieweb solutions CSS MARGINS The margin-top property in CSS : The margin-top property allows you set top margin of an element. It can have a value in length, % or auto. Example: This is a paragraph with a specified top margin The margin-left property in CSS : The margin-left property allows you set left margin of an element. It can have a value in length, % or auto. Example: This is a paragraph with a specified left margin

50. Techieweb solutions CSS MARGINS The margin-right property in CSS : The margin-top property allows you set right margin of an element. It can have a value in length, % or auto. Example: This is a paragraph with a specified right margin The margin-bottom property in CSS : The margin-top property allows you set bottom margin of an element. It can have a value in length, % or auto. Example: This is a paragraph with a specified bottom margin

51. Techieweb solutions CSS PADDING Padding in CSS: The padding property allows you to specify how much space should appear between the content of an element and its border. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding's at once. The padding-bottom Specifies the bottom padding of an element. The padding-top Specifies the top padding of an element. The padding-left Specifies the left padding of an element. The padding-right Specifies the right padding of an element. The padding Serves as shorthand for the preceding properties.

52. Techieweb solutions CSS PADDING The padding-bottom property in CSS: The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %. Example: This is a paragraph with a specified bottom padding Output: The is a paragraph with a specified bottom padding

53. Techieweb solutions CSS PADDING The padding-top property in CSS: The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %. Example: This is a paragraph with a specified top padding Output: The is a paragraph with a specified top padding

54. Techieweb solutions CSS PADDING The padding-left property in CSS: The padding-left property sets the top padding (space) of an element. This can take a value in terms of length of %. Example: This is a paragraph with a specified top padding Output: The is a paragraph with a specified left padding

55. Techieweb solutions CSS PADDING The padding-right property in CSS: The padding-right property sets the top padding (space) of an element. This can take a value in terms of length of %. Example: This is a paragraph with a specified top padding Output: The is a paragraph with a specified right padding

56. Techieweb solutions CSS PADDING The padding property in CSS: The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %. Example: This is a paragraph with a specified top padding Output: The is a paragraph with a specified right padding

57. Techieweb solutions CSS POSITIONING The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods. Static Positioning Fixed Positioning Relative Positioning Absolute Positioning

58. Techieweb solutions CSS POSITIONING Static Positioning: HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. Fixed Positioning Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling. Specified coordinates will be relative to the browser window. You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document.

59. Techieweb solutions CSS POSITIONING Relative Positioning: Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position. You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document. Absolute Positioning: An element with position: absolute is positioned at the specified coordinates relative to your screen top left corner. You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document.

60. Techieweb solutions CSS POSITIONING Here's a quick reference when moving HTML elements in CSS. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.

61. Techieweb solutions CSS TEXT CSS TEXT: CSS Text allows you to control the spacing, decoration, and alignment of your text. Text Color: The color property is used to set the color of the text. With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red" Example: h2{color:green;}

62. Techieweb solutions CSS TEXT This is a heading with green color. Output: This is a heading with green color. Text Alignment: The text-align property is used to set the horizontal alignment of a text. Text can be centred, or aligned to the left or right, or justified Example: h1 {text-align: center; color:blue;}

63. Techieweb solutions CSS TEXT p { text-align: right; } CSS TEXT Author:Randher Jha Output: CSS TEXT Author:Randher Jha

64. Techieweb solutions CSS TEXT Text Transformation: The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. Example: p.uppercase {text-transform: uppercase;} p.lowercase {text-transform: lowercase;} p.capitalize { text-transform: capitalize;} Welcome to CSS Tutorial Welcome to CSS tutorial

65. Techieweb solutions CSS TEXT Output: WELCOME TO CSS TUTORIAL welcome to css tutorial Welcome To CSS Tutorial

66. Techieweb solutions CSS TEXT Text Decoration: The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes. Example: h1 { text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} a{text-decoration: none;} Hello CSS

67. Techieweb solutions CSS TEXT www.techieweb.in Output: Hello CSS www.techieweb.in

68. Techieweb solutions CSS TEXT o Spacing Between Laters: o With the help of CSS you can also make space between one or more laters. o For making space b/w latters you have to specify “leter-spacing” property. o Example h3 { letter-spacing:3} CSS TEXT Output: C S S T E X T

69. Techieweb solutions CSS TABLES Tables in CSS: The look of an HTML table can be greatly improved with CSS. You can set following properties of a table: Table Borders Collapse Borders Table Width and Height Table Text Alignment Table Padding Table Color

70. Techieweb solutions CSS TABLES Table Border: o We can create a table with border using CSS. o Example: table, th, td { border: 1px solid black;} Firstname Lastname Peter Griffin

71. Techieweb solutions CSS TABLES Table Border: Lois Griffin Output: Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders. First NameLast Name PeterGriffin Lois Griffin

72. Techieweb solutions CSS TABLES Collapse Borders: o The border-collapse property sets whether the table borders are collapsed into a single border or separated. o Example: table { border-collapse: collapse;} table, td, th {border: 1px solid black;} Firstname Lastname Peter Griffin

73. Techieweb solutions CSS TABLES Lois Griffin Output: First NameLast Name PeterGriffin Lois Griffin

74. Techieweb solutions CSS TABLES Height & Width Property in Table: o Width and height of a table is defined by the width and height properties. o Example: table, td, th {border: 1px solid black;} table {width: 100%;} th {height: 50px;} Firstname Lastname Savings

75. Techieweb solutions CSS TABLES Peter Griffin $100 Lois Griffin $150

76. Techieweb solutions CSS TABLES Output: FirstnameLastNameSavings PeterGriffin$200 LoisGriffin$150

77. Techieweb solutions CSS TABLES Table Padding: o To control the space between the border and content in a table, use the padding property on td and th elements. o Example: table, td, th {border: 1px solid black;} td {padding: 15px;} Firstname Lastname Savings Peter Griffin

78. Techieweb solutions CSS TABLES $100 Lois Griffin $150 Output: FirstnameLastNameSavings PeterGriffin$200 LoisGriffin$150

79. Techieweb solutions CSS TABLES Table Color Property: You can specifies the color of the borders, and the text and background color of th elements. Example: table, td, th {border: 1px solid green;} th {background-color: green; color: white;} Firstname Lastname Savings

80. Techieweb solutions CSS TABLES Peter Griffin $100 Lois Griffin $150

81. Techieweb solutions CSS TABLES Output: FirstnameLastNameSavings PeterGriffin$200 LoisGriffin$150