Scribd
Upload
2 views

unit 3 CSS (2)

Unit III of the document covers Cascading Style Sheets (CSS), detailing various methods for applying styles to HTML elements, including inline, internal, and external styles. It explains CSS syntax, selectors, and the concept of specificity in resolving conflicting styles. The unit also discusses positioning elements, media queries, and advanced styling techniques such as animations and gradients.

Uploaded by

Shree Akshitha Vimala Saravanan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

unit 3 CSS (2)

Unit III of the document covers Cascading Style Sheets (CSS), detailing various methods for applying styles to HTML elements, including inline, internal, and external styles. It explains CSS syntax, selectors, and the concept of specificity in resolving conflicting styles. The unit also discusses positioning elements, media queries, and advanced styling techniques such as animations and gradients.

Uploaded by

Shree Akshitha Vimala Saravanan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

UNIT III CASCADING STYLE SHEETS

Inline Styles – Embedded Style Sheets – Conflicting Styles – Linking External Style
Sheets – Positioning Elements – Backgrounds – Element Dimensions – Box Model and
Text Flow – Media Types and Media Queries – Drop-Down Menus – Text Shadows –
Rounded Corners – Color – Box Shadows – Linear Gradients – Radial Gradients –
Multiple Background Images – Image Borders – Animations – Transitions and
Transformations – Flexible Box Layout Module – Multicolumn Layout.

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 1


Intro to CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS Syntax: Example:
p{
color: red;
text-align: center;
}

The selector points to the HTML element you want to style.


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.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Cascading Style Sheets (CSS) is used to format the layout of a webpage.


With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and
laid out, what background images or background colors are to be used, different displays for different devices and screen
sizes, and much more!
Note:
The word cascading means that a style applied to a parent element will also apply to all children elements within the parent.
So, if you set the color of the body text to “red", all headings, paragraphs, and other text elements within the body will also
get the same color (unless you specify something else)!
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 2
Using CSS
CSS can be added to HTML documents in 3 types/ways of CSS:

1) Inline - by using the style attribute inside HTML elements


2) Internal /Embed- by using a <style> element in the <head> section
3) External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external
CSS files. However, in this we will use inline and internal styles, because
this is easier.

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 3


1) Inline Style
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Syntax:
<element style = “property:value;”>
In the below example the <strong> is used to bold the text.
Inline Style
CODE
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p style = “text-align:center; color:red;">
OUTPUT
This is inline styling <strong>strong</strong>paragraph
</p>
</body>
</html>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 4
When to use Inline Style
Professional Web developers do not use inline style often, but there are times when they are important to understand or necessary to
use. You can see inline styles in HTML e-mail, CMS content (eg. WordPress)
The HTML viewers in email clients are not standardized and most of them do not allow <style> tags.
Another example is dynamic websites, where a common way to hide a dialog box is to add the inline style display=none
When not to use Inline Style
Sematic Markup – way of writing and structuring your HTML
Maintainability – capability to require organization wide coordination
Reusability – group of reusable code
Scalability – system’s ability to increase or decrease in performance and cost

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 5


2) Internal/Embedded Style
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, with a <style> element.
Embedded style sheets are particularly useful for HTML documents that have unique style requirements from the rest of the
documents in your project
If the styles need to be applied across multiple documents, you should link to an external style sheet instead of using individual
embedded style sheets.
Syntax:
<head>
<style>
Elements of the web page
</style>
</head>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 6


3) External Styles
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page.
The best method for attaching our CSS style sheets is to use external styles
With this method, we will write all your CSS in a separate file with a .css extension.
we can then link to the CSS file from each of your HTML pages.
This helps us make changes to CSS separately and improves the page load time.
Syntax
<link rel="stylesheet" type="text/css" href="#location">

EXAMPLE:
<link rel="stylesheet" href="style.css">
Note With an external style sheet, you can change the look of an entire web site, by changing one file!
If some properties have been defined for the same selector (element) in different style sheets, the value from the
last read style sheet will be used.

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 7


<!-- Inline CSS -->
<body>
<p style=“text-align: center; color: red; ">This is a Heading with Inline CSS</h1>
</body>

<!-- External CSS -->


<head>
<link rel="stylesheet" href="styles.css"> styles.css
</head> p{
<body>
text-align: center;
<p>paragraph will be affected by the style.</p>
</body>
color: red;
}
<!-- Internal CSS -->
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>paragraph will be affected by the style.</p>
</body>
8
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
CSS Simple Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Here are most basic CSS selectors.
Selector Example Example description
Selects all that elements
Eg. all <p> elements
element p p{
color: red;
text-align: center;
}

