Scribd
Upload
14 views37 pages

CSS For Styling

Uploaded by

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

CSS For Styling

Uploaded by

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

CSS for Styling

Cascading Style Sheets (CSS)


• Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
• CSS is a language describes the style of an HTML document.
• CSS describes how HTML elements should be displayed, not what is being
displayed.
• It Describes the appearance, layout, and presentation of information on a
web page
• It Can be embedded in HTML document or placed into separate .css file
• A style sheet is a document that contains style information.
• It enables us to specify styles such as fonts, colors, size, spacing,
margins ,typeface etc..
Why Use CSS?

• CSS handles the look and feel part of a web page.


• Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations
in display for different devices and screen sizes as well as a variety of
other effects.
• CSS saves a lot of work.
History
• CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained
through a group of people within the W3C called the CSS Working Group
CSS Versions
• Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a
recommendation in December 1996. This version describes the CSS
language as well as a simple visual formatting model for all the HTML tags.
• CSS2 was became a W3C recommendation in May 1998 and builds on CSS1.
This version adds support for media-specific style sheets element
positioning and tables.
• CSS3 was became a W3C recommendation in June 1999 and builds on older
versions CSS.
CSS Syntax

• A CSS comprises of style rules that are interpreted by the


browser and then applied to the corresponding elements in
document
• A CSS rule-set consists of a selector and a declaration block:
selector { property: value }
Ex:
CSS Syntax

Selector − A selector is an HTML tag on which a style will be applied.


This could be any tag like <h1> or <table> etc.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
CSS Syntax

<html>
<head>
<style>
body { background-color:lime; }
p{ font-size: x-large ; background-color : yellow }
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.

1. Element Type Selector


2. ID Selector
3. Universal Selector
4. Class Selector
element selector

• The element selector selects elements based on the element name.


• You can select all <p> elements on a page like this :
p{
text-align: center;
color: red;
}
<html>
<body>
<head>
<style>
ul {
color: #36CFFF;
border: solid 3px #ccc;
}
</style>
</head>
<ul>
<li>Fish</li>
<li>Apples</li>
<li>Cheese</li>
</ul>
<p>Example paragraph text.</p>
<ul>
<li>Water</li>
<li>Juice</li>
<li>Maple Syrup</li>
</ul>
</body>
</html>
The id Selector

• The id selector uses the id of an HTML tag to select a specific element.


• The id of an element should be unique within a page, so the id selector
is used to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>
</html>
The Universal Selectors
• Rather than selecting elements of a specific type, the universal
selector quite simply matches the name of any element type
• The universal selector works like a wild card character, selecting all
elements on a page
* { color: green; font-size: 20px; line-height: 25px; }
<html> <HEAD>
<style>
*{
color: green;
font-size: 20px;
line-height: 25px;
}
</style>
<body>
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>AThe primary scripting language for developing web pages </dd>
</dl></body></html>
The 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
red and center-aligned:

.center {
text-align: center;
color: red;
}
<html><HEAD>
<style>
.ex1{
color: green;
font-size: 20px;
line-height: 25px;
}
.ex2{
color: red;
font-size: 30px;
line-height: 25px;
}
</style>
<body>
<ol class="ex1" type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul class="ex2" type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
</body></html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.centerlarge {
font-size: 100%;
}
</style>
</head>
<body>
<h1 class="center">CSS stands for Cascading Style Sheets.</h1>
<p class="center"> CSS is a language that describes the style of an HTML document </p>
<p class="centerlarge"> The class selector selects elements with a specific class attribute </p>
</body>
Grouping Selectors

• If you have elements with the same style definitions, like this:

• It will be better to group the selectors, to minimize


the code.
• To group selectors, separate each selector with a
comma.
Three Ways to Insert CSS

There are three ways of inserting a style sheet:

1. Internal or embedded style sheet


2. Inline style
3. External style sheet
Internal Style Sheet

