Scribd
Upload
39 views

CSSTYPES

CSS (Cascading Style Sheet) is used to style web pages. It allows setting properties like colors, backgrounds, padding and more. CSS rules contain selectors that point to HTML elements to style paired with declarations using a property:value syntax separated by semicolons. Styles can be applied inline, internally via the <style> tag, or externally in a .css file linked via HTML. Selector types include element names, classes, ids, and attributes to target elements for styling.

Uploaded by

Roja 197
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

CSSTYPES

CSS (Cascading Style Sheet) is used to style web pages. It allows setting properties like colors, backgrounds, padding and more. CSS rules contain selectors that point to HTML elements to style paired with declarations using a property:value syntax separated by semicolons. Styles can be applied inline, internally via the <style> tag, or externally in a .css file linked via HTML. Selector types include element names, classes, ids, and attributes to target elements for styling.

Uploaded by

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

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) :


➢ CSS is used to apply the style in the web page which is made up of HTML elements. It
describes the look of the webpage.
➢ CSS provides various style properties such as background color, padding, margin, border-
color, and many more, to style a webpage.
➢ Each property in CSS has a name-value pair, and each property is separated by a
semicolon (;).

CSS Style Rule Syntax as follows − ➢ The selector points to the HTML element you want to style.

selector { property: value; property: value; } ➢ 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(:).(property:value;) pair

➢ Multiple CSS declarations are separated with semicolons,


and declaration blocks are surrounded by curly braces.
Example:
p {
color: red;
text-align: center;
}

➢ p is a selector in CSS (it points to the HTML element you want to style: <p>).
➢ color is a property, and red is the property value
➢ text-align is a property, and center is the property value
Three ways to apply CSS:
To use CSS with HTML document, there are three ways:
➢ Inline CSS: Define CSS properties using style attribute in the HTML elements.
➢ Internal or Embedded CSS or Document Styles: Define CSS using <style> tag in <head> section.
➢ External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file
using tag in section.
1.Inline CSS:
G.Syntax: <element style=“style rules”>
➢ Inline CSS is used to apply CSS in a single element.
Example: <h1 style=“color:red ; text-align:center; ” > hello <h1>
➢ It can apply style uniquely in each element.
➢ To apply inline CSS, you need to use style attribute within HTML element.
➢ We can use as many properties as we want, but each property should be separated by a semicolon (;).

<!DOCTYPE html>
<html>
<head> <title></title> </head> Output:
<body> Learning HTML using Inline CSS
<h3 style="color: red;” > Learning HTML using InlineCSS </h3>
<p style=“color:red;”> paragraph</p>
</body>
</html>
INLINE STYLE
Example of inline Style:
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>
<h3 style="color: red; font-style: italic;text-align: center;font-size: 50px; “ >
Learning HTML using Inline CSS</h3>
<p >My first paragraph with out style</p>
<p style=“color:blue;margin-left:40px;>My second paragraph with style</p>

</body>
</html>

Output: Learning HTML using Inline CSS


My first paragraph with style
My second paragraph with style
2.Internal CSS: using <style> tag
➢ An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document.
➢ To use Internal CSS, we can use class and id attributes.
➢ Rules defined using this syntax will be applied to all the elements available in the document.
➢ We can use internal CSS to apply a style for a single HTML page.

G. Syntax of Internal CSS: INTERNAL STYLE