#center {
color: red;
text-align: center;
#id #center }
Selects the element with id=“center“
Eg. select a specific <p id=“center”> element, not to all <p> elements
.center {
color: red;
text-align: center;
}
.class .center Selects all elements with class=“center“
Eg. different HTML elements with a specific class attribute class=“center“
<h1 class="center">
<p class="center">
11
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
The CSS element Selector The CSS id Selector
The element selector selects HTML elements based The id selector uses the id attribute of an HTML element to select a specific
on the element name. element, not to all <p> elements
The id of an element is unique within a page, so the id selector is used to select
Here, all <p> elements on the page will be center- one unique element!
aligned, with a red text color: To select an element with a specific id, write a hash (#) character, followed by the
HTML, CSS CODE: id of the element. The CSS rule below will be applied to the HTML element with
<!DOCTYPE html> id="para1"
<html> HTML, CSS CODE:
<head> <!DOCTYPE html>
<style> <html>
p{ <head>
text-align: center; <style>
color: red; #center {
} text-align: center;
</style> color: red;
</head> }
<body> </style>
<p>paragraph will be affected by the style.</p> </head>
<p>Me too!</p> <body>
<p>And me!</p> <p id=“center">paragraph will be affected by the style.</p>
</body> <p>Me too!</p>
</html> <p>And me!</p>
OUTPUT </body>
</html>

OUTPUT
12
The CSS class Selector
The class selector selects different HTML elements with a
specific class attribute. To select elements with a specific class,
write a period (.) character, followed by the class name.
In this example all HTML elements with class="center" will be
red and center-aligned:
HTML, CSS CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head> OUTPUT
<body>
<h1 class="center">paragraph will be affected by the style.</h1>
<p class="center">Me too!.</p>
</body>
</html>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 13


Conflicting Style
When styles from multiple style sheets are applied to the same element, the browser will have to decide which
style to use, leading to conflicts. Another cause of conflicting styles is the use of multiple selectors that apply to
the same element

/* Add the "!important" tag to the style you want to prioritize */


p{
color: black;
color: red !important;
color:blue:
}

/* Font color will be red in the example. */

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win",
and its style declaration will be applied to that HTML element.

Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 14


Now to resolve such conflicts, CSS knows a concept called specificity and there are clear rules included in the CSS
specification that define how such conflict should be resolved and which type of selector has a higher specificity.

Specificity Hierarchy

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:
Inline styles - Example: <h1 style="color: pink;">

IDs - Example: #test

Classes, pseudo-classes, attribute selectors - Example: .test,

Elements and pseudo-elements - Example: h1

Note: !important override all the specificy css rules,

ie !important has the highest priority.


UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 15
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 20
HTML, CSS CODE
<div>tag <!DOCTYPE html>
The <div> tag defines a division or a section <html>
<head>
in an HTML document. <style>
The <div> tag is used as a container for HTML .myDiv {
elements - which is then styled with CSS or background-color: lightblue;
manipulated with JavaScript. color: black ;
color: red;
The <div> tag is easily styled by using the class color:blue;
or id attribute. }
Any sort of content can be put inside the <div> </style>
tag! </head>
<body>
Note: By default, browsers always place a line <h1>The div element</h1>
break before and after the <div> element. <div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html> OUTPUT

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 23


CSS Comments HTML, CSS CODE OUTPUT
Comments are used to explain the code, and may help <!DOCTYPE html>
document your source code.. <html>
Comments are ignored by browsers.
<head>
A CSS comment is placed inside the <style> element, and
starts with /* and ends with */:
<style>
p{
color: red; /* Set text
HTML and CSS Comments color to red */
From the HTML, learned that can add comments to }
</style>
Comment - </head>
<body>
HTML comment by using the <!-- ... -->
CSS comment by using the /* …… */
<h2>My Heading</h2>

<!-- These paragraphs


will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 24
Positioning Elements
The position property in CSS tells about the method of positioning for an element or an HTML entity.
There are five different types of positioning the elements available in CSS:

Static
Relative
Absolute
Fixed
Sticky

The positioning of an element can be done using the top, right, bottom, and left properties.
These specify the distance of an HTML element from the edge of the viewport.
To set the position by these four properties, we have to declare the positioning method.
Syntax:
position: positioning elements;

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 25


