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

Module -3

This document provides an overview of Cascading Style Sheets (CSS), including its introduction, uses, advantages, types, and syntax. It covers various CSS properties related to text, backgrounds, and the box model, as well as positioning and floating elements. Additionally, it explains how to implement CSS through inline, embedded, and external styles, and highlights the importance of selectors in styling web pages.

Uploaded by

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

Module -3

This document provides an overview of Cascading Style Sheets (CSS), including its introduction, uses, advantages, types, and syntax. It covers various CSS properties related to text, backgrounds, and the box model, as well as positioning and floating elements. Additionally, it explains how to implement CSS through inline, embedded, and external styles, and highlights the importance of selectors in styling web pages.

Uploaded by

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

Unit - 3

CASCADING STYLE SHEET


Syllabus
CSS Introduction - Formatting Text – Colors and Backgrounds, Thinking Inside the
Box, Floating and Positioning, CSS Layout, Responsive Web Design
CSS3 - Introduction
• CSS stands for Cascading Style Sheets

• CSS is a standard style sheet language used for describing the presentation of
the web pages.

• CSS was designed to enable the separation of presentation and content

• CSS3 is the latest version of the CSS specification


Uses of CSS
• To apply same style rules on multiple elements.

• To control the presentation of multiple pages of a website with a single style sheet

• To present the same page differently on different devices

• To style dynamic states of elements such as hover, focus, etc. that isn't possible
otherwise.

• To change the position of an element on a web page without changing the markup.
Uses of CSS
• To alter the display of existing HTML elements.

• To transform elements like scale, rotate, skew, etc. in 2D or 3D space.

• To create animations and transitions effects without using any JavaScript.

• To create print friendly version of your web pages.


Advantages of Using CSS
• CSS Save Lots of Time

• Easy Maintenance

• Pages Load Faster

• Superior Styles to HTML

• Multiple Device Compatibility


CSS Types
You can include CSS in an HTML document in three ways:

1. Inline styles — Using the style attribute in the HTML start tag.

2. Embedded styles — Using the <style> element in the head section of a


document.

3. External style sheets — Using the <link> element, pointing to an external CSS
file.
Inline Styles
• Inline styles are used to apply the unique style rules to an element by putting
the CSS rules directly into the start tag.

• It can be attached to an element using the style attribute

• The style attribute includes a series of CSS property and value pairs.
Inline Styles
Each "property: value" pair is separated by a semicolon (;)

Example:

<h1 style="color:red; font-size:30px;">This is a heading</h1>

<p style="color:green; font-size:22px;">This is a paragraph.</p>


Embedded (or) Internal Style Sheets
• Embedded or internal style sheets only affect the document they are
embedded in.

• Embedded style sheets are defined in the <head> section of an HTML


document using the <style> element

• You can define any number of <style> elements in a HTML document but they
must appear between the <head> and </head> tags
Embedded (or) Internal Style Sheets
<html> </style>
<head>
</head>
<title>Embedded Style Sheet</title>
<style> <body>
body
<h1>This is a heading</h1>
{
background-color: YellowGreen; <p>This is a paragraph of text.</p>
}
</body>
p
{ </html>
color: #fff;
}
External Style Sheets
• An external style sheet is ideal when the style is applied to many pages of the
website.

• An external style sheet holds all the style rules in a separate document that you
can link from any HTML file on your site

• External style sheets are the most flexible because with an external style sheet,
you can change the look of an entire website by changing just one file
External Style Sheets
style1.css extcss.html
body <html>
{ <head>
background: lightyellow; <title>My HTML Document</title>
font: 18px Arial, sans-serif; <link rel="stylesheet" href="style1.css">
} </head>
h1 <body>
{ <h1>This is a heading</h1>
color: orange; <p>This is a paragraph of text.</p>
} </body>
</html>
CSS Syntax
• CSS rules have two main parts, a selector and one or more declarations:

• The declarations that appear in the block that follows the selector may be applied to all
elements of a specific type, or only those elements that match a certain attribute

• Each declaration consists of a property and a value


CSS Syntax
• CSS rules have two main parts, a selector and one or more declarations:

• The declarations that appear in the block that follows the selector may be applied to all
elements of a specific type, or only those elements that match a certain attribute

• Each declaration consists of a property and a value


CSS Text Properties
Property Description Values
color Sets the color of text Red,blue
direction Specifies the text direction/writing direction rtl, ltr
Increases or decreases the space between
letter-spacing 3px,5px
characters in a text
line-height Sets the line height 10px
text-align Specifies the horizontal alignment of text left,right,center,jusify
none, underline, overline, line-
text-decoration Specifies the decoration added to text
through
Specifies the indentation of the first line in a text-
text-indent 50px
block
CSS Text Properties
Property Description Values
text-shadow Specifies the shadow effect added to text 2px 2px red
text-transform Controls the capitalization of text uppercase, lowercase, capitalize
Specifies how overflowed content that is not
text-overflow clip, ellipsis
displayed should be signaled to the user
Baseline, text-top, text-
vertical-align Sets the vertical alignment of an element
bottom,sub,super
Specifies how white-space inside an element is
white-space
handled
Increases or decreases the space between words in
word-spacing
a text
CSS Units
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px* pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
* - Pixels (px) are relative to
Relative to the font-size of the element (2em
em the viewing device
means 2 times the size of the current font)
CSS Selectors
• Selectors are one of the most important aspects of CSS as they are used to
select elements on a web page so that they can be styled.

• You can define selectors in various ways.


1. Element Type Selector

2. Id Selectors

3. Class Selectors
Element Type Selector - Id Selectors -
Class Selectors
<head>
#error { <body>
<title>CSS selector</title>
color: #ff0000; <h1>This is heading</h1>
<style>
} <p>This is a paragraph.</p>
h1 {
.blue { <p id=“error">This is a id selector</p>
color: Yellow;
color: #0000ff; <p class="blue">This is a class selector</p>
}
} </body>
p{
</style> </html>
color: green;
</head>
}
Backgrounds
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-size
• background-clip
• background-origin
Backgrounds
Property Name Value
background-color red, blue
background-image url("gradient_bg.png")
background-repeat repeat| repeat-x | repeat-y | no-repeat
bacground-attachment scroll | fixed
left top | left center | left bottom | right top | right center | right
background-position
bottom | center top | center center | center bottom

background-size Specify the size of a background-image with "auto" and in pixels

defines how far the background (color or image) should extend


