Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

1bcom_sem3_unit5_css__notes

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML documents, defining how elements are displayed on web pages. CSS rules consist of selectors and declarations, which can be applied through inline, internal, or external methods. Additionally, CSS allows for the use of classes and ID selectors to style specific elements, along with various properties for fonts, text, colors, and backgrounds.

Uploaded by

PullaReddy L
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

1bcom_sem3_unit5_css__notes

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML documents, defining how elements are displayed on web pages. CSS rules consist of selectors and declarations, which can be applied through inline, internal, or external methods. Additionally, CSS allows for the use of classes and ID selectors to style specific elements, along with various properties for fonts, text, colors, and backgrounds.

Uploaded by

PullaReddy L
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Unit V

Cascading Style Sheets


.

CASCADING STYLE SHEET


CSS stands for Cascading Style Sheet. It is a style sheet language used to
describe the presentation of HTML document. Styles define how elements are
displayed on a web page.
Syntax: selector {declarations; declarations ;)
Selector {property_name: value; property_name: value ;}
Ex: h1 {color: red ;}

CSS Rules / Defining a style:


A Style sheet is a collection of rules. A CSS rule contains two parts – selector
and a set of declarations.

A selector is used to create a link between the rule and the HTML tag. A
declaration specifies the styles to the selector. Declarations must be using
colons and terminated using semicolons

Each declaration contains two parts – Property Name and Property Value
separated by colon. A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.

Example:
body h1
{ {
background-color: #eebd2; color: #eebd2;
} background-color: #d8a29b;
font-family: “Book Antiqua”,
Times,serief;
}

TYPES OF CSS (or) USING STYLES


CSS is used to define styles to the web pages. Styles can be added to HTML
elements in 3 ways:
1. Inline - using a style attribute in HTML elements
2. Internal - using a <style> element in the HTML <head> section
3. External - using one or more external CSS files
An inline sheet is used to apply styles to a particular element in a webpage.
Embedding style sheet is used to apply styles to a single webpage. An external
style sheet is used to apply styles to multiple web pages.
1
1. Inline style sheets:
In this method, the styles are applied to a particular element in a webpage. We
can define inline style by using STYLE property within a tag.
Syntax:
<tag style=”property_name: value ;”>. . . </tag>
Example:
<html>
<head><title> Inline style sheets </title></head>
<body>
<P>This is a normal text </P>
<P STYLE=”font-family: Arial; font-style: italic; color: red;”>
This is a text with inline style </P>
</body>
</html>

2. Internal style sheets:


In this method, the styles are defined between <STYLE> . . . </STYLE> tags in
the <head> section. Internal / embedding style sheet are used to apply styles
to a single webpage.
Syntax:
<html>
<head>
<style type=”text/css”>
…….
</style>
</head>
<body> …………. </body>
</html>

Example:
<html>
<head>
<style>
h1
{
font-family: Arial; font-style: italic; color: red;
}
</style>
</head>
<body>
<h1>this is a text with internal/embedded styles</h1>
</body>
</html>

3. External Style:
In this method, the styles are written in external file with .css extension and
referenced by html document. External style sheet are used to declare styles
separately and implement for multiple pages.

<LINK> Tag:
2
External style sheets are called using the <link> tag. . It is placed in the head
section of HTML document
Syntax:
<link rel ="stylesheet" type="text/css" href="filename.css">
Where, href – represents name and location of the external style sheet.

Example:
Step 1: open notepad and create a file with css styles. Save it with
mystyle.css
p
{
font-family:arial;
font-size:medium;
color:blue;
}
h1
{
font-family:arial black;
background-color:blue;
color:white;
}

Step 2: open notepad and type the following code. Save it with External.html
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<h1> external css style </h1>
<p> This is a text with external style </p>
</body>
</html>
Step 3: open the External.html file using browser.

DEFINING YOUR OWN STYLES (or) CLASS and ID SELECTORS


Styles are defined by using rules. HTML has tags, CSS has selectors. Selectors
are the names of HTML tags and are used to change the style of a specific tag.
a. Classes
A class selector is used to apply styles to any element in a web page. A
class selector definition starts with a period (.) followed by a name and then
the style definition.
The general format is:
selector.classname {property; value; property: value}
<selector class=classname>