By default, every relative to its normal The fixed always The Sticky
absolute position is used to
element in CSS is position. positions an element behaves like a
position an element
positioned as static. top, right, bottom, relative to the regular element
relative to the nearest
it is positioned and left properties of viewport until it reaches
positioned elements.
according to the a relatively- This means that even the defined offset
normal flow of the positioned element - when we scroll the and then
page. adjusted away from page, the elements becomes fixed.
its normal position. and contents stay in
the same place. Relative+fixed
=sticky

position:static; position:relative; position:fixed; Position:sticky;


positoin:absolute;
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 26
HTML, CSS CODE
<!DOCTYPE html>
<html> position: static;
<head>
<title>CSS Positioning elements</title> HTML elements are positioned static by default.
<style>
.parent { Static positioned elements are not affected by the top, bottom,
background-color: blue;
}
.child-one {
left, and right properties.
background-color: green;
} An element with position: static; is not positioned in any special way; it is
.child-two {
background-color: red; always positioned according to the normal flow of the page:
}
.child-three {
background-color: pink;
}
</style>
</head>
<body> OUTPUT
<div class="parent">
Parent
<div class="child-one">One</div>
<div class="child-two">Two</div>
<div class="child-three">Three</div>
</div>
</body>
</html>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 27
position: relative; HTML, CSS CODE
<style>
.parent {
An element with position: relative; is positioned background-color: blue;
}
relative to its normal position. .child-one {
background-color: green;
position:relative;
Setting the top, right, bottom, and left left:10px;
}
.child-two {
properties of a relatively-positioned element background-color: red;
}
will cause it to be adjusted away from its .child-three {
background-color: pink;
}
normal position. </style>

Other content will not be adjusted to fit into any gap


OUTPUT
left by the element.

element has position: relative;

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 28


position: fixed; HTML, CSS CODE
<style>
An element with position: fixed; is positioned .parent {
background-color: blue;
relative to the viewport, which means it position:relative;
height:200vh;
always stays in the same place even if }
.child-one {
the page is scrolled. background-color: green;
position:fixed;
top:0px;
The top, right, bottom, and left properties
}
are used to position the element. .child-two {
background-color: red;
}
A fixed element does not leave a gap in the .child-three {
background-color: pink;
page where it would normally have been }
</style>
located.
OUTPUT

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 29


position: absolute; HTML, CSS CODE
<style>
.parent {
background-color: blue;
An element with position: absolute; is positioned position:relative;
height:200vh;
relative to the nearest positioned }
.child-one {
ancestor (instead of positioned relative to the background-color: green;
position:absolute;
viewport, like fixed). top:0px;
}
.child-two {
However; if an absolute positioned element has background-color: red;
}
no positioned ancestors, it uses the document .child-three {
background-color: pink;
body, and moves along with page scrolling. }
</style> OUTPUT
element has position: absolute;

.parent{
position:absolute;
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 30
}
position: sticky; HTML, CSS CODE
<style> <!DOCTYPE html>
An element with position: sticky; is positioned .parent { <html>
<head>
background-color: blue;
based on the user's scroll position. position:relative;
<title>CSS Positioning elements</title>
<style>
height:200vh;
}
A sticky element toggles between relative and fixed, .child-one { </style>
background-color: green; </head>
depending on the scroll position. It is positioned position:sticky; <body>
<div class="parent">
top:0px;
relative until a given offset position is met in the }
Parent
<div class="child-one">One</div>
.child-two { <div class="child-two">Two</div>
viewport - then it "sticks" in place (like background-color: red; <div class="child-three">Three</div>
} </div>
position:fixed). .child-three { </body>
background-color: pink; </html>
}
</style>

OUTPUT

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 31