Example:
<head>
<head>
<style type=“text/css”>
<style type=“text/css”>
p {
color: red;
Sylt rules
text-align: center;
<style>
}
<head>
</style>
<head>
Example:
<!DOCTYPE html>
<html>
<head> <style>
/*Internal CSS */
body{background-color:lavender; text-align: center;}
h2,p{font-style: italic; font-size: 30px; color: blue;}
p{font-size: 20px;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p >This is a blue color paragraph</p>
<p >This is a red color paragraph</p>
<p >This is a green color paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head> <style>
/*Internal CSS using element name*/
body{background-color:lavender; text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: ;}
p{font-size: 20px;}
/*Internal CSS using class name*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p style=“color:yellow;”>p tag</p>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
<h2 class=“blue”>header two</h2>
</body>
</html>
External CSS:
➢ An external CSS contains a separate CSS file which only contains style code using the class name, id name,
tag name, etc.
➢ We can use this CSS file in any HTML file by including it in HTML file using <link> tag.
➢ If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.
➢ There are two files need to create to apply external CSS
❖ First, create the HTML file
❖ Create a CSS file and save it using the .css extension (This file will only contain the styling code.)
❖ Link the CSS file to HTML file using link tag in header section of HTML document.
Link Tag :

Link tag General Syntax:


<link rel="stylesheet" type="text/css" href="style1.css">

➢ The <link> tag defines the relationship between the current document and an external resource.
➢ The <link> tag is most often used to link to external style sheets.
Link tag Attributes:
➢ href: Specifies the location of the linked document
➢ Type: Specifies the media type of the linked document
➢ Rel: Required. Specifies the relationship between the current document and the linked
document
HTML File name: externalex.html CSS file name: style.css
!DOCTYPE html> File1 body{
<html> background-color:lavender;
<head> text-align: center;
<link rel="stylesheet" type="text/css" href="style.css"> }
</head> h2{
<body> font-style: italic;
<h2>Learning HTML with External CSS</h2> size: 30px;
color: #f08080; File2
<p class="blue">This is a blue color paragraph</p>
}
<p class="red">This is a red color paragraph</p> p{
<p class="green">This is a green color paragraph</p> font-size: 20px;
</body> }
</html>
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
Import rule:@import:
Import the "navigation.css" style sheet into the current style sheet:
@import "navigation.css"; /* Using a string */

Or
@import url("navigation.css"); /* Using a url */

<html>
<head>
<style type=“text/css”>
@import url("navigation1.css");
@import url("navigation2.css");
</style>
</head>
<body>
</body>
</html>
Example to represent the hierarchy of CSS:
<!DOCTYPE HTML> Followings are default CSS styles applicable hierarchy.
<html>
<head> •Inline style (specified within the element using style attribute).
<title> CSS !important</title> •Internal style sheet (specified within the STYLE element/tag).
<style>
p{ •External style sheet (using link attribute, external style sheet to be attached).
background-color:green; Inline level style has highest priority by default and applicable to the
color:white; element first.
}
div p { Output
background-color:yellow;
color:black;
}
</style>
</head>
<body>
<p>Page level style applied</p>
<p style="background-color:red;">Element level style applied</p>
<p>Page level style applied</p>
<div>
<p>Page level style applied </p>
</div>
</body>
</html>
CSS Selector
➢ CSS selectors are used to select the content you want to apply style.
➢ Selectors are the part of CSS rule set.
➢ CSS selector does the following works.
❖ CSS selectors select HTML elements according to its id, class, type, attribute etc.
❖ Apply specified CSS properties.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Class Selector
3. CSS Id Selector
4. Descendent Selector
5. Child Selector
6. CSS Universal Selector
7. Adjacent sibling selector
8. CSS Group Selector
9. Attribute Selector
10. Pseudo – Classes
11. Pseudo-element
1. CSS Element Selector
➢ The most commonly and easy to use selector are Type Selector or Element Selector.
➢ Element selector select any XHTML element on a page that matches the selector regardless of their
position in the document tree.
<!DOCTYPE HTML>
p{ <html>
font-weight:bold; <head>
} <title> CSS Element Selector</title>
<style>
p{
font-weight:bold;
}
</style>
</head>
<body>
<div>Div element</div>
<p>Para(p) element1 </p>
<p>Para(p) element2 </p>
<ul>
<li> List item(li) element </li>
Output <li> List item (li) element </li>
</ul>
</body>
</html>
2. Class Selector:
➢ Class selectors can be used to select any XHTML element that has a class attribute regardless of their
position in the document tree
➢ CSS class selector name starts with “.” followed by class name.
G.Syntax: Example:
.class name .firstitem {
{ font-weight:bold;
css rules; color:blue;
} }

Example:
<body>
<h3 class=“firstitme”>BCA Department</h3>
<p class=“firstitem”> BCA course is of six semesters, spread across three years<p>
<p class=“f”> BSc course is of six semesters, spread across three years<p>
<p > BSc course is of six semesters, spread across three years<p>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using class name*/
.bl{color: blue;}
.rd{color: red;}
.gn{color: green;}
</style>
</head>
<body>
<h2>Learning HTML with internal CSS</h2>
<p style=“color:yellow;”>p tag</p>
<p class="bl">This is a blue color paragraph</p>
<p class="rd">This is a red color paragraph</p>
<p class="gn">This is a green color paragraph</p>
<h2 class="bl"> header two</h2>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title> CSS Class Selector</title> Above example,
<style>
.heading {
Sets text color green to CSS class “.heading” applied H1
color:green;
}
element.
.firstItem { Sets text color red to CSS class “.firstItem” applied two P
color:red; elements.
}
</style>
</head> Output
<body>
<h1 class="heading">Class selector</h1>

<div>
<p class="firstItem">P element - Group 1</p>
<p>P element - Group 1</p>
</div>

<div>
<p class="firstItem">P element - Group 2</p>
<p>P element - Group 2</p>
</div>
</body> </html>
3. ID Selector
➢ Selects element which has a specified ID name/ID as an attribute.
➢ CSS ID selector name starts with “#” followed by ID name.
➢ Note: ID name to be unique in a web page.

G.Syntax: Example:
#idname #p1 {
{ border:groove;
css rules }
}