• In this CSS rules are defined with in the document itself using style tag.
• Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:
Example for Internal Style sheet
<html>
<head>
<title>Cascading Style Sheet</title>
<style>
h2 {
font-family : Tahoma;
color: blue;
text-align: center;
text-transform : uppercase;
}
</style>
</head>
<body>
<h2> Hi guys how r u</h2>
</body>
</html>
Inline Styles

• 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.
• The example below shows how to change the color and the left margin of
a <h1> element:
<html>
<head>
<title>Cascading Style Sheet</title>
</head>
<body>
<h2 style= "font-family : Tahoma;
color: red;
text-align: center;
text-transform : uppercase;">
Hi guys how r u</h2>
</body>
</html>
External Style Sheet

• An external style sheet is a separate text file with .css extension.


• You define all the Style rules within this text file and then you can include
this file in any HTML document using <link> element.
• The <link> element can be used to include an external stylesheet file in
your HTML document.
• With an external style sheet, you can change the look of an entire website
by changing just one file!
Cont…

• An external style sheet can be written in any text editor. The file
should not contain any html tags. The style sheet file must be saved
with a .css extension.
• Here is how the "mystyle.css" looks:
mystyle.css:
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

<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>
CSS Basic Properties

1. Background Properties
2. Font Properties
3. Text Properties
4. Border Properties
CSS Background Properties

Property Description
background Sets all the background properties in one background: lightblue url("img_tree.gif")
declaration no-repeat fixed center
background-color Sets the background color of an element background-color: green;

background-image Sets the background image for an element background-image: url(“tree.png");

background-position Sets the starting position of a background background-position: right top;


image
background-repeat Sets how a background image will be background-repeat: no-repeat;
repeated
<html>
<head>
<style>
h1 {
background-color: green;
}
body {
background-image: url(“tree.png");
background-repeat: no-repeat;
background-position: right top;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<p>This paragraph has its own background color.</p>
</body></html>
CSS properties for fonts
Property Description Example

font Sets all the font properties in one font: italic bold 12px Georgia, serif;
declaration
font-family Specifies the font family for text font-family: "Times New Roman", Times, serif;

font-size Specifies the font size of text font-size: 40px;

font-style Specifies the font style for text font-style: italic;

font-variant Specifies whether or not a text should font-variant: small-caps;


be displayed in a small-caps font

font-weight Specifies the weight of a font font-weight: bold;


<html>
<head>
<style>
h1 {
font-family: "Times New Roman", Times, serif;
}
p{
font-style: italic;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
}
</style>
</head>
<body bgcolor="lime">
<h1>CSS font property example!</h1>
<p>This paragraph has font family </p>
</body</html>
CSS properties for Text
Property Description

color Sets the color of text color: red;

letter-spacing Increases or decreases the space between letter-spacing: 2px;


characters in a text
text-align Specifies the horizontal alignment of text text-align: center;

text-decoratio Specifies the decoration added to text text-decoration: underline;


n
text-indent Specifies the indentation of the first line in a text-indent: 50px;
text-block
text-shadow Specifies the shadow effect added to text text-shadow: 2px 2px #FF0000;

text-transfor Controls the capitalization of text text-transform: uppercase;


m
<html><head><style>
h1 {
color: green;
text-align: center;
text-decoration: underline;
}
h2{
text-shadow: 3px 2px red;
}
h3 {
text-transform: uppercase;
letter-spacing: 3px;
}
p{
text-indent: 50px;
}
</style>
<body>
<h1>Vignan university</h1> <h2>ComputerScience & Engineering</h2> <h3>section-e</h3>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
ever since.</p> </body></html>
Border Style
• 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
none - Defines no border
<html><head><style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.none {border-style: none;}
p.mix {border-style: dotted dashed solid 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>
<p class="none">No border.</p>
<p class="mix">A mixed border.</p>
</body></html>
Table Properties
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
height: 30%;
width: 5%;
vertical-align: top;
border: 1px solid red;
}
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th> </tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td> </tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td> </tr>
</table>
</body>
</html>

You might also like