Intro to CSS_APEC CascadingStyleSheets.pptx

Dr. N. SIVAKUMAR
B.Tech, M.Tech, MHRM, MBA, Ph.D
Assistant Professor, CSE
Pondicherry Engineering College
2

Cascading Style Sheet (CSS)
• CSS stands for Cascading Style Sheet.
• CSS is used to design HTML tags.
• CSS describes how HTML elements should be displayed.

Why CSS ?
• Create Stunning Web site
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to HTML

<html>
<head>
<title>Sample</title>
</head>
<body>
<h1> About Us </h1>
<p>
TechMyths Software Solutions is a
software development Company that
provides cutting edge engineering
solutions and offers IT- enabled
services.
</p>
<h1> Our Services </h1>
<p>
Quality in a Service (or) product is
not what you put into it - It is what
the client (or) customer gets out of it.
</p>
</body>
</html>
Code

Output
How to make the Heading color as Red ?

<html>
<head>
</head>
<body>
<h1 style="color:red"> About Us
</h1>
<p>
TechMyths Software Solutions is a
software development Company that
provides cutting edge engineering
solutions and offers IT- enabled
services. </p>
<h1 style="color:red"> Our
Services </h1>
<p>
the client (or) customer gets out of
it.
</p>
</body>
</html>
Code

<html>
<head>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1> About Us </h1>
<p>
TechMyths Software Solutions is a software development Company that
provides cutting edge engineering solutions and offers IT- enabled services.
</p>
<p>
the client (or) customer gets out of it.
</p>
</body>
</html>
Applying Style Sheets

A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
• Property − A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could
be color, border etc.
• Value − Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.

CSS Selector
• CSS selectors are used to select the content you want to style.
• Selectors are the part of CSS rule set.
• CSS selectors select HTML elements according to its id, class, type, attribute
etc.

Types of Selectors in CSS
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

CSS Element Selector
• The element selector selects the HTML element by name.

<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<p>This is Techmyths Solutions</p>
<p>We provide Training</p>
<h1> Contact </h1>
<p>Pondicherry</p>
</body>
</html>
Code

CSS Id Selector
• The id selector selects the id attribute of an HTML element to select a
specific element.
• An id is always unique within the page so it is chosen to select a single,
unique element.
• It is written with the hash character (#), followed by the id of the element.

<html>
<head>
<style>
#exam {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<p id="exam">This is Techmyths Solutions</p>
<h1> Contact </h1>
<p id="exam">Pondicherry</p>
</body>
</html>
Code

CSS Class Selector
• The class selector selects HTML elements with a specific class attribute.
• It is used with a period character . (full stop symbol) followed by the class
name.

<html>
<head>
<style>
.exam {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<p class="exam">This is Techmyths Solutions</p>
<h1 class="exam"> Our Services </h1>
<p class="exam">We provide Training</p>
<h1> Contact </h1>
<p>Pondicherry</p>
</body>
</html>
Code

CSS Class Selector for specific element
• If you want to specify that only one specific HTML element should be
affected then you should use the element name with class selector.

<html>
<head>
<style>
p.exam {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<h1> Contact </h1>
<p>Pondicherry</p>
</body>
</html>
Code

CSS Universal Selector
• The universal selector is used as a wildcard character.
• It selects all the elements on the pages.

<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<h1> Contact </h1>
<p>Pondicherry</p>
</body>
</html>
Code

CSS Group Selector
• The grouping selector is used to select all the elements with the same style
definitions.
• Grouping selector is used to minimize the code.
• Commas are used to separate each selector in grouping.

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
h1,h2,p
{
text-align: center;
color: blue;
}
Example

<html>
<head>
<style>
h1,p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> About Us </h1>
<p>This is Techmyths Solutions</p>
<h2> Contact </h2>
<p>Pondicherry</p>
</body>
</html>
Code

How To Add CSS ?
There are three ways of inserting a style sheet:
• Inline CSS
• Internal CSS
• External CSS

Inline CSS
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element.
• The style attribute can contain any CSS property.
• Inline styles are defined within the "style" attribute of the relevant element.

<html>
<body>
<h1 style="color:blue;text-align:center;">Techmyths Solutions</h1>
<p style="color:red;">
TechMyths Software Solutions is a software development Company
that provides cutting edge engineering solutions and offers IT-
enabled services. Our team assists in transforming the business
through latest tech capabilities to stay ahead of the curve.
</p>
</body>
</html>
Inline CSS - Code

Internal CSS
• An internal style sheet may be used if one single HTML page has a unique
style.
• The internal style is defined inside the <style> element, inside the head
section.

<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Internal CSS - Code
<body>
<h1>Techmyths</h1>
<p>Welcome to Techmyths
Solutions Private Limited</p>
</body>
</html>

External CSS
• With an external style sheet, you can change the look of an entire website by
changing just one file!
• Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
• An external style sheet can be written in any text editor, and must be saved
with a .css extension.
• The external .css file should not contain any HTML tags.

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
External CSS - Code
<html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1>External Stylesheet Demo</h1>
<p>This external stylesheet refers another
file named demo.css</p>
</body>
</html>
Apec.htm
demo.css

Multiple Style Sheets
• Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
• Then, assume that an internal style sheet also has the following style for the <h1>
element:
h1 {
color: orange;
}

<html>
<head>
<link rel="stylesheet"
href="demo.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Multiple CSS - Code
<body>
<h1>This is a heading</h1>
<p>The style of this document is a
combination of an external stylesheet, and
internal style</p>
</body>
</html>

CSS Cascading Order
• What style will be used when there is more than one style specified for an
HTML element?
• All the styles in a page will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest priority:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• So, an inline style has the highest priority, and will override
external and internal styles.

<html>
<head>
<link rel="stylesheet"
href=“demo.css">
<style>
body {background-color: blue;}
</style>
</head>
Cascading CSS - Code
<body style="background-color: red">
<h1>Multiple Styles Will Cascade into
One</h1>
<p>Inline style has the highest priority,
and will override external and internal
styles. </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.
• A CSS comment is placed inside the <style> element, and
starts with /* and ends with */:

CSS Color Names
In CSS, a color can be specified by using a predefined color name:

CSS Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS RGB Colors
• An RGB color value represents RED, GREEN, and BLUE light sources.
• In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Cascading CSS - Code
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<p>In HTML, you can specify colors using RGB values.</p>
</body> </html>

CSS Background Image
<html>
<head>
<style>
body {
background-image: url("grey.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the
background!</p>
</body>
</html>

CSS Borders
• The CSS border properties allow you to specify the style, width, and color of
an element's border.
• The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border

CSS Border Style
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of
border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>

CSS Border Color
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: dotted;
border-color: blue;
}
</style> </head>
<body>
<h2>The border-color Property</h2>
<p class="one">A solid red border</p>
<p class="two">A dotted blue border</p>
</body>
</html>

CSS LIST
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ol.c {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Lists</h2>
<p>Example of
unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered
lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Intro to CSS_APEC CascadingStyleSheets.pptx

Intro to CSS_APEC CascadingStyleSheets.pptx

Recommended

Recommended

More Related Content

Similar to Intro to CSS_APEC CascadingStyleSheets.pptx

Similar to Intro to CSS_APEC CascadingStyleSheets.pptx (20)

Recently uploaded

Recently uploaded (20)

Intro to CSS_APEC CascadingStyleSheets.pptx