Example:
<body>
<h3 class=“firstitme”>BCA Department</h3>
<p id=“p1”> BCA course is of six semesters, spread across three years<p>
<p class=“firstitem”> BSc course is of six semesters, spread across three years<p>
<p > BSc course is of six semesters, spread across three years<p>
</body>
Example of Id Selector:
Above example,
<!DOCTYPE HTML>
•Sets text color green to element with ID “headerElement”.
<html>
•Sets text color red to element with ID “firstElement”.
<head>
<title> CSS ID Selector</title>
<style>
#headerElement {
color:green;
}

#firstElement {
color:red;
}
</style>
</head>
<body>
<h1 id="headerElement">ID selector</h1>
<p id="firstElement">P element 1</p>
<p>P element 2</p>
</body>
</html>
<!DOCTYPE HTML>
4.Descendant Selector
<html>
Selects all specified descendant child elements under the <head>
parent element. <title> CSS Descendant Selector</title>
<style>
div p { div#divA p {
text-decoration:underline; background-color:lightgreen;
} }
</style>
</head>
Above example sets font background color green to all <body>
decedent P child elements under the DIV parent <div id=“divA”>
element (<div id="divA">) <p>Level1 : Descendant and child element 1</p>
<p>Level1 : Descendant and child element 2</p>
<div>
<p>----Level2 : Descendant element 11</p>
<p>----Level2 : Descendant element 12</p>
</div>
<div>
<p>----Level2 : Descendant element 21</p>
<p>----Level2 : Descendant element 22</p>
</div>
<p>Level1 : Descendant element 3</p>
</div>
</body>
</html>
Descendant Selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants


of a specified element.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>


<p>Paragraph 5. Not in a div.</p>

</body>
</html>
Descendant
➢ A descendant refers to any element that is connected but lower down the document tree - no matter
how many levels lower.
➢ In the diagram below, all elements that are connected below the <div> element are descendants of
that <div>.
Parent and Child
➢ A parent is an element that is directly above and connected to an element in the
document tree. In the diagram below, the <div> is a parent to the <ul>.
➢ A child is an element that is directly below and connected to an element in the document
tree. In the diagram above, the <ul> is a child to the <div>.
Sibling
A sibling is an element that shares the same parent with another element.
In the diagram below, the <li>'s are siblings as they all share the same parent - the <ul>.
5. Child Selector <!DOCTYPE HTML>
➢ The child selector selects all elements that are the children <html>
of a specified element. <head>
<title> CSS Child Selector</title>
➢ The > symbol should be used
<style>
div#divA > p {
div > p { background-color:lightgreen;
color:red; }
} </style>
</head>
Above example sets font background color green to <body>
immediate P child elements under the DIV parent <div id="divA">
element (<div id="divA">). <p>Level1 : Descendant and child element 1</p>
<p>Level1 : Descendant and child element 2</p>
<div>
<p>----Level2 : Descendant element 11</p>
<p>----Level2 : Descendant element 12</p>
</div>
<div>
<p>----Level2 : Descendant element 21</p>
<p>----Level2 : Descendant element 22</p>
</div>
<p>Level1 : Descendant element 3</p>
</div>
</body>
</html>
Child Selector
6. Adjacent Sibling Selector
➢ The adjacent sibling selector is used to select an <!DOCTYPE HTML>
element that is directly after another specific
<html>
element.
➢ Sibling elements must have the same parent <head>
element, and "adjacent" means "immediately <title> CSS Adjacent Sibling Selector </title>
following". <style>
➢ The following example selects the first <p> div#divb + p+p {
element that are placed immediately after <div> background-color:lightgreen;
elements: }
➢ to an adjacent element. </style>
Example: </head>
div + p +p{ <body>
font-size:25px; <div id="divb">
} <p>P element with in DIV element - 1</p>
<p>P element with in DIV element - 2</p>
Above example sets text color light green to P element </div>
which is next to DIV element with ID “divb” (<div <p>Adjacent Sibling Selectors - P element next to DIV</p>
id="divb">).
<p>P element - 4 </p>
</body>
</html>
<html> <head>
<style>
div + p {
background-color: yellow; Adjacent Sibling Selector
} The + selector is used to select an element that is directly
</style>
</head> after another specific element.
<body> The following example selects the first p element that are
<h2>Adjacent Sibling Selector</h2> placed immediately after div elements:
<p>The + selector is used to select an element that is directly after another
Paragraph 1 in the div.
specific element.</p> Paragraph 2 in the div.
<p>The following example selects the first p element that are placed immediately Paragraph 3. After a div.
after div elements:</p> Paragraph 4. After a div.
<div> Paragraph 5 in the div.
<p>Paragraph 1 in the div.</p> Paragraph 6 in the div.
<p>Paragraph 2 in the div.</p> Paragraph 7. After a div.
</div>
Paragraph 8. After a div.
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>