One program for all Positioning Elements: static, relative, absolute, fixed, and sticky
HTML/CSS CODE;
OUTPUT;
<!DOCTYPE html> .child-four {
<html> background-color: brown;
<head> position: sticky; CHILD FOUR
<title>CSS Positioning elements</title> PARENT top: 20px; POSITION STICKY
<style> STATIC POSITION } TO TOP 20 PX
TO VIEW PORT,
.parent {
TO GET SCROLL
background-color: lightblue; BARS
</style>
position: static; </head>
height:200vh; <body>
} CHILD ONE <div class="parent">
.child-one { POSITON Parent
ABSOLUTE
background-color: lightgreen; <div class="child-one">One</div>
position: absolute; <div class="child-two">Two</div>
} CHILD TWO <div class="child-three">Three</div>
.child-two { POSITION RELATIVE OF <div class="child-four">Four</div>
background-color: red; LEFT 30 PX
position: relative; </div>
left: 30px; </body>
} CHILD THREE </html>
.child-three { POSITION FIXED
background-color: pink; TO TOP 0px
position: fixed;
top: 0px;
} UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 32
CSS Colors - color name / color values
Colors are specified using predefined color names, or RGB, HEX,
Difference between RGB and RGBA
HSL, RGBA, HSLA values.
RGB Color Values
With CSS, a color is most often specified by:
In HTML, a color can be specified as an RGB value, using this
name - a valid color name - like red
formula:
value - a HEX value - like #ff0000
rgb(red, green, blue)
an RGB value - like rgb(255,0,0)“ etc….
Each parameter (red, green, and blue) defines the intensity of the
CSS Color name
color with a value between 0 and 255.
CSS Background Color
This means that there are 256 x 256 x 256 = 16777216 possible
<h1 style="background-color:DodgerBlue;">Hello</h1>
colors!
<p style="background-color:Tomato;">Lorem</p>
For example, rgb(255, 0, 0) is displayed as red, because red is set
to its highest value (255), and the other two (green and blue) are
CSS Text Color
set to 0.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
RGBA Color Values
RGBA color values are an extension of RGB color values with an
CSS Color Values
Alpha channel - which specifies the opacity for a color.
In CSS, colors can also be specified using RGB values, HEX values,
An RGBA color value is specified with:
HSL(hue, saturation and lightness) values:
rgba(red, green, blue, alpha)
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
The alpha parameter is a number between 0.0 (fully transparent)
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
and 1.0 (not transparent at all)
</h1>

33
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
CSS Backgrounds

The CSS background properties are used to add background effects for elements.

background-colorThe background-color property specifies the background color of an element.

background-image property specifies an image to use as the background of an element.

background-repeat property repeats an image both horizontally and vertically.

background-attachment specifies whether the background image should scroll or be fixed

background-position Sets the starting position of a background image

background (shorthand property) specify all the background properties in one single property.

UNIT III SDP (CSS), MEENAKSHI, DEPT OFhttps://www.w3schools.com/css/css_background.asp


S&H, RMKEC 34
HTML, CSS CODE
Example 2: background color example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
Example 1: }

div {
body { background-color: lightblue;
}
background-image: url("paper.gif");
p{
background-color: #cccccc; background-color: yellow;
}
</style>
} </head>
<body>

You can set the background color for <h1>CSS background-color example!</h1>
any HTML elements: <div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div> OUTPUT
</body>
</html>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 35


HTML, CSS CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
} OUTPUT
</style>
</head>
<body>
<h1>The background image,repeat,position,attachment Property</h1>
<p>The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with the rest
of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize
the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 36
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a
shorthand property.

Instead of writing: Use the shorthand property background:


body {
background-color: #ffffff; body {
background-image: url("img_tree.png"); background: #ffffff url("img_tree.png") no-repeat right top;
background-repeat: no-repeat; }
background-position: right top;
}

When using the shorthand property the order of


the property values is:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position It does not matter if one of the property values is missing, as
long as the other ones are in this order.
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 37
HTML, CSS CODE
CSS Multiple Backgrounds <!DOCTYPE html>
 CSS allows you to add multiple background images for <html>
an element, through the background-image property. <head>
 The different background images are separated by <style>
commas, and the images are stacked on top of each other, #example1 {
where the first image is closest to the viewer. background: url(img_tree.gif) right bottom no-repeat,
url(img_paper.jpg) left top repeat;
Padding - Clears an area around the content. The padding is
padding: 15px;
transparent
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
OUTPUT magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</div>
</body>
</html> 38
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
CSS Image Border HTML, CSS CODE
<!DOCTYPE html>
<html>
<head>
The CSS border-image property allows you to specify <style>
an image to be used instead of the normal border #borderimg {
around an element. border: 10px solid transparent;
The property has three parts: padding: 15px;
border-image: url(border.png) 30 round;
1. The image to use as the border }
2. Where to slice the image </style>
3. Define whether the middle sections should be </head>
repeated or stretched <body>

The border-image property takes the image and slices <h1>The border-image Property</h1>
it into nine sections, like a tic-tac-toe board. It then
places the corners at the corners, and the middle <p>Here, the middle sections of the image are repeated to create the
border:</p>
sections are repeated or stretched as you specify. <p id="borderimg">border-image: url(border.png) 30 round;</p>
OUTPUT <p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions,
do not support the border-image property.</p>

