[go: up one dir, main page]
Scribd
Upload
13 views27 pages

Cascading Stylesheet (CSS)

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views27 pages

Cascading Stylesheet (CSS)

Uploaded by

Koskei Vic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Cascading StyleSheet(CSS)

• A cascading style sheet(CSS) is a


web page derived from multiple
sources with a defined order of
precedence where the definition of
any style element conflict.
• Allow you to control the layout of your
HTML document.
• It is a simple way to add style such
as font colors or spacing in your web
page.
What is CSS

• HTML is used to define the page’s


content while CSS is used to
define how the content and web
page will look.
Syntax Of CSS
A CSS rule set consist of a selector and a declaration
block.
Selector Declaration Declaration

h1 {color: red; font-size:15px;}

Property Value Property Value


• The Selector indicates the element to which the rule is applied.
• The Declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a property name and a value, separated by a
colon.
Understanding Style Rules
 The Property specifies a characteristic,
such as color, font-family, position, and is
followed by a colon (:).
 The Value expresses specification of a
property, such as red for color, arial for font
family, 12 pt for font-size, and is followed by
a semicolon (;).

Property Value

P {color: red;}
Capabilities of CSS

1. CSS makes updating web pages easy and


quickly. You can also specify a style once and
then apply it repeatedly in your document.
2. CSS gives you control when placing objects
on the page exactly where you want them.
3. CSS allows you to position objects in three
dimensions (layers).
4. CSS allows you to create custom tags to
achieve specialized objectives.
Advantages of Using CSS

1. Save typing and development time.


2. Download faster because your
browser will download only one file
once.
3. You can add multiple link tags in one
document.
Types Of CSS
There are 3 types of CSS styles declaration are as follows:
1.Internal(Embedded) Styles
2.Inline Styles
3.External Styles Internal (Embedded)Styles
Internal styles are placed inside the head section of a particular web
page via the style tag. Internal styles are also called “Embedded” styles .
Inline Styles
Inline styles are placed directly inside an HTML element in the code.
External Styles
An external style sheet is a separate page which is then linked to the
web page.
Inline Style Sheets
 These are used for isolated
changes to a headline, paragraph,
picture or other element.
 Inline style sheets override
external and embedded style
sheets.
Ex. <p style=“background-color:
gray;”>
Example:
Output
Embedded Style Sheets
(Internal Style Sheets)
- These are used for creating a document-wide
style rule.
- They are placed within an HTML document,
between the <head> and </head>.
Ex. <style type=“text/css”>
- They are also used when you have a page
that your want to present in a different style from
other pages.
- Embedded style sheets override external
style sheets.
Example:
Output
Example # 2
Output
External Style Sheets
These are the most global of the three kinds
of CSS because you can apply the same one
to an unlimited number of pages.
They allow you to develop a consistent style
across pages. They easily allow you to
change the layout of your entire web site by
simply changing the external style sheet and
every page is instantly updated.
External CSS file has a .css file extension.

Ex. <link rel=“css” href=“style.css”


type=“text/css”>
Attributes
 rel
◦ Relation- it defines the type of style sheet
◦ Relationship between linked files and html doc
 Type
◦ The type of target link
 Href
◦ Target file of link

lecture 5 17
Example:
Output
CSS Selectors
CSS selectors allow you to select and manipulate HTML
elements.
CSS selectors are used to “find”(or
select) HTML elements based on
their id,class,type,attribute,and more.

The CSS selectors are follows:


1.Element Selector
2.ID Selector
3.Class Selector
4.Grouping Selector
• The Element Selector
The element selector selects elements based on the
element name.
Example P{
text-align: center; Color: red;
}
When we use above example, we get all<p> elements
will be center-aligned with a red text color.
• The id Selector
The id selector uses the id attribute of an HTML element to
select a specific element.
An id should be unique within a page, so the id selector is
used if you want to select a single,unique element.
To select an element with a specific id, write a
hash(#)character, followed by the id of the element.
The style rule below will be applied to the HTML element
with
id=“paragraph”
Example
#paragraph{
text-align: center; color: red;
}
• Class Selector
The class selector selects elements with a specific class
attribute.
To select elements with a specific class ,write a
period(.)character , followed by the name of the class
In the example below, all HTML elements with
class=”center” will be center-aligned
Example
.center{
text-aligned: center; Color: red;
}
• Grouping Selectors
You can group the selectors , to minimize the code.
To group selectors , separate each selector with
comma.
Example
h1,h2,h3,p{
text-align: center; Color: red;
}
In the above example we have grouped some
selectors.
Example Program Of CSS
<html>
<head>
<style> #tb <td>Address</td>
{
<td>Phone Number</td>
Border-radius:25px; Width:200px;
</tr>
Padding:20px;
}
<tr>
</style> <td>Athira</td>
</head> <td>Keeripoyil(h)<br/>Mukkam</td>
<body> <td>9946757413</td>
<table border=1 id=“tb” cellpadding=“10px”> </tr>
<tr> <tr><td>Aswathi</td.
<th colspan=“3”><u>Student <td>Periyapurath(h)<br/.Kozhikode</td>
Details</u></th>
<td>9656368644</td></tr>
</tr>
<tr>
</body>
<td>Name</td> </html>
OUTPUT
Thankyou…

You might also like