<p>Paragraph 8. After a div.</p>
</body> </html>
Adjacent Sibling Selector
7. Universal Selector
Selects all child elements under the parent element. <!DOCTYPE HTML>
Here style is applied to every element under the parent element. <html>
The symbol used to represent parent selector is ‘*’ <head>
<title> CSS Universal Selector</title>
body * { <style>
font-size:14px; body * {
} color:red;
background-color:lightgreen;
}
</style>
</head>
<body>
<h2>Universal selector</h2>
<p>Para(p) element</p>
<ul>
<li> List item(li) element</li>
<li> List item (li) element</li>
</ul>
<span>SPAN element</span>
Above example sets text color red and background color </body>
green to all elements inside the body(parent) element. </html>
Universal Selector
General Sibling Selector (~)
➢ The general sibling selector selects all elements that are next siblings of a
specified element.
➢ The following example selects all <p> elements that are next siblings of <div>
elements:

div ~ p {
background-color: yellow;
}
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are
next siblings of a specified element.</p>

<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>

<p>Paragraph 4.</p>
</body> </html>
CSS [attribute] Selector
➢ The [attribute] selector is used to select elements with a specified attribute.
➢ The following example selects all <a> elements with a target attribute:
<html>
a[target] { <head>
background-color: yellow; <style>
} a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>


<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body> </html>
CSS [attribute="value"] Selector
➢ The [attribute="value"] selector is used to select elements with a specified attribute and value.
➢ The following example selects all <a> elements with a target="_blank" attribute:
a[target="_blank"] {
background-color: yellow; <html>
} <head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>


<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>
CSS [attribute ~= "value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute value containing a specified
word.
The following example selects all elements with a title attribute that contains a space-separated list of
words, one of which is "flower":

[title~="flower"] {
border: 5px solid yellow;
}
<html> Example: for [attribute~=“value”]
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>


<p>All images with the title attribute
containing the word "flower" get a yellow
border.</p>

<img src="klematis.jpg" title="klematis flower"


width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224"
height="162">
<img src="img_tree.gif" title="tree" width="200"
height="358">

</body> </html>
CSS [attribute|="value"] Selector
➢ The [attribute|="value"] selector is used to select elements with the specified attribute, whose
value can be exactly the specified value, or the specified value followed by a hyphen (-).
➢ Note: The value has to be a whole word, either alone, like class="top", or followed by a
hyphen( - ), like class="top-text".

<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>
CSS [attribute^="value"] Selector
➢ The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the
specified value.
➢ The following example selects all elements with a class attribute value that starts with "top":
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector : start with a word</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>
CSS [attribute*="value"] Selector: end with a word
➢ The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
➢ The following example selects all elements with a class attribute value that contains "te":

<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>


<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>
Anchor Pseudo-classes
Links can be displayed in different ways:
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: pink;
}

/* selected link */
a:active {
color: blue;
}
Try it Yourself »
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
</body> </html>
2.The ::first-letter Pseudo-element
➢ The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:

Output:
3.CSS - The ::before Pseudo-element:
➢ The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before the content of each <h1> element:
4;CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after the content of each <h1> element:

Output:
CSS UNITS OF MEASUREMENT
CSS length Value: CSS Units of measurement
➢ The length is an units in CSS are required to define the measurement such as margin: 20px; in which
the px (or pixel) is the CSS unit.
➢ They are used to set margin, padding, lengths, and so on.
➢ The length unit in CSS is of two types:
✓ Absolute length.
✓ Relative length.
1.Absolute lengths:
These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size
Unit Name Explanation Example
cm Centimeters It is used to define the measurement in centimetres. P{font-size:1.5cm;}
mm Millimeters It is used to define the measurement in millimetres. P{font-size:5mm;}

in Inches It is used to define the measurement in inches. P{font-size:0.5in;}


1in = 96px = 2.54cm
pt Points It is used to define the measurement in points. P{font-size:12pt;}
1pt = 1/72 of 1 inch.
pc Picas It is used to define the measurement in picas. P{font-size:1pc}
1pc = 12pt so, there 6 picas is equivalent to 1 inch.
px Pixels It is used to define the measurement in pixels(A dot on P{font-size:13px;}
computer Screen).
1px = 1/96th of inch
Output:
Example For Absolute Length