</body>
</html>
39
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC https://www.w3schools.com/css/css3_border_images.asp
HTML, CSS CODE
Element Dimensions <!DOCTYPE html>
<html>
CSS Setting height and width <head>
The height and width properties are used to set the <style>
height and width of an element. div {
The height and width properties do not include width: 500px; /*change to max-width */
padding, borders, or margins. It sets the height/width height: 100px;
of the area inside the padding, border, and margin of background-color: powderblue;
}
the element.
</style>
The height and width properties may have the following </head>
<body>
values:
auto - This is default. The browser calculates the height and width
<h2>Set the max-width of an element</h2>
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block <div>This div element has a height of 100px and a
initial - Sets the height/width to its default value max-width of 500px.</div>

OUTPUT <p>max-width instead width above Resize the browser


window to see the effect.</p>
</body>
</html>
https://www.w3schools.com/css/css_dimension.asp
40
https://www.w3schools.com/cssref/tryit.php?filename=trycss_initial
CSS Box Model
In CSS, the term "box model" is used when talking about design and Example
layout. div {
The CSS box model is essentially a box that wraps around every HTML
element. background-color: lightgrey;
It consists of: margins, borders, padding, and the actual content. width: 300px;
The box model allows us to add a border around elements, and to define padding: 50px;
space between elements.
border: 15px solid green;
Explanation of the different parts:
margin: 20px;
Content - The content of the box, where text and images appear
}
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 41


HTML, CSS CODE
<!DOCTYPE html> <p>The CSS box model is essentially a box that wraps around
every HTML element. It consists of: borders, padding,
<html>
margins, and the actual content.</p>
<head>
<div>This text is the content of the box. We have added a
<style> 50px padding, 20px margin and a 15px green border. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris
div { nisi ut aliquip ex ea commodo consequat. Duis aute irure
background-color: lightgrey; dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
width: 300px; proident, sunt in culpa qui officia deserunt mollit anim id est
border: 15px solid green; laborum.</div>
padding: 50px; </body> OUTPUT
margin: 20px; </html>
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 42


CSS Text Flow Model HTML, CSS CODE
<!DOCTYPE html>
<html>
<head>
The text-overflow property specifies how overflowed <style>
content that is not displayed should be signaled to div.a {
the user. white-space: nowrap;
width: 50px;
It can be clipped, display an ellipsis (...), or display a overflow: hidden;
custom string. text-overflow: clip; /* ellipsis or "----“ */
border: 1px solid #000000;
Both of the following properties are required for text- }
overflow: </style>
</head>
white-space: nowrap; //wrap->folded text <body>
overflow: hidden; <h1>The text-overflow Property</h1>
text-overflow: ellipsis; <p>The following two divs contains a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>
OUTPUT
<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>

<h2>text-overflow: "----" (user defined string):</h2>


<div class="c">Hello world!</div>

<p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in


Firefox.</p>
</body>
43
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
CSS Media Types and Media Queries
CSS3 Introduced Media Queries
CSS2 Introduced Media Types
The @media rule, introduced in CSS2, made it possible to Media queries are a popular technique for delivering a tailored
style sheet to different devices.
define different style rules for different media types. Media queries in CSS3 extended the CSS2 media types idea:
Examples: You could have one set of style rules for Instead of looking for a type of device, they look at the capability
computer screens, one for printers, one for handheld of the device.
devices, one for television-type devices, and so on. Media queries can be used to check many things, such as:
width and height of the viewport
Unfortunately these media types never got a lot of support width and height of the device, orientation etc…
by devices, other than the print media type. Media Query Syntax
A media query consists of a media type and can contain one or
Media Types more expressions, to be either true or false.
Value Description
all Used for all media type devices @media not|only mediatype and (expressions) {
CSS-Code;
print Used for printers }
Used for computer screens, tablets, smart- not|only is optional and the all type will be implied.
screen
phones etc.
The result of the query is true if the specified media type matches
the type of device the document is being displayed on and all
expressions in the media query are true.

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 44


example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less
than 480 pixels, the background-color will be pink):

HTML, CSS CODE

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}