background-clip
within an element
background-origin padding-box | border-box | content-box | initial | inherit
Backgrounds
<html>
<head> background-image: url(images/bgimg3.jpg);
<title>Background Properties</title> background-repeat:no-repeat;
<style> background-position:right top ;
p{ bacground-attachment: fixed;
font-size:30px; background-size:100px 100px;
text-align:center; }
color:yellow; </style>
} </head>
body <body>
{ <p>This is a heading</p>
border: 2px solid black; </body>
padding: 25px; </html>
background-color:brown;
Colors
Different ways of representing color in html is as follows:
Color Name:
Example: color:red;

Hex Code:
#RRGGBB
Example: color:#FF0000;

Decimal Code:
(R,G,B)
Example:color:rgb(255,0,0);
Thinking Inside the Box
• 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 every HTML element. It
consists of:

1. margins,

2. borders,

3. padding, and

4. the actual content.


Thinking Inside the Box
Thinking Inside the Box
• The CSS box model contains the different properties in CSS. These are listed below.
• Border

• Margin

• Padding

• Content
Thinking Inside the Box
Border Field

• It is a region between the padding-box and the margin. Its proportions are determined
by the width and height of the boundary.

Margin Field

• This segment consists of the area between the boundary and the edge of the border.

• The proportion of the margin region is equal to the margin-box width and height. It is
better to separate the product from its neighbor nodes.
Thinking Inside the Box
Padding Field

• This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.

Content Field

• Material such as text, photographs, or other digital media is included in this area.

• It is constrained by the information edge, and its proportions are dictated by the width
and height of the content enclosure.
Thinking Inside the Box
<html> <head> <style> <body>
div { <h2>Demonstrating the Box Model</h2>
background-color: lightgrey; <p>The CSS box model is essentially a box that wraps
width: 300px; around every HTML element.</p>
border: 15px solid green; <div>This text is the content of the box. We have added a
padding: 50px; 50px padding, 20px margin and a 15px green
margin: 20px; border.</div>
} </body>
</style> </head> </html>
Width and Height of an Element
<html> <head> <body>
<style> <h2>Calculate the total width:</h2>
div { <img src=“small.jpg" width="350" height="263" alt="Klematis">
width: 320px; <div>The picture above is 350px wide. The total width of this
padding: 10px; element is also 350px.</div>
border: 5px solid gray; </body>
margin: 0; </html>
}
</style> </head>
Width and Height of an Element
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Floating and Positioning
• The CSS float property is a positioning property.

• It is used to push an element to the left or right, allowing another element to wrap
around it. It is generally used with images and layouts.
Floating and Positioning
• Elements are floated only horizontally. So it is possible only to float elements left or
right, not up or down.

1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.

4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.
Floating and Positioning
Property Description Values

The clear property is used to avoid elements after


clear left, right, both, none, inherit
the floating elements which flow around it.

float left, right, none, inherit


It specifies whether the box should float or not.
Floating and Positioning
Value Description
It specifies that the element is not floated, and will be displayed just where it occurs
none
in the text. this is a default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

initial It sets the property to its initial value.

inherit It is used to inherit this property from its parent element.


Floating and Positioning
<html>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
<head> <style>
This is some text. This is some text. This is some text.
img {
</p>
float: right;
</body>
}
</html>
</style> </head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the
right in the paragraph.</p>
Positioning
• The position property specifies the type of positioning method used for an element

• There are five different position values:

1. static

2. relative

3. fixed

4. absolute

5. sticky
Positioning
• Elements are then positioned using the top, bottom, left, and right properties.

• However, these properties will not work unless the position property is set first.

• They also work differently depending on the position value.


Position: static
• This is a by default position for HTML elements.

• It always positions an element according to the normal flow of the page.

• It is not affected by the top, bottom, left and right properties.


Position: static
<html> <body>
<head> <h2>position: static;</h2>
<style> <p>An element with position: static</p>
div.static { <div class="static">
position: static; This div element has position: static;
border: 3px solid #73AD21; </div>
} </body>
</style> </html>
</head>
Position: relative
• An element with position: relative; is positioned relative to its normal position.

• Setting the top, right, bottom, and left properties of a relatively-positioned element
will cause it to be adjusted away from its normal position.

• Other content will not be adjusted to fit into any gap left by the element.
Position: relative
<html>
<body>
<head>
<h2>position: relative;</h2>
<style>
<p>An element with position: relative; is positioned
div.relative {
relative to its normal position:</p>
position: relative;
<div class="relative">
left: 30px;
This div element has position: relative;
border: 3px solid #73AD21;
</div>
}
</body>
</style>
</html>
</head>
Position: fixed
• An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled.

• The top, right, bottom, and left properties are used to position the element.

• A fixed element does not leave a gap in the page where it would normally have been
located.
Position: fixed
<html> <head>
<body>
<style>
<h2>position: fixed;</h2>
div.fixed {
<p>An element with position: fixed; is positioned relative
position: fixed;
to the viewport.</p>
bottom: 0;
<div class="fixed">
right: 0;
This div element has position: fixed;
width: 300px;
</div>
border: 3px solid #73AD21;
</body>
}
</html>
</style> </head>
Position: absolute
• An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed).

• However; if an absolute positioned element has no positioned ancestors, it uses the


document body, and moves along with page scrolling.
Position: absolute
<html> div.absolute {
<head> position: absolute;
<style> top: 80px;
div.relative { right: 0;
position: relative; width: 200px;
width: 400px; height: 100px;
height: 200px; border: 3px solid #73AD21;
border: 3px solid #73AD21; }
} </style>
</head>
Position: absolute
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Position: sticky
• An element with position: sticky; is positioned based on the user's scroll position.

• A sticky element toggles between relative and fixed, depending on the scroll position.

• It is positioned relative until a given offset position is met in the viewport - then it
"sticks" in place (like position:fixed).
Position: sticky
<html> <head> <style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style> </head>
Position: sticky
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach
its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
</div>
</body> </html>

You might also like