1 0
Read Time:10 Minute, 31 Second

Use of CSS – CSS defines how to display html elements. It allows developers to control the style and layout of multiple web pages all at once.

Static web page – static means constant, static web page contain same preloaded content each time page is loaded.

  • File extension of static web page is htm or html.

Dynamic web page – dynamic means changing , content of dynamic web page get updated without loading the page.

  • file extension of dynamic of web page is php , asp or jsp.

The css specifications are maintained by the world wide web consortium (W3C) –

CSS SYNTAXmeans how to give a css command.

CSS Selector – name of tag/element to which we want to modify using css.

Html elements – the tags written with data in them. ex.

<body> india 123 xyz </body>              

<p> india 456 </p> ……….etc

Example CSS Program

-we specify css properties in style tag in head tag  –

 – In this example we have set paper.gif image as background of the webpage –

– In css , we simply give properties to any tag (for example <p>,<body> etc) to control its layout or style –

<html><head>

<style>

body  {  background-image: url(“paper.gif”); }

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has paper.gif image as the background!</p>

</body> </html>

CSS BACKGROUND PROPERTIES

1. Background-color property

  • It specifies the background color of html element .                     
  • ex <p>…</p> , <ol>….</ol>, <table>….</table> etc.
<style>
p { background-color:blue;}
</style>

2. Background-image property

  • It specifies the background image of html element.        
  • Ex.  <p>…</p> , <ol>….</ol>, <table>….</table> etc.

<style>

body { background-image:url(“abc.jpg”);}

</style>   

3. Background-repeat property = this property repeats an image both horizontally and vertically.

Ex.

<style>

body { background-image:url(“abc.jpg”);  background-repeat:no-repeat;}

</style>

Note: we can give repeat-x to repeat an image horizontally or repeat-y to repeat an image vertically.

4. Background-position property = this property sets the position of background image on the page.

Ex.

<style>

body { background-image:url(“abc.jpg”); background-position:right top;}

</style>

CSS FONT PROPERTIES

1. Font-family = this property allow to apply font style on text.

See also  html class 10 cbse pdf notes class 10 computer download

Ex.

<style>

body { font-family:georgia); }

</style>

2. Font-style = this property allow to apply bold/italic/underline on text.

Ex.

<style>

body { font-style:italic; }

</style>

3. Font-size = this property allow to apply font size on text.

Ex.

<style>

body { font-size:25px; }

</style>

Note : default size for text is 16px.

4. Font-weight property = this property specifies weight of a font .ex normal, lighter, bold, bolder, 100, 200, 300….900.

Ex.

<style>

body { font-weight : bolder ; }

</style>

5. font color of text – to set color of text

ex.

<style>

p { color:red;}

</style>   

CSS TEXT PROPERTIES

1. Text-align = this property allow to align text left, right, centered or justified.

Ex.

<style>

p { text-align : center; }

</style>

2. Text-transform = this property specifies capitalize,uppercase and lowercase letters in a text.

Ex.

<style>

p { text-transform : uppercase; }

</style>

3. Text-indent = this property allow the indentation of first line of a paragraph.

Ex.

<style>

p { text-indent : 100px; }

</style>

4. Letter-spacing = this property specify the space between the characters in a text.

Ex.

<style>

body { letter-spacing : 4px; }

</style>

5. Line-height property = this property allows user to specify the space between lines.

Ex.

<style>

body { line-height : 0.3; }

</style>

CSS BORDER PROPERTIES

1. Border-style =this property specifies the border design of html element.

Ex.

 <style>

ol { border-style : ridge; }

</style>

Note : we can give values dotted, dashed, solid, double, groove, ridge, inset or outset.

2. Border-width property = this property specifies width of the borders.

Ex.

<style>

ol { border-style : ridge; border-width:5px; }

</style>   

3. Border-color property = this property specifies color of the borders.

Ex.

<style>

ol { border-style : ridge; border-width:5px; border-color:red;}

</style>

4. Border-radius property = this property is used to add rounded borders to an element.

Ex.

<style>

ol { border-style : ridge; border-width:5px; border-color:red; border-radius:6px;}

</style>

MARGINS

Css margins is used to leave space outside of borders of any html element.

Ex.