@media screen and (min-width: 480px) {


OUTPUT
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 45


https://www.w3schools.com/cssref/css3_pr_mediaquery.php
<!DOCTYPE html>

CSS display Property <html>


<head>
<style>
p {color: red;}
The display property specifies the display .ex1 {display: none;}
.ex2 {display: inline;}
behavior (the type of rendering box) of an .ex3 {display: block;}
.ex4 {display: inline-block;}
element. </style>
</head>
In HTML, the default display property <body>
<h1>The display Property</h1>
value is taken from the HTML <h2>display: none:</h2>
<div>
specifications or from the browser/user Lorem ipsum <p class="ex1">HELLO WORLD!</p> Vestibulum
default style sheet. The default value in </div>

XML is inline <h2>display: inline:</h2>


<div>
Lorem ipsum <p class="ex2">HELLO WORLD!</p> Vestibulum
</div>

Value Description <h2>display: block:</h2>


<div>
none The element is completely removed Lorem ipsum <p class="ex3">HELLO WORLD!</p> Vestibulum
</div>
Displays an element as an inline element (like
inline <span>). Any height and width properties will have <h2>display: inline-block:</h2>
no effect <div>
Displays an element as a block element (like <p>). It Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam
block at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p>
starts on a new line, and takes up the whole width
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
Displays an element as an inline-level block </div>
inline-block container. The element itself is formatted as an inline </body>
element, but you can apply height and width values </html>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 46


CSS DropDown
A CSS dropdown is an effective solution for enhancing the UI and UX of an app or website.
A dropdown menu is the submenu of the website or app’s main menu. It is used to showcase content buttons for each parent menu item.
Dropdown menus help users easily navigate an app or website by narrowing down their choices.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The display property specifies the display behavior (the type of rendering box) of an element.
Create a dropdown box that appears when the user moves the mouse over an element.
Example1: Dropdown Text
HTML, CSS CODE
<!DOCTYPE html> <body>
<html> <head> <h2>Hoverable Dropdown</h2>
<style> <p>Move the mouse over the text below to open the dropdown
.dropdown-content { content.</p>
display: none; <div class="dropdown">
position: absolute; Dropdown Menu->MouseHere
background-color: ghost grey; <div class="dropdown-content">
min-width: 160px; <p>link1</p> OUTPUT
box-shadow: 0px 8px 16px 0px; <a href>link2</a>
} </div>
.dropdown:hover .dropdown-content { </div>
display: block; </body>
} </html>
</style>
</head>
https://www.w3schools.com/cssref/pr_class_display.php
47
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC
https://www.w3schools.com/css/css_dropdowns.asp
CSS Text-Shadow CSS Box Shadow
The text-shadow property adds shadow to text. The CSS box-shadow property is used to apply one or more
shadows to an element.
This property accepts a comma-separated list of shadows Specify a Horizontal and a Vertical Shadow, In its simplest use,
to be applied to the text.
you only specify a horizontal and a vertical shadow.
The default color of the shadow is the current text-color ie
CSS Syntax black
text-shadow: h-shadow v-shadow blur-radius color|none|initial;
CSS Syntax
box-shadow: none|h-offset v-offset blur spread color;
Value Description
Note: To attach more than one shadow to an element, add a
h-shadow Required. The position of the horizontal shadow. comma-separated list of shadows
Negative values are allowed

v-shadow Required. The position of the vertical shadow.


Negative values are allowed

blur-radius Optional. The blur radius. Default value is 0

color Optional. The color of the shadow.

none Default value. No shadow

initial Sets this property to its default value.


UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 49 (CSS), MEENA
UNIT III SDP
HTML, CSS CODE
<!DOCTYPE html>
<html> text-shadow
property
<head>
<style> box-shadow
property
h1 { <h1>box-shadow: 5px 10px:</h2>
text-shadow: 5px 5px orange; <div id="example1">
} <p>only horizontal vertical bydefault shadow</p>
#example1 { </div> OUTPUT
border: 1px solid; <h1>box-shadow: 5px 10px blue:</h2>
padding: 10px; <div id="example2">
box-shadow: 5px 10px; <p>only horizontal vertical + blur+red shadow</p>
} </p>
#example2 { </body>
border: 1px solid; </html>
padding: 10px;
box-shadow: 5px 10px 10px red;
}
</style>
</head>
<body> UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 50
CSS Rounded Corners HTML, CSS CODE
<!DOCTYPE html> <body>
CSS border-radius Property <html> <h2>border-radius: 25px:</h2>
The CSS border-radius property defines the <head> <div id="example1">
radius of an element's corners. <style> <p>The border-radius property defines
This property allows you to add rounded #example1 { the radius of the element's corners.</p>
corners to elements! border: 2px solid red; </div>
CSS border-radius - Specify Each Corner padding: 10px; <h2>border-radius: 50px 20px:</h2>
border-radius: 25px; <div id="example2">
The border-radius property can have from one } <p>If two values are set; the first one is
to four values. Here are the rules:
#example2 { for the top-left and bottom-right corner,
Four values - border-radius: 15px 50px 30px border: 2px solid red; the second one for the top-right and
5px; (first value applies to top-left corner,
second value applies to top-right corner, third padding: 10px; bottom-left corner.</p>
value applies to bottom-right corner, and border-radius: 50px 20px; </div>
fourth value applies to bottom-left corner): } </body>
Three values - border-radius: 15px 50px 30px; </style>
</html>
(first value applies to top-left corner, second </head>
value applies to top-right and bottom-left
corners, and third value applies to bottom-
OUTPUT
right corner):
Two values - border-radius: 15px 50px; (first
value applies to top-left and bottom-right
corners, and the second value applies to top-
right and bottom-left corners):
One value - border-radius: 15px; (the value
applies to all four corners, which are rounded
equally:

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC


CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:


1) Linear Gradients (goes down/up/left/right/diagonally)
2) Radial Gradients (defined by their center)
3) Conic Gradients (rotated around a center point)