Syntax:
<style>
.name { Style definitions }
</style>
Example:
.greenboldtext {font-size: small; color: #008080; font-weight: bold ;}

3
To reference a style class in HTML code, simply specify the class name in the
class attribute of an element
<p class=”greenboldtext”>HTML</p>

b. ID Selector / Anonymous Classes


An ID selector is used to apply styles only to one element in a web page
not to the entire page. An ID selector definition starts with a pound (#)
followed by a name and then the style definition.
Syntax:
<style>
#name { Style definitions }
</style>
Example:
p#title { font: 24pt Verdana, Geneva, Arial, sans-serif }
To reference a style ID in HTML code, simply specify the ID name in the id
attribute of an element
<p id=”title”>HTML</p>

c. Including Stylesheets:
We can include stylesheets in the <head> tag using <link> and <style>
tags. The <link> tag defines the relationship between a document and an
external resource. The <link> tag is most used to link to style sheets.

The general format is:


<link rel=”StyleSheet” href=”url” type=”text/css” media=”screen”>
[<style type=”text/css” >] <!- @import url(url); -></style>
Where,
 rel – Required. Specifies the relationship between the current document
and
 the linked document.
 href – Specifies the location of the linked document.
 type – Specifies the MIME type of the linked document
 media – Specifies on what device the linked document will be displayed
 url – Specifies address of new CSS file.

Ex:
<link rel=”StyleSheet” href=”mainstyles.css “ type=”text/css”
media=”screen” >
<style type=”text/css”>
<! - - @import url(http://www.smiggins.com/style.css) -- >
</style>

FORMATTING BLOCKS OF INFORMATION (or) Div and span elements:


4
HTML has two block formatting commands, used to apply formatting to
elements in a page.
a. Divison - <div>
 <DIV> tag is used to set position of the content in the web page. The
<div> separates the content from its surrounding content by a line
break.
 Divisions are block-level elements used to define sections of HTML file. A
<div> creates a line break by default (block-level elements are div, p and
heading tags). We define a division within HTML file between the
<body>……………</body> tags.
 The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are
common.
Syntax:
<div> contents</div>

Example1:
<html><head>
<style>
#box
{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
</style>
<body><p>This is first <div id=box>css based web page</div>with
html</p>
</body>
</html>
Example2:
<html><body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body> </html>

b. Span - <span>
 SPAN is similar to DIV. It changes the style of the text. These are inline
tags (inline elements are span, img, a, em, strong). It is used as a
selector in style sheet and also supports class and id selectors. No line
break is created when a span is declared. The <span> element is often
used as a container for some text.
Syntax:
<span> contents</span>

Example1:
5
<html><head>
<style>
.first { color:red; }
.italic { font-style:italic;}
</style>
<body>
<p>This is first <span class=first>css based web page</span>with
html</p>
</body></html>

Example 2:
<html>
<body>
<p>My mother has <span style="color:blue;fontweight: bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span>
eyes.</p>
</body></html>

6
PROPERTIES AND VALUES
There are mainly certain types of properties of font, color and background, text,
boxes etc.
1. FONT
a. Font-family Property
The font-family property specifies the font family for the text.
Fonts are identified by giving the name of a font. In CSS, there are two types of
font family names:
 generic family - a group of font families with a similar look (like "Serif"
or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
CSS allows specifying a comma-separated list of fonts to use for a particular
style.

Syntax:
Font-family: family name [Generic family]
Example:
<html><head>
<style>
<! - -
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
//- - >
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph in the Arial font.</p>
</body>
</html>
Note: if the user does not have the specified font name it will use the same
generic family.

b. Font-size Property
The font-size property specifies the font size of text.
The possible relative values are larger, smaller and absolute values are small,
medium, and large.
Syntax:
Font-size: small | medium | large | smaller | larger |length |
percentage
Example:
<head>
7
<style>
<! - -
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
//- - >
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>

c. Font-style property
The font-style property specifies font style for text. It used to set text to none,
italic or oblique.
Syntax:
Font-weight: none | italic | oblique
Example:
<html>
<head>
<style>
<! - -
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
//- - >
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
d. Font-weight property
The font-weight property specifies the weight of the text.
The possible relative values are - bold, normal, bolder, lighter and absolute
values are 100, 200, 300,….., 900.
Syntax:
Font-weight: normal |bold |bolder |lighter | 100 |200 |……….| 900
Example:
<html>
<head>
<style>
<! - -
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
//- - >
8
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

2. TEXT
a. Text-align Property
The text-align property used to align the text.
The possible values are left, center, right and justify.
Syntax: Text-align: left | center | right | justify
Example:
<html>
<head>
<style>
<! - -
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
//- - >
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
b. Text-decoration property
The text-decoration property is used to set or remove decorations from text.
The possible values are none, overline, line-through and underline.
Syntax:
text-decoration : none| overline | line-through | underline
Example:
<html>
<head>
<style>
<! - -
h1 {text-decoration:overline;}
p {text-decoration:line-through;}
//- - >
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph</p>
</body>
</html>

9
c. Text-transform property
The text-transform property specifies the case (or capitalization) of the text.
The possible values are none, lowercase, uppercase and capitalize
Syntax:
text-transform: none | lowercase |uppercase |capitalize
Example:
<html>
<head>
<style>
<! - -
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
//- - >
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

3. Color & Backgrounds


The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector.
a. Color property
The color property specifies the color of the text. The color values are given in
hex-decimal format.
Syntax: color: value
Example: p{color:red;}
b. Background-color property
The background-color specifies the background color in the page
Syntax: background-color: value
Example:
<html><head>
<style>
<! - -
h1{background-color:#6495ed;}
p{background-color:#e0ffff;}
//- - >
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<p>This paragraph has its own background color.</p>
</body>
</html>

c. Background-image Property
The background-image property specifies the background image.
Syntax: Background-image: none | URL (location
10
Example:
<html>
<head>
<style>
<! - -
body{background-image:url('img_tree.png');}
//- - >
</style>
</head>
<body>
<h1>Hello World!</h1>
</body></html>

LAYERS / Z-Index Property


Layers can be used in many situations. For example, the z-index is to
create effects in headlines instead of creating these as graphics.
The position attribute is needed to create layer. The position can be
either absolute or relative. The position itself is defined with the top and left
properties.
The z-index property specifies the stack order of an element. An element
with greater stack order is always in front of an element with a lower stack
order. Z-index only works on positioned elements (position: absolute |
relative | fixed).

Attributes:
Z-index: n
The browser maintains a stack of layers order of content. The z-index
property allows layer overlapping elements. If there are two
overlapping CSS positioned elements, the element with the higher
priority will appear on top of the other.
Position: absolute | relative
The position property changes how elements are positioned on your
page. Possible values are static, relative, absolute or fixed. It is optional
and defaults to absolute.
Left: n, Top: n
Left – display position from left.
Top - Display position from top.
Width: n, Height: n
Height - Specify the height of an element to display content.
Width - Specify the width of an element to display content.
Example:
<html>
<head>
<title>Absolute Positioning</title>
<style type = "text/css">
.background_image
{
position: absolute; top: 0px; left: 0px; z-index: 1;
}
.foreground_image
{
position: absolute; top: 25px; left: 100px; z-index: 2;
11
}
.text
{
position: absolute; top: 25px; left: 100px; z-index: 3;font-size: 20pt;
}
</style>
</head>
<body>
<p>
<img src="background.jpg" class="background_image" alt = "First positioned
image" height=200 width=200><br>
<img src="foreground.jpg" class="foreground_image" alt = "Second positioned
image" height=200 width=200>
</p>
<p class = "text">Sample Text</p></body></html>

In the above example, .background_image has the lowest z-index (1),


so it displays in the background. The .foreground_image has a z-index of 2,
so it displays in front of background_image.png. The <p> element has z-index
of 3, so its content displays in front of the other two. The default z-index value
is 0.

CSS Borders:
The CSS border properties allow us to specify the style, width, and color of an
element's border.
The CSS border properties are used to determine the style, variety, width, and
flow of the borders of a component. These properties include:
1) CSS border-style:
The Border style property is used to specify the border type or style.
The border-style property contains four values (for the top border, right border,
bottom border, and the left border).

Ex:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

12
2) CSS border-width
The border-width property is used to set the border's width
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one
of the three pre-defined values: thin, medium, or thick
Ex:
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

3) CSS border-color
The border-color property is used to set the color of the four borders.
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

Line Height:
The CSS line height property is used to define the minimal height of line boxes
within the element. It sets the differences between two lines of your content.
CSS line-height property values are
value description

normal This is a default value. it specifies a normal line height.

numbe It specifies a number that is multiplied with the current font size

13
r to set the line height.

length It is used to set the line height in px, pt,cm,etc.

% It specifies the line height in percent of the current font.

initial It sets this property to its default value.

inherit It inherits this property from its parent element.


Ex:
<html>
<head> <style>
h3.small {
line-height: 70%;
}
h3.big {
line-height: 200%;
}
</style>
</head>
<body>
<h3>
This is a heading with a standard line-height.<br>
This is a heading with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</h3>
<h3 class="small">
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
</h3>
<h3 class="big">
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
</h3>
</body>
</html>

CSS Padding:
CSS Padding property is used to define the space between the element content
and the element border.
CSS padding is affected by the background colors. It clears an area around the
content.
CSS Padding Properties
Property Description

padding It is used to set all the padding properties in one


declaration.

14
padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.

CSS Padding Values


Value Description

length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.

Example
<html> <head>
<style>
p{
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

CSS Margin:
CSS Margin property is used to define the space around elements. It is
completely transparent and doesn't have any background color. It clears an
area around the element.

CSS Margin Properties are


Property Description

margin This property is used to set all the properties in one


declaration.

15
margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.


CSS Margin Values- These are some possible values for margin property.
Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is
0px.

% It is used to define a margin in percent of the width of


containing element.

inherit It is used to inherit margin from parent element.

Example:
<html> <head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

CSS BOX Model:


HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout. The CSS box model is essentially a
box that wraps around HTML elements, and it contains- margins, borders,
padding, and the actual content. The box model allows us to place a border
around elements and space elements in relation to other elements.
The box model consists of four main components, which are
1. Content
 The innermost component of the box model is the actual content of the
element. It can be text, image, video, etc.
 The content area is defined by the width and height properties.
16
2. Padding
 The space between the actual content and the border of the element is
the padding.
 The padding area is defined by the property padding.
3. Border
 The border surrounds the content and padding and gives the visual
border of the element.
 The border properties can be controlled using the border keyword.
4. Margin
 The margin is the space outside the element that separates it from other
elements in the layout.
 The margin of the element is controlled by the margin property.
The CSS Box model can be visually represented as:

Example:
<head>
<style>
p{
width: 200px;
height: 300px;
padding: 15px;
border: 10px solid red;
margin: 5px;
}
</style>
</head>
<body>
<p>Content</p>
</body>
</html>

17
18
19

You might also like