3.2 CSS Syntax A CSS style mule is made of three parts 1. Selector: A selector is an HTML tag at whieh a style will be applied. This could be any tag like

,

or

ete 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, bgcolor etc. 3, Value: Values are assigned to properties. For example, colar property can have the value either red or #FIFIFI ctc The format or syntax of CSS is: Selector {property: Example: ou can define a heading as follows: {color: red; font-size :15px} Selector Property | | Value | Property || Value Here h1 is a selector, color and font-size are properties and the given value red, and JSpx are the value of that property. The selector is normally the HTML element you want to style. Each declaration consists of a property and a value The property is the style attribute you want to change. Each property has a value. 3.2.1 Rules/ Principle of CSS 1. Every statement must have a selector and a declaration, The declaration comes immediately after the selector and is contained in a pair of curly braces, 2. The declaration is one or more properties separated by semicolons, Each property has a property name followed by a colon and then the value for that property. There are many different types of values, but any given property can only take certain values as set down in the specification. 4. Sometimes a property can take a number of values, as in the font-family. ‘The values in the list should be separated by a comma and a space Sometimes a value will have a unit as well as the actual value, as in the 1 3em. You must not put a space between the value and its unit 6. Aswith HTML, white space can be used to make your style sheet easier to read and write wee Page 2

This is a paragraph.

3.5 Background image handling "The background-image property specifies an image to use as the background of an clement, By default, the image is repeated so it covers the entire clement, The background image for a page can be set like this:body {background- image:url('paper.gif’);} Example Background Image ‘The output of the above example is @* ) CAUsers\SANDesktop\x SD = G | GB This is my internal css... x conver + gH Select © > we © Safety~ Took @You can set the following background properties of an element: > The background-image property is used to set the background image of an element. > The background-repeat property is used to control the repetition of an image in the background. » The background-position property is used to control the position of an image in the background. > The background-attachment property is used to control the scrolling of an image in the background, > The background property is used as shorthand to specify a number of other background properties, 3.5.1 Repeat the Background Image The following example demonstrates how to repeat the background image if an image is small. You ean use no-repeat value for the background-repeat property if you don't want to repeat an image, In this case, the image will display only once, By default, the background-repeat property will have a repeat value. |

This iable has background image which repeats multiple times.

The following example which demonstrates how to repeat the background image vertically.

This table has background image set which will repeat vertically,

The following example demonstrates how to repeat the background image horizont str>

This table has background image set which will repeat horizontally.

