Scribd
Upload
15 views

Adding CSS

The document discusses different ways to specify style information in a document using CSS including external, embedded, imported and inline style sheets. It also covers different types of CSS selectors such as element, class, ID and descendant selectors that determine which style rules are applied.

Uploaded by

praveshcode1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Adding CSS

The document discusses different ways to specify style information in a document using CSS including external, embedded, imported and inline style sheets. It also covers different types of CSS selectors such as element, class, ID and descendant selectors that determine which style rules are applied.

Uploaded by

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

CSS

Style sheet is document that contain style information about one or more documents written in
markup languages. A style sheet is composed of a set of style rules written in specified format
Cascading Style Sheet(CSS) is style sheet language that specifies how to incorporate style
information in a style sheet. The term cascading indicates that several style sheets can be blended
to preset a document on the browser’s screen.

Adding CSS:

There are four ways to specify style information in a document


a) External Style Sheet
b) Embedded Style Sheet
c) Imported Style Sheet
d) Inline Style Sheet

a) External Style Sheet

In this case style information is written in a separate file and referenced from an HTML
document.
An external style sheet is useful when the same style is applied on different documents. The
external style sheet is specified using the HTML <link> tag

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

Code of html file


<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”/>
</head>
<body>
<h1>WELCOME</h1>
</body>
</html>

Code of CSS file mystyle.css

h1
{
color: red;
}
b) Embedded Style Sheet

In this method style information is placed under the style tag in the head section of an HTML
page.
<html>
<head>
<style>
h1
{
color: red;
}
</style>
</head>
<body>
<h1>WELCOME</h1>
</body>
</html>

c) Imported Style Sheet

Another way of importing stylesheet is to use @import statement. It allows importing style
sheet from another style sheet.

<html>
<head>
<style>
@import url (“style1.css”);
</style>
</head>
<body>
<h1>WELCOME</h1>
</body>
</html>

d) Inline Style Sheet

In this case style information is incorporated directly into the HTML tags.
<p style=“color: red”> Hello World</p>
SELECTORS IN CSS

Selector determine on which rules are to be applied. The elements selected by the selector are
called subjects of selectors. Type of selector

Simple Selector:

Element is selected by it’s name.

P
{
background-color:red;
}

Grouping:

Selectors having common declaration are grouped into a comma separated list

p,h1,td
{
color:blue
}

Universal selectors:

Css has special type of selector * which matches with every single element in the document

*
{
color:red
}

Descendant Selectors:

Descendant selectors, allow us to determine the elements depending upon their hierarchical
relationship.

For example

Pb
{
color:red;
}
<div><b>C</b>ascading <b> S</b>style <b>S</b>heet</div>
<p>Descendant <b>selectors</b></p>
<p>This<b>is</b>a<i><b>paragraph</b></i></p>

Child Selector:

Child selector selects elements that are immediate children of a specified element. The
combinator used for child selector is “>”

For example:
P>b
{
color:red;
}
<p>This <b>is</b>a<i><b>paragraph</b></i></p>

Child selector can be combined with other selectors eg.

Body>* Select all children of the <body> element


Body>*>* Select all grandchildren of the body element
Body>*>p Select all grandchildren of <body> element

Class selector:

These selector provide a flexible way to apply style elements. Class selectors deal with the
elements having that attribute class.
To select elements with a specific class, write a period (.) character, followed by the name of the
class.
.class1
{
background-color:red;
}

ID Selector:

The attribute id of an element is a unique identifier in a web page. This means that no two id
attribute can have the same value within the document. The id differs from class in that id
identifies a single element uniquely whereas class identifies a set of

An id selector is defined by placing a # symbol before selector name


#para1
{
background-color:red;
}
<p id=“para1”>
This is the paragraph </p>

Example on CSS
<html>
<head>
<style>
p{
background-color:yellow;
color:red;
}
h1
{
background-color:black;
color:gray;
}
</style>
</head>
<body>
<h1>Welcome </h1>
<p>this is first paragraph</p>
</body>
</html>

Example on CSS

<html>
<head>
<style>
div{
border-color:black;
border-radus:5px;
border-style:groove;
width:400px;
background-color:rgba(00,00,00,0.5);
}
Table
{
margin-left:100px;
margin-top:100px;
outline-color:#ff1122;
margin-bottom:100px;
}
.c1
{
background-color:red;
color:blue;
border-radius:10px;
border-color:black;
}
.c2
{
border-style:outset;
color:blue;
border-radius:10px;
}
.c2:hover
{
border-width:2px;
border-color:black;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>name</td>
<td><input type="text" length="10" class="c2"/></td>
</tr>
<tr>
<td>pass</td>
<td><input type="text" length="10" class="c2"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="reset" class="c1"/>
<input type="button" value="submit" class="c1"/></td>
</tr>
</table>
</div>
</body>
</html>

You might also like