<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style = "font-size: 20px;" > It has a font-size: 20px; </p>
<p style = "font-size: 1.2cm;" > It has a font-size: 1.2cm; </p>
<p style = "font-size: .7in;" > It has a font-size: .7in; </p>
<p style = "font-size: 18pt;" > It has a font-size: 18pt; </p>
<p style = "font-size: 2pc;" > It has a font-size: 2pc; </p>
<p style = "font-size: 10mm;" > It has a font-size: 10mm; </p>
</body>
</html>
2.Relative lengths:
Relative length specify the length, which is relative to another length property .i.e relative to the window size or relative to the
element or parent element and
The relative length units are tabulated as follows:
Units Name Example
em ➢ It is relative to the font-size of the element.(1 em is equal to the current font size). P{font-size:1.5em;}
➢ 2em means 2 time the size of the current font).
➢ if an element is displaying with 12pts then 2em is 24pt.
➢ It is very useful unit in CSS it adopts automatically.
ex ➢ It is relative to the x-height of the font of the element. P{font-size:2ex;}
➢ It is rarely used.
➢ The x-height is determined by the height of the lowercase letter 'x'.
ch It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the P{font-size:6ch;}
integer "0" (zero).
rem It is the font-size of the root element P{font-size:6rem;}
vh It is relative to the height of the viewport. P{font-size:4vh;}
1vh = 1% or 1/100 of the height of the viewport.
vw It is relative to the width of the viewport. P{font-size:5vw;}
1vw = 1% or 1/100 of the width of viewport
vmin It is relative to the smaller dimension of the viewport. P{font-size:vmin;}
1vmin = 1% or 1/100 of the viewport's smaller dimension.
vmax It is relative to the larger dimension of the viewport. P{font-size:vmax;}
1vmax = 1% or 1/100 of the viewport's larger dimension.
% It is used to define the measurement as a percentage that is relative to another value. P{font-size:30%;}
<html>
<head>
<style>
body{
text-align: center;
}
p{
line-height: 0.1cm;
color: blue;
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style = "font-size: 2em;" > It has a font-size: 2em; </p>
<p style = "font-size: 8ex;" > It has a font-size: 8ex; </p>
<p style = "font-size: 6ch;" > It has a font-size: 6ch; </p>
<p style = "font-size: 4rem;" > It has a font-size: 4rem; </p>
<p style = "font-size: 4vw;" > It has a font-size: 4vw; </p>
<p style = "font-size: 10vh;" > It has a font-size: 10vh; </p>
<p style = "font-size: 10vmin;" > It has a font-size: 10vmin; </p>
<p style = "font-size: 8vmax;" > It has a font-size: 8vmax; </p>
<p style = "font-size: 400%;" > It has a font-size: 400%; </p>
</body>
</html>
<!DOCTYPE html>
Color values in CSS: <html>
1. Color values using color Keywods: <head>
2. Color values using RGB values <style>
3. Color values in Hexadecimal #p1 {background-color: blue;}
1.Color Keywords: Predefined Color Names #p2 {background-color: red;}
➢ In this method colors will be specified using the #p3 {background-color: coral;}
Predefined Color names called keywords. #p4 {background-color: brown;}
➢ 140 color names are predefined in the HTML and </style>
CSS color specification. </head>
➢ For example: blue, red, coral, brown, etc: <body>

<h2>Predefined Color Names</h2>


#p1 {background-color: blue;} <p>140 color names are predefined in the HTML and
#p2 {background-color: red;} CSS color specification. These are just some of
#p3 {background-color: coral;} them.</p>
#p4 {background-color: brown;}
<p id="p1">Blue</p>
<p id="p2">Red</p>
<p id="p3">Coral</p>
<p id="p4">Brown</p>

</body>
</html>
2.RGB Colors
➢ An RGB color value is specified with the rgb() function, which has the following syntax:
rgb(red, green, blue)
➢ Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255
or a percentage value (from 0% to 100%).
➢ For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others
are set to 0.
➢ Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

#p1 {background-color: rgb(255, 0, 0);} /* red */


#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
#p4 {background-color: rgb(192, 192,192);} /* Gray */

RGB Colors in percentage:


#p1 {background-color: rgb(100%, 0%, 0%);} /* red */
#p2 {background-color: rgb(0%, 100%, 0%);} /* green */
#p3 {background-color: rgb(0%, 0%, 100%);} /* blue */
#p4 {background-color: rgb(75%, 75%,75%);} /* Gray */
3.Hexadecimal Colors
➢ A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers
specify the components of the color.
➢ All values must be between 00 and FF.
➢ For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others
are set to 00.
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
#p4 {background-color: #ffff00 ;} /* yellow */
#p5 {color: #ff00ff ;} /* Cerise */
CSS Font Properties
In CSS the text’s appearance can be modified in multiple ways like selecting the font style, font family,
font color, font size, etc. As the correct use of font has a great impact on the text and the reader’s
experience, therefore CSS provides numerous font properties that can be used to customize the look
of fonts. This write-up will target the following font properties:
•font-family
•font-style
•font-variant
•font-size
•font-weight
•font shorthand
CSS Font properties:
➢ CSS Font property is used to control the look of texts.
➢ By the use of CSS font property you can change the text size, color, style and to make text bold or
underlined.
These are some important font attributes:
1.CSS Font color: This property is used to change the color of the text: {color:red;}
2.CSS Font family: This property is used to change the face of the font.{font-family:Arial,veranda,san-serif;}
3.CSS Font size: This property is used to increase or decrease the size of the font. {font-size:9px;}
4.CSS Font style: This property is used to make the font bold, italic or oblique {font-style:italic;}
5.CSS Font variant: This property creates a small-caps effect{font-variant:small-caps;}
6.CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.
The value of weight is from 100 to 900.We can give bold,bolder or notmal.{font-weight:bold;}
1.CSS Font Color:
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }

2.CSS Font size: font-size property:


body {
font-size: 100%;
}
Example: Output

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
2) CSS Font Family: font-family property
➢ In CSS, we use the font-family property to specify the font of a text.
➢ CSS font family can be divided in two types:
1. Generic family:
➢ A group of family names with uniform appearance
➢ It includes Serif, Sans-serif, and Monospace,Cursive,Fantacy.
2. Font family: It specifies the font family name like Arial, New Times Roman etc.

1.In CSS there are five generic font families:


1.Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2.Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3.Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4.Cursive fonts imitate human handwriting.
5.Fantasy fonts are decorative/playful fonts.

.p1 {
font-family: "Times New Roman", Times, serif;
}
Generic Font Families
Types of Generic Font Family

Generic Font Description Examples of Font Names


Family
Serif Serif fonts have a small stroke at the edges of Times New Roman
each letter. They create a sense of formality and Georgia
elegance Garamond

Sans-serif Sans-serif fonts have clean lines (no small strokes Arial
attached). They create a modern and Verdana
minimalistic look. Helvetica

Monospace Monospace fonts - here all the letters have the Courier New
same fixed width. They create a mechanical Lucida Console
look. Monaco

Cursive Cursive fonts imitate human Brush Script MT


handwriting. Lucida Handwriting

Fantasy Fantasy fonts are decorative/playful Copperplate


fonts. Papyrus
Output:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
H2{font-family : arial;}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
<h2>This heading is shown in arial.</h2>
</body>
</html>
The CSS Font Shorthand's:
➢ To shorten the code, it is also possible to specify all the individual font properties in one property.
➢ All the font rules or font related properties into one rule.
The font property is a shorthand property order to write in CSS rule:
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family

Example:
p{
color:red; Example: Font short hand:
font-style : italic;
font-weight : bold; P{ font : red italic bold 30px arial }
font-size : 30px;
font-family : arial;
}
3) CSS Font Size: font-size prpoerty
CSS font size property is used to change the size of the font.

Font Size Value Description


xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.


medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.


Output
Example of Font-size:
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>
4) CSS Font Style: font-style property
➢ CSS Font style property defines what type of font you want to display.
➢ It may be italic, oblique, or normal.
<html>
<head>
<style> Output
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
5) CSS Font Variant: font-variant property
CSS font variant property specifies how to set font variant of an element.
It may be normal and small-caps.

<!DOCTYPE html> Output


<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
6) CSS Font Weight: font-weight property
➢ CSS font weight property defines the weight of the font and specify that how bold a font is.
➢ The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200..... upto 900).
Output
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
Text Properties in CSS
➢ The color property is used to set the color of a text.
➢ The direction property is used to set the text direction.
➢ The letter-spacing property is used to add or subtract space between the letters that
make up a word.
➢ The word-spacing property is used to add or subtract space between the words of a
sentence.
➢ The text-indent property is used to indent the text of a paragraph.
➢ The text-align property is used to align the text of a document.
➢ The text-decoration property is used to underline, overline, and strikethrough text.
1.Text Color
The color property is used to set the color of the text. The color is specified by:
•a color name - like "red"
•a HEX value - like "#ff0000" Example:
•an RGB value - like "rgb(255,0,0)" body {
color: blue;
}