<style>

ol { border-style : ridge; border-width:5px; margin-top:100px; margin-bottom:100px; marginright:50px; margin-left:50px;}

</style>   

ID SELECTOR

We can define an id by giving it some css properties , and then we can give the same id to any html element. Ex.

<html> <head> <style>

#fab { background-color: yellow; }

</style> </head>

<body>

<h1>Welcome to My Homepage</h1>

<p id=fab>My name is Donald.</p>

</body>

</html>

Ways to insert style sheets

See also  CBSE Curriculum for the Academic Year 2022-23

There are three ways to insert a style sheet

1. External style sheet – An external stylesheet is a standalone .css file that is linked to a web page. we just have

to change the css file then all the design and formatting of html page is changed.

<html><head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head><body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

2. Internal style sheet – It allows us to create a style rule that is used multiple times within a single page.

▪ This style sheet is specified in <style> tag

Ex.

<html><head><style>

h1 { border-style: dotted; }

</style> </head>

<body>

<h1>A Heading with a dotted border</h1>

</body></html>

3. Inline style – An inline style is used to apply a unique style for a single element.

o To use inline styles, add the style attribute to the html element.

o The style attribute can contain any CSS property.

Ex.

<html> <body>

<h1 style = “color:blue; text-align:center;” > india 12345 </h1>

<p style = “color:red;” >jai hind </p>

</body> </html>

COMMENTS

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

Ex.

<html><head><style>

p { color: red; /* This is a single-line comment */ text-align: center; }

/* This is

a multi-line

comment */

</style></head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body></html>

CASCADING ORDER

o What style will be used when there is more than one style specified for an HTML element?

o highest priority will be given to –

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)

3. Browser default

QUESTIONS AND ANSWERS

Q.1 List some advantages and disadvantages of CSS.

Answer : Advantages of CSS are:

1. It controls layout of many documents from one single style sheet.

2. It has more precise control of layout.

Disadvantage of CSS are:

The problem with CSS is that it displays webpages very differently in the different browsers.

Q.2 Write a html program to create html table with css.

<html><head>

<style>

table, th, td { border-style:solid; border-width:3px; border-color:blue; }

</style>

</head><body>

<table> <tr> <th>Firstname</th> <th>Lastname</th> </tr>

See also  Main Subjects Class 9th and 10th CBSE Curriculum 2022-23

<tr> <td>Peter</td> <td>Griffin</td> </tr>

<tr> <td>Lois</td> <td>Griffin</td> </tr>

</table></body></html>

Q.3 create a html page with using css property with background color as a mixture of multiple colors(gradient property)

<html><head>

<style>

body { background-image: linear-gradient(red, yellow, green); }

</style></head>

<body>

<h1>Linear Gradients – Multiple Color Stops</h1>

<p><strong>Note:</strong> india 123</p>

<p><strong>Note:</strong> uttar pradesh</p>

</body> </html>

Q.4 write a html program to define all border properties (css) in one declaration.

Ans.

<html><head>

<style>

p { border: 5px ridge red; }

</style>

</head><body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>

</html>

Q.5 write a html program to define all font properties (css) in one declaration.

<html><head>

<style>

p { font : italic 15px arial; }

</style></head>

<body>

<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>

</html>

Q.6 observe this program and its output.

<html><head>

<style>

h1 {  background-color: green; }

div {  background-color: lightblue; }

p {  background-color: yellow; }

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div> This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

Output –

  • just like id selector we can also create “class selector”
  • observe this program and its ouput

<html><head>

<style>

p.one {  border-style: solid;  border-color: red; }

p.two {  border-style: solid;  border-color: green; }

p.three {  border-style: solid;  border-color: red green blue yellow ; }

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class=”one”>A solid red border</p>

<p class=”two”>A solid green border</p>

<p class=”three”>A solid multicolor border</p>

<p><b>Note:</b> The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.</p>

</body> </html>

Explanation – we have created three classes for <p> tag. So we can give any class to any <p> tag.

So the data in that tag will be displayed according to properties in that class.

Happy
Happy
%
Sad
Sad
%
Excited
Excited
%
Sleepy
Sleepy
100 %
Angry
Angry
%
Surprise
Surprise
%