3.5.2 Set the Background Image Position ‘The following example demonstrates how to set the background image position 100 pixels away from the left side. table style="background-image:url(/images/pattern gif; background-position: 100px;"> Background image positioned 100 pixels away from the left. sitd> Cheek your progress 3 QI. How many ways to build style sheet ? what are they ? Answer: Q2. Write the background properties of CSS. Answers, 3.6 Background colour Management using CSS The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: Example body {background-color: #b0eddes}

cTitde>This és my Internal css page

Collapse Border Example=/eaption> "> Cell A Collapse Example > Cell B Collapse Example=/td> =/table>

Separate Border Example ‘The output of the above program is + B-o sx Dy This is my inne ess page x C fi LD filev//C:/Users/SAl/Desktop/x.html viz aiuiapne Boras rere £ Cell A Collapse Example } ‘Cell B Collapse Example Separate Border Example Cell A Separate Example 1 B Separate Example 3.11.2 The border-spacing Property The border-spacing property specifies the distance that separates the adjacent cells” borders. It can take either one or two values, these should be units of length, If you provide one value, it applies to both vertical and horizontal borders. Or you can specify two value: which ease, the first refers to the horizontal spacing and the second to the vertical spacing: NOTE: Unfortunately, this property does nat work in Netscape 7 or IE 6. Now let's modify the previous example and see the effect: —_————— Odisha State Open University Page 23program is 1 Tris ismy mine ce page % © fi © filev//C:Alsers/SAl/Desktop/x.himl Cell A Collapse Example ‘Cell B Collapse Example Cell. A Separate Exaraple Cell B Separate Example 11.2 The ne Pi ‘The border-spacing property specifies the distance that separates the adjacent cells" borders. It can take either one ar two value hese should be units of length. If you provide ene value, it applies 0 both vertical and horizontal borders, Or you can specify two values, in which case, first refers to the horizwatal spacing and the second to the vertival spacing NOTE: Untorunately, this property does not work in Netscape 7 or TE 6 Now let's modify the previous example and sce the effect: Odisha State Open University Page 23

This example is showing all borders in different colors.

This example is showing all borders in green color only.

The output of the above program is : a (2) CAUsersiSanDesktop’ O = G || This ismyinline csp... ™ x ERconvet + PPselect B ~ 2 dh ~ Safetys Took> @~ [Pits Scample is showing all borders in different colors. ‘Example is showing all borders in green color oaly 13. r-style Proy ‘The border-style property allows you to select one of the following styles of border: none: No border. (Equivalent of barder-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. — Odisha State Open University Page 30 vv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, vw ‘You can individually change the style of the bottom, left, top, and right borders of an element using the following properties > berder-botiom-style changes the style of botiom border, ® border-top-style changes the style of top border > border-left-style changes the style of left border. > border-right-style changes the style of right border, The following example shows all these border styles: a x- Notepad - ome Ble Edit

This is a border with none width,

This is a solid border.

This is a groove border.

This is aridge border.

x — ">This is a outset border.

‘This is a hidden border.

This is a a border with four different styles.

It-will produce the following result:[B) CAvsen\OMM\Desktoy = S || thin ie my inline cas page conven ~ Misetect This is a border with none width is ts a solid border [fmimanagesone SCOC—C—C—CSCSCSCSCSCSCSCCTCCC“‘(3$WCd E his is a inset border ] hia tn aw outnct border This is a hidden border. 3.14 Designing outline using CSS ‘Outlines are very similar to borders, but there are few major differences as well: > An outline does nat take up space. * Outlines do not have to be rectangular * Outline is always the same on all sides; you cannot specify different values for different sides of an clemer MOTE, The outline properties are not supported by IE 6 or Netseape 7. You can set the following outline properties using CSS. The outline-width property is used to set the width of the outline The outline-style property is used to set the line style for the outline. ‘The outline-colar praperty is used to set the calor af the outline ‘The outline property is used to set all the above three properties in a single statement, r The ow ‘The outline-widih property specifies the width of the outline w be added to the box, Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute. A width of zero pixels means no outline, Here is an example: _ Odisha State Open University Page 323,15 Setting Page Margin using CSS The margin property defines the space around an HTML element. It is possible 10 use negative values to overlap content. The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal, We have the following properties to set an element margin, Odisha State Open University Page 35 v ‘The margin specifies a shorthand property for setting the margin properties in one declaration. ‘The margin-bottom specifies the bottom margin of an clement, The margin-top specifics the top margin of an clement. The margin-left specifies the left margin of an clement The margin-right specifies the right margin of an element. vv 315.1 The Margin Property The margin property allows you to set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph bs > Odisha State Open University Page 36 ‘The above program will produce the following result: =o 2) CAUsers\OMMDeskt: 2 © | EH Thisis my inline css p.. x GBCowet + FBSelect fil four margins will be 15px top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. top margin will be 1px, left and right margin will be 2% of the total idth of the document, bottom margin will be -10px op margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the3.15.2 The margin-bottom Property The margin-bottom property allows you to set the bottom margin of an clement. It can have a value in length, %, or auto, Here is an example: a Test - Notepad = oO. File Edit Format Help

This is a paragraph with a specified bottom margin

This is another paragraph with a specified bottom margin in percent

« > The above program will produce the following result: Odisha State Open University Page 37 8) C\User\OMMWDesitoy O = CB This is my inline css pa... % X GBconvert + fPsetect {This is a paragraph with a specified bottom margin és s is another paragraph with a specified bottom masgin in percent315.3 The margin-left Property ‘The margin-left property allows you to set the left margin of an element, It can have a value in length, %, or auto, Here is an example: 2 Test - Notepad = Bile Edit Format View Help

This is a paragraph with a specified left margin

This is another paragraph with a specified top margin in percent

‘The above program will produce the following result @) CAUsers\OMM\Desktop\ updated css\Test.ntmt P-o! Di This my inline css page [6B This ie my intinecss page x [I x BConvet + iSelect [This ts a paragraph with a specified left margin [Titis is another paragraph with a specified top margin in percent4.1 Padding using CSS The padding property allows you to specify how much space should appear between the content of an element and its border: The value of this attribute should be either a length, a percentage, or the word inherits. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box. The following CSS properties can be used to control lists, You can also set different values for the padding on each side of the 2 the following properties > 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, vv ‘hi dis The padding-bottom property sets the bottom padding (space) of an element. This can lake a value in terms of length of %, Here is an example: 2 Test - Notepad - Oo File Edit Format View Help ‘ ‘

This is a paragraph with a specified bottom padding

| This is another paragraph with a specified bottom padding in percent