h1 {
color: green;
}
Example:
1.Text Color and Background Color: <html>
<head>
In this example, we define both the background-color property and <style>
the color property: body {
background-color: lightgrey;
body {
color: blue;
background-color: lightgrey;
}
color: blue;
h1 {
}
background-color: black;
h1 {
color: white;
background-color: black;
}
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a
blue text.</p>
<div>This is a div.</div>
</body>
</html>
2.Text Alignment: text-align property
➢ The text-align property is used to set the horizontal alignment of a text.
➢ A text can be left or right aligned, centered, or justified.
➢ left alignment is default
The following Example shows center aligned, and left and right
aligned text:
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 { text-align: right; }
<html> Output:
<head> Example
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>

<p>The text-align: justify; value stretches the lines so that


each line has equal width (like in newspapers and magazines).</p>

<div>
In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since. 'Whenever
you feel like criticizing anyone,' he told me, 'just remember that all
the people in this world haven't had the advantages that you've had.'
</div>

</body> </html>
3.Text Direction: direction property Example:
➢ The direction property specifies the text direction/writing direction <html>
<head>
within a block-level element.
<style>
➢ Set the text direction to "right-to-left“ p.rtl {
➢ Default is left-to-right direction: rtl;
}
</style>
p.rtl { </head>
<body>
direction: rtl;
} <h1>The direction Property</h1>

<p>This text goes from left to right.


This is default.</p>
Output:
<p class="rtl">This text goes from
right to left.</p>

</body>
</html>
4.Text Decoration: text-decoration-line property
➢ Add a Decoration Line to Text
➢ The text-decoration-line property is used to add a decoration line to text.
➢ Tip: You can combine more than one value, like overline and underline to
display lines both over and under a text.

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}
5.Text Transformation: text-transform property
➢ The text-transform property is used to specify uppercase and lowercase letters in a text.
➢ It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
<html> Example for text transformation
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase { Output
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Using the text-transform property</h1>

<p class="uppercase">This text is transformed to uppercase.</p>


<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

</body>
</html>
<html> 6.Text Indentation
<head> The text-indent property is used to specify the indentation of the first line of a text:
<style> Example:
p{ p {
text-indent: 50px;
text-indent: 50px;
}
h1 {
}
text-indent: 50px;
}
p#p2 { output
text-indent: -5px;
}
</style>
</head>
<body>
<h1>Using text-indent</h1>

<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. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'</p>

<p id="p2">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind
ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't
had the advantages that you've had.'</p>
</body>
</html>
CSS for Lists
➢ There are various CSS properties that can be used to control lists
➢ Lists can be classified as ordered lists and unordered lists .
➢ In ordered lists, marking of the list items is with alphabet and numbers, whereas in unordered lists, the
list items are marked using bullets.

The CSS list properties allow you to:


•Set different list item markers for ordered lists
•Set different list item markers for unordered lists
•Set an image as the list item marker
•Add background colors to lists and list items
1.Different List Item Markers
➢ The list-style-type property specifies the type of list item marker.
➢ list-style-type: none | disc |circle |square |decimal | decima-leading-zero | lower-alpha | upper-alpha | lower-latin|
upper-lattin| lower-roman | upper-roman | lower-geek | inherit
The following example shows some of the available list item markers:
2.An Image as The List Item Marker
➢ The list-style-image property specifies an image as the list item marker
Example: ul {
list-style-image: url('sqpurple.gif’);
}
3.Position The List Item Markers
➢ The list-style-position property specifies the position of the list-item markers (bullet points).
➢ "list-style-position: outside;" means that the bullet points will be outside the list item. The start of each
line of a list item will be aligned vertically.
➢ This is default:

➢ "list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it
will be part of the text and push the text at the start:
List - Shorthand property
➢ The list-style property is a shorthand property.
➢ It is used to set all the list properties in one declaration
▪ list-style-type
▪ list-style-position
▪ list-style-image

ul
{ ul {
list-style-type : square; list-style : square inside url("sqpurple.gif");
list-style-position : inside; }
list-style-image :url(sqpurple.gif”);
}
CSS box model:
➢ Box model is a term referred to the rectangular boxes placed around every element in the web page.
➢ Every element in XHTML can be consider a BOX and all the properties of the box will be applied to the XHTML
element.
➢ Using the Box model we can applies the width, height, border, margin etc
The specific area that an element box may occupy on a web page is measured as follows-

Size of the box Properties of CSS

Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top +


margin-bottom
Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
The CSS box model contains the different properties in CSS. These are listed below.
1. Border 3. Padding
2. Margin 4. Content

1.Content
➢ The content area is the area containing the real content of the element.
➢ It often has a background, a color or an image and is located inside the content edge;
➢ its dimensions are the content width and the content height.

CSS Code:
This is content
P{width:100px; height:50px;} 50px
area
XHTML Code:
<p> This is content area</p> 100px
2.Padding
➢ The padding area is the space between the content of the element and its border.
➢ Negative values are not allowed.
➢ This property sets the padding space on all sides of an element.

CSS code:
p { padding:30px 20px 30px 20px;}
3.Border Field
➢ It is a region between the padding-box and the margin. Its proportions are determined by the border-
width and border-height of the boundary.

CSS Code:
P{ border: 5px solid blue ;} This is content
XHTML Code: area
<p> This is content area</p>

4.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.

CSS Code:
P{ margin : 30px} This is content
XHTML Code: area
<p> This is content area</p>
Let’s create a box on the screen and add a border around it:
Adding Padding and Margin
Setting Individual Margins
We can set the specific margin sizes by using these four properties:
margin1

P{ margin-top: 30px; Shorthand method:


margin-right:50px;
margin-bottom: 20px; P{ margin : 30px 50px 20px 20px ; }
margin-left : 20px;
}
Setting Individual Padding
We can set specific padding sizes by using these four properties:
Setting Individual Borders

shorthand method for width ,style ,color

single-line border shorthand,


Border-style values :
Value Description
none Default value. Specifies no border
hidden The same as "none", except in border conflict resolution for table
elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color
value
ridge Specifies a 3D ridged border. The effect depends on the border-color
value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color
value
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
border-style values:

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset |
outset

p{
width: 300px;
height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

<p id="dot">This is a paragraph(dotted)</p>


<p id="sol">This is a paragraph(solid)</p>
Example:
p{
width: 300px;
height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

Html code:
<p id="dot">This is a paragraph(dotted)</p>
<p id="sol">This is a paragraph(solid)</p>
<div >and <span> tags
<Div> tag:
➢ Div tag is used for defining a section in the web page.
➢ Div (short for division) divides the contents into individual sections.
➢ Each section can then have its own formatting as specified by the CSS.
➢ Div is a block-level container, meaning that there is line feed after the <div>
➢ Usigning <di> tag we can group the elements togrther and format them with CSS.
➢ Example menu section in one <div> and content section into other <div>
<html>
<head>
<style type=“text/CSS”>
div.menu{ background-color:orange;text-align:right; border:2px solid black;}
div.main{ background-color:orange;text-align:right; border:2px solid black;}
</style>
</head>
<body>
<div class=“menu”>
<a href=“ x1.html”> HOME</a>
<a href=“ x2.html”> CONTACT</a>
<a href=“ x3.html”> ABOUT</a>
</div>
<div class=“main”>
<h5> Contentw Articals</h2>
<p> This paragraph contains the contetns</p>
</div>
</body> </html>
Definition and Usage:
➢ The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
➢ The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
➢ The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline
element.

Example of <span> tag


<!DOCTYPE html> Output
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has


<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.
</p>

</body>
</html>
Background-image:
➢ The background-image property sets one or more background images for an element.
➢ By default, a background-image is placed at the top-left corner of an element, and repeated both vertically
and horizontally.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>

</body>
</html>
background-repeat
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.

Repeated the image only vertical:repeate-y


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: repeat-y;
}
</style>
</head>
<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>
</html>
Repeated the image only horizontally: repeate-x

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>
</html>
Repeated the image both the directions : repeate

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: repeat;
}
</style>
</head>
<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>
</html>
No Repeated the image : no-repeate

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is not repeated. The image will
only be shown once.</p>

</body>
</html>
background-position property
➢ The background-position property sets the starting position of a background image.
➢ The values to this property are : [top, center, bottom],[left, center, right]
➢ By default, a background-image is placed at the top-left corner of an element, and repeated
both vertically and horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>

<h1>The background-position Property</h1>


<p>Here, the background image will be positioned in the
center of the element (in this case, the body element).</p>

</body></html>
Examples:
background-position property

body {
Value Description
background-image: url('w3css.gif');
left top If you only specify one background-repeat: no-repeat;
left center keyword, the other value will background-position: center top;
left bottom be "center" }
right top
right center body {
right bottom background-image: url('w3css.gif');
center top background-repeat: no-repeat;
center center background-position:left top;
center bottom }
The background-size property:
➢ The background-size property specifies the size of the background images.
➢ There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and
"contain")

<style>
#example1 {
border: 2px solid black;
padding: 25px;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example2 {
border: 2px solid black;
padding: 25px;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
Background image display size properties

auto Default value. The background image is displayed in its


original size
cover Resize the background image to cover the entire container,
even if it has to stretch the image or cut a little bit off one of
the edges
contain Resize the background image to make sure the image is fully
visible

You might also like