1) Linear Gradients (goes down/up/left/right/diagonally)


To create a linear gradient you must define at least two color stops.
Color Stops are the colors you want to render smooth transitions among.
You can also set a starting point and a direction along with the gradient effect

Syntax:
background-image : linear-gradient(direction, color-stop1, color-stop2,………..)
directions – by default top to bottom
to left, to right, to left top, to left bottom etc.

https://www.w3schools.com/css/css3_gradients.asp
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 52
Example - Linear Gradients – Top to Bottom by default
HTML, CSS CODE
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: linear-gradient(red, yellow);
OUTPUT
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<div id="grad1"></div>
</body>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 53
</html>
Example - Linear Gradients – Left to Right
<html> HTML, CSS CODE

<head>
<style>
#grad {
height: 200px;
width: 200px;
background-image: linear-gradient(to right, red , yellow);
}
</style> OUTPUT
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad"></div>
</body>
</html> UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 54
Example - Linear Gradients – Multiple Colors
HTML, CSS CODE
<html>
<head>
<style>
#grad2 {
height: 200px;
width: 200px;
background-image: linear-gradient(red, orange, yellow,
green, blue, indigo, violet);
}
OUTPUT
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<div id="grad2"></div>
</body> UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 55
HTML, CSS CODE
2) Radial Gradients
A Radial Gradient is defined by its center
To create a Radial Gradient you must also define at least two color steps
Syntax:
background-image : radial-gradient(shape size at position, start-color,……….., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
OUTPUT
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Radial Gradient</h1>
<div id="grad1"></div>
</body></html>
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 56
Example - Radial Gradients
HTML, CSS CODE
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red;
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
} OUTPUT
</style>
</head>
<body>
<h1>Radial Gradient</h1>
<div id="grad1"></div>
</body></html> UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 57
HTML, CSS CODE
CSS Animation The example binds the "example" animation to the <div> element. The
animation will last for 4 seconds, and it will gradually change the
Animation is step by step movements of object
on the screen, an animation lets an element background-color of the <div> element from "red" to "yellow":
gradually change from one style to another. <!DOCTYPE html> </head>
To use CSS animation, you must first specify <html> <body>
some keyframes for the animation. <head>
Keyframes is what styles the element will have <style> <h1>CSS Animation</h1>
at certain times. div { <div></div>
width: 100px; <p><b>Note:</b> When an
height: 100px; animation is finished, it goes back
The @keyframes Rule
background-color: red; to its original style.</p>
When you specify CSS styles inside animation-name: example; </body>
the @keyframes rule, the animation will
gradually change from the current style to the animation-duration: 4s; </html>
new style at certain times. }
OUTPUT
To get an animation to work, you must bind the
@keyframes example {
animation to an element. from {background-color: red;}
to {background-color: yellow;}
Note:CSS animations are for more complex
series of movements. }
</style>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 58


HTML, CSS CODE
CSS Transitions This example shows a 100px * 100px red <div> element. The <div> element
has also specified a transition effect for the width property, with a duration
CSS transitions allows you to change property of 2 seconds:
values smoothly, over a given duration <!DOCTYPE html> <body>
CSS transitions are generally best for simple <html>
from-to movements. <head> <h1>The transition Property</h1>
<style>
div { <p>Hover over the div element below,
Use CSS Transitions width: 100px; to see the transition effect:</p>
To create a transition effect, you must specify height: 100px; <div></div>
two things: background: red;
the CSS property you want to add an effect to transition: width 2s; </body>
} </html>
the duration of the effect OUTPUT
div:hover {
Note: If the duration part is not specified, the width: 300px;
transition will have no effect, because the }
default value is 0. </style>
</head>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 59


HTML, CSS CODE
CSS Transformation <!DOCTYPE html>
<html> <h1>The transform Property</h1>
CSS transformation is from one form to <head>
another form <style> <h2>transform: rotate(20deg):</h2>
.rotate { <div class="rotate">Hello World!</div>
The transform property applies a 2D or 3D width: 150px; <br>
transformation to an element. height: 80px;
background-color: yellow; <h2>transform: skewY(20deg):</h2>
This property allows you to rotate, scale, transform: rotate(20deg); <div class="skewY">Hello World!</div>
move, skew, etc., elements. } <br>
Syntax .skewY{ <h2>transform: scaleY(1.5):</h2>
transform: none|transform-functions value; width: 150px; <div class="scaleY">Hello World!</div>
height: 80px;
background-color: yellow; </body>
transform: skewY(20deg); </html>
Value Description } OUTPUT
Defines a 2D rotation, the angle is
rotate(angle) .scaleY {
specified in the parameter
width: 150px;
Defines a 2D skew transformation
skewY(angle) height: 80px;
along the Y-axis
background-color: yellow;
Defines a scale transformation by transform: scaleY(1.5);
scaleY(y)
giving a value for the Y-axis }
translate(x,y) Defines a 2D translation </style>
</head>
<body>

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 60


Flexible Box Layout Module HTML, CSS CODE
The Flexible Box Layout Module, makes it <!DOCTYPE html>
easier to design flexible responsive layout <html> <h1>Create a Flex Container</h1>
structure without using positioning. <head> <div class="flex-container">
Flexbox Elements <style> <div>1</div>
.flex-container { <div>2</div>
To start using the Flexbox model, you need to display: flex; <div>3</div>
first define a flex container flex-wrap: wrap; </div>
flex-direction: row;
background-color: DodgerBlue; <p>A Flexible Layout must have a parent
} element with the <em>display</em>
property set to <em>flex</em>.</p>
The element above represents a flex container (the .flex-container div {
blue area) with three flex items. background-color: lightgrey; <p>Direct child elements(s) of the flexible
flex-direction: row/column - which direction-stack margin: 10px; container automatically becomes flexible
the flex item row or column padding: 20px; items.</p>
flex-wrap: wrap/nowrap - specifies that the flex font-size: 30px;
items will wrap or without wrap } </body>
</style> </html> OUTPUT
Syntax: </head>
.flex-container { <body>
display: flex;
flex-wrap: wrap;
flex-direction: row;
} UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 61
CSS Multi-column Layout
The CSS multi-column layout allows easy definition of
multiple columns of text - just like in newspapers: 1. column-countSpecifies the number of columns an
element should be divided into
CSS Multi-column Properties 2. column-fillSpecifies how to fill columns
column-count 3. column-gapSpecifies the gap between the columns
column-fill 4. column-ruleA shorthand property for setting all the
column-rule-* properties
column-gap
5. column-rule-colorSpecifies the color of the rule
Column-rule between columns
column-rule-style 6. column-rule-styleSpecifies the style of the rule
column-rule-width between columns
column-rule-color 7. column-rule-widthSpecifies the width of the rule
between columns
column-width
8. column-widthSpecifies a suggested, optimal width
for the columns

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 62


HTML, CSS CODE
<!DOCTYPE html>
<html> </head>
<head> <body>
<style> <h1>Set the column-count, gap, column-rule property</h1>
.newspaper { <div class="newspaper">
column-count: 3; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
column-gap: 40px; aliquam erat volutpat.
column-rule-style: solid; </body>
column-rule-width: 1px; </html>
column-rule-color: lightblue;
}
</style> OUTPUT

UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 63


difference between transition transform and
animation in CSS?
CSS transitions are generally best for simple from-to movements,
while CSS animations are for more complex series of movements.
Whereas CSS tranformation is from one form to another form

tranformation
UNIT III SDP (CSS), MEENAKSHI, DEPT OF S&H, RMKEC 64

You might also like