Scribd
Upload
1K views

Css 10

CSS (Cascading Style Sheets) allows customization of HTML elements through properties that define style and layout. CSS can be applied via internal, external, or inline styles. Key CSS properties covered include background, font, text, border, and margin properties. CSS comments and the cascading order property are also discussed. Examples are provided for common CSS declarations.

Uploaded by

MS Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Css 10

CSS (Cascading Style Sheets) allows customization of HTML elements through properties that define style and layout. CSS can be applied via internal, external, or inline styles. Key CSS properties covered include background, font, text, border, and margin properties. CSS comments and the cascading order property are also discussed. Examples are provided for common CSS declarations.

Uploaded by

MS Thakur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Cascading style sheets (CSS) – Class 10th

NOTES (BY GAURAV SIR)


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 SYNTAX
means how to define a css command.

Html elements – tags written with data in them ex.


<body> india 123 xyz </body>
<p> india 456 </p> ……….etc

Css background properties

1. Background-color property = It specifies the background color of html element . ex <p>…</p> ,


<ol>….</ol>, <table>….</table> etc.
Ex. <style>
p { background-color:blue;}
</style>

2. Background-image property = it spedifies the background image of html element. ex <p>…</p> ,


<ol>….</ol>, <table>….</table> etc.
Ex. <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: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.


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 –
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>

Css 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; margin-
right: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>
#first { background-color: yellow; }
</style> </head>
<body>
<h1>Welcome to My Homepage</h1>
<p id=first>My name is Donald.</p>
</body>
</html>

Ways to insert style sheets


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>
Css 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;}
</style>
</head><body>
<table> <tr> <th>Firstname</th> <th>Lastname</th> </tr>
<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>

You might also like