Css

UNIT I
Topic:4
CSS is a style sheet language used for
describing the look of the web page.
CSS was developed by the World Wide Web

Consortium(W3C).
• CSS defines how the HTML elements are to be

displayed.
• Styles are normally saved in external .css files.
16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

Inline style - adding style attribute to HTML elements
Internal style - using the <style> element in
the <head> section
External style - creating an external CSS file

1 INLINE CSS
<!DOCTYPE html>
2 INTERNAL CSS
<!DOCTYPE html>
3 EXTERNAL CSS
<html> <html> <head>

<head> <head> <link rel="stylesheet"
<title>Title of the document</title> <title>Title of the document type="text/css" href="style.css">
</title> </head>
</head>
<body> <style>
<h2 style="color:orange">Some body {background-color:orange;}
heading</h2> p {color:grey;} </style>
<p style="color:pink; font- </head>
size:15px">Some paragraph</p <body>
</body> <p> Some information</p>
</html> </body>
</html>
CSS Syntax: Selector, Properties and
Values. Comments in CSS.
• selector { property: value }

• The selector is the HTML element that you want to
style. This could be any tag like <h1>, <p>, etc. Each
selector can have one and more properties.
• The property is the style attribute of HTML tag. All
the HTML attributes are converted into CSS
properties (color, border, etc.). Each property has its
value.
• The value: is assigned to property. For example,
color property can have value either red or #F1F1F1
etc.

CSS ID Selector
• ID selector is a unique identifier of the HTML element to
CSS Class Selector
• Class selector is used when the same style should be applied
which a specific style should be applied. It is used if only a
to multiple HTML elements on the same web page.
single HTML element on the web page should have a
specific style.
Example: Example:
<html> <head> <html> <head>
<style> #orange {color:orange;} </style> </head> <style> .orange {color:orange;} </style>
<body> <p>The first paragraph.</p> </head>
<p id="orange">The second paragraph.</p> <body> <h2 class="orange">Use of H2 tag.</h2>
<p>The third paragraph.</p> <p>The first paragraph.</p>
</body> <p class="orange">The second paragraph.</p>
</body>
</html>
</html>
6

Example:
<p style="color:#ff0000/red/rgb(255, 99, 71, 0.5)">
<p style="text-align:center/right/justify/left"></p>
• Text color
<a style="text-decoration:none/overline/line-through/underline">
• Text alignment
• Text decoration </a>
• Text transform <P STYLE="TEXT-
• Text Shadow TRANSFORM:UPPERCASE/lowercase/Capitalize"></P>
text-shadow: h-shadow v-shadow
blur color </body>
</html> 7

Example:
p {font-family: Arial, sans-serif;}

• Font Family
• Font Style <p style="font-style:normal/italic">
• Font Size <h3 style="font-size:40px;">
• Font Weight
<p style="line-height:10px">
• Line Height
<p style="font-weight:900/normal/bold">
</body>
8
</html>
The link has these four states:
• a:link - A normal, unvisited link
• a:visited - A link that the user has already visited
• a:hover - A link when the user mouses over it
• a:active - A link the moment it is clicked
The properties like text-decoration,color,background-color in order to differentiate and add better look

<html> <head> <title>Title of the document</title>
<style>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style> </head> <body> <a> This is some link.</a> </body> </html>
16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN

AP/CSE 10
Sample:1 <style>
body
{
background-color:orange }
</style>
Sample:2 <style> • background-color

body { background-
• background-image
image:url("/uploads/media/default/0001/01/a1d4ca
a225542c577689287a36f4209808b08c19.jpeg"); • background-repeat
background-repeat:repeat-x/y/no repeat; • background-position
background-position:right top;
}
</style>
Sample:3<style>
body { background:url("background.jpg") no-
repeat right top/no-repeat x% y%;;}
</style> 11

BIG IMAGE
12

Example:1
<p style="border:3px dotted orange"> Example
with orange dotted border.</p>
<p style="border:3px dashed green"> Example

Padding Properties: padding:top,bottom,left,right;
with green dashed border.</p>
• padding
<p style="border:3px solid pink"> Example • padding-top
• padding-bottom
with pink solid border.</p>
• padding-left
Example:2 • padding-right
p {background-
color:orange;color:white;padding:20px 40px 20px

13
40px;}
Example:
• p{ margin-top:15px; margin-right:10px; margin-bottom:15px;

CSS Margin Properties:
• Margin margin-left: 10px; }
• Margin-top • <style> p{background-color:orange;color:white;margin:25px 10px

• Margin-bottom 15px 20px;} </style>
• Margin-left
• Margin-right
14

<style>
table{width:100%;border-collapse:collapse;}
table, th, td{border: 1px solid black;}
thead{ background-color:#ff9311;color:#ffffff}
th{text-align:center;height:50px}
tbody tr:nth-child(odd){background:#ffffff;}
tbody tr:nth-child(even){background:#f4f4f4;}
</style>
<table> <thead> <tr> <th>Heading</th>

<th>Heading</th> <th>Heading</th>
<th>Heading</th> </tr> </thead> <tbody> <tr>
<td>Some text</td> <td>Some text</td> <td>Some
text</td> <td>Some text</td> </tr>
15

Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIT I

CSS was developed by the World Wide Web

• CSS defines how the HTML elements are to be

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

<html> <html> <head>

• selector { property: value }

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

<p style="color:#ff0000/red/rgb(255, 99, 71, 0.5)">

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

p {font-family: Arial, sans-serif;}

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

</style> </head> <body> <a> This is some link.</a> </body> </html>

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN

Sample:2 <style> • background-color

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

<p style="border:3px dotted orange"> Example

with orange dotted border.</p>

<p style="border:3px dashed green"> Example

color:orange;color:white;padding:20px 40px 20px

• p{ margin-top:15px; margin-right:10px; margin-bottom:15px;

• Margin-top • <style> p{background-color:orange;color:white;margin:25px 10px

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

<table> <thead> <tr> <th>Heading</th>

16CS302 INTERNET PROGRAMMING-CSS,H.SUMMIA PARVEEN AP/CSE

Anda mungkin juga menyukai