KEMBAR78
Unit2 CSS | PDF | Html | Html Element
Scribd
Upload
8 views83 pages

Unit2 CSS

Uploaded by

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

Unit2 CSS

Uploaded by

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

Web Technology

Sub code:BCS502

Unit - 2
Cascading Style
Sheets (CSS)
Prof. Anand Singh
Unit 2

CSS: Creating Style Sheet, CSS Properties, CSS Styling


(Background, Text Format, Controlling Fonts), Working with
block elements and objects, Working with Lists and Tables,
CSS Id and Class, Box Model (Introduction, Border properties,
Padding Properties, Margin properties)
CSS Advanced (Grouping, Dimension, Display, Positioning,
Floating, Align, Pseudo class, Navigation Bar, Image Sprites,
Attribute sector), CSS Color, Creating page Layout and Site
Designs.
What is CSS?
▪ CSS, which stands for Cascading Style Sheets, is a style sheet language
used for describing the presentation of a document written in a markup
language like HTML.

▪ CSS defines layout of HTML documents. For example, CSS covers


Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.
Importance of CSS
▪ CSS defines HOW HTML elements are to be displayed.
▪ Styles are normally saved in external css file with .css extension.
▪ External style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one single file.
▪ Advantages :
• Improves Website Presentation
• External CSS makes Updates Easier and Smoother
• External CSS helps Web Pages Load Faster
▪ Disadvantages :
• Browser Dependent
Basic Syntax of CSS
▪ A CSS rule has two main parts: a selector, and one or more declarations
Selector Declaration 1 Declaration 2

h1 {color:blue; font-size: 12px;}


property value
▪ The selector can be HTML element, id or class. property value
▪ Each declaration consists of a property and a value.
▪ The property is the style attribute you want to change. Each property has a
value.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
Simple selectors or General Selector:
select elements based on name, id, class
1.Element Selector
The element selector selects HTML elements based on the element name.
<!DOCTYPE html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected
by the style.</p>
</body>
</html>
The “id” selector
▪ The id selector is used to specify a style for a single, unique element.
▪ The id selector uses the id attribute of the HTML element, and is defined with a
"#“ in css.
▪ The style rule below will be applied to the element with id="para1":

HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }

<h1> Output
How are you Hello Friends
</h1> How are you
The “class” selector
▪ The class selector is used to specify a style for a group of elements.
▪ The class selector uses the HTML class attribute, and is defined with a ".“ in css.

HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you
Different ways to write CSS
▪ There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
1) Inline Style
▪ It is possible to place CSS right in your HTML code, and this method
of CSS usage is referred to as inline css.
▪ Inline CSS has the highest priority out of external, internal, and
inline CSS.
▪ This means that you can override styles that are defined in external
or internal by using inline CSS.
▪ If you want to add a style inside an HTML element all you have to
do is specify the desired CSS properties with the style HTML
attribute.
▪ Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
2) Internal Style Sheet
▪ This type of CSS is only for Single Web Page.
▪ When using internal CSS, we must add a new tag, <style>, inside
the <head> tag.
▪ The HTML code below contains an example of <style>'s usage.
HTML
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>
3) External Style Sheet
▪ When using CSS it is preferable to keep the CSS separate from your
HTML.
▪ Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS).
▪ External CSS is a file that contains only CSS code and is saved with a
".css" file extension.
▪ This CSS file is then referenced in your HTML using the <link>
instead of <style>.
3) External Style Sheet (Cont.)
▪ Example :

Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” type=“text/css” }
href=“test.css”> p
</head> {
<body> color : blue;
}
<p> Hello Friends </p>
<p id=“para1”> How are you? </p> Output
Hello Friends
</body> How are you?
</html>
3) External Style Sheet (Cont.)
▪ Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have,
simply have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few
changes in a single CSS file.
Background Property

Property Name

▪ Background Color (background-color)


▪ Background Image (background-image)
▪ Background Image Repeat (background-repeat)
▪ Fixed Background Image (background-attachment)
▪ Background Image Positioning (background-position)
Background Color
▪ The background-color property specifies the background color of
an element.
▪ The background color of a page is defined in the body selector:
▪ Below is example of CSS backgrounds
test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
Background Image

▪ The background-image property specifies an image to use as the


background of an element.
▪ For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
Background Image Repeat
▪ You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}

repeat-y no-repeat
repeat-x
Fixed Background Image

▪ The background-attachment property sets whether a background


image is fixed or scrolls with the rest of the page.
▪ For Example,

test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
Background Image Positioning
▪ The background-position property sets the starting position of a
background image.
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
}

30% 30%
CSS Font
▪ CSS font properties define the font family, boldness, size, and the
style of a text.
Property Name

1. Font Color (color)


2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
CSS Font (Cont.)
h4{
▪ Font Color color : red;
• Set the text-color for different elements }
▪ Font Family h4{
• The font family of a text is set with the font-family : sans-serif;
}
font-family property.
h4{
▪ Font Size font-size: 120%;
• The font-size property sets the size of the font-size : 10px;
text. font-size : small;
• font-size : 120% font-size : smaller;
• font-size : 10px; font-size : x-small;
• font-size : x-large; font-size : xx-small;
font-size : large;
font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
CSS Font (Cont.)
▪ Font Style h4{
• The font-style property is mostly used to font-style: italic ;
}
specify italic text.
▪ Font Weight h4{
• The font-weight property sets how thick or font-weight : 300;
thin characters in text should be displayed. font-weight : bolder;
font-weight : lighter;
▪ Font Variant }
• The font-variant property specifies whether
or not a text should be displayed in a small- h4{
caps font. font-variant: small-caps;
• font-variant : small-caps;
}
CSS Text Property
 CSS Text properties allows you to control the spacing, decoration, and
alignment of your text.
Property Name

1. Text Decoration (text-decoration)


2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
CSS Text Property (Cont.)
▪ Text Decoration
• The text-decoration property is used to set or h4{
text-decoration : line-through;
remove decorations from text.
text-decoration : overline;
• The text-decoration property is mostly used text-decoration : underline;
to remove underlines from links for design text-decoration : none;
purposes. }
▪ Text Indent
• The text-indentation property is used to h4{
specify the indentation of the first line of a text-indent : 20px;
text-indent : 30%;
text.
}
▪ Text Align h4{
• The text-align property is used to set the text-align : right;
horizontal alignment of a text. text-align : justify;
text-align : left;
text-align : center;
}
CSS Text Property (Cont.)
▪ Text Transform h4{
• The text-transform property is used to text-transform : capitalize;
specify uppercase and lowercase letters in a text-transform : uppercase;
text. text-transform : lowercase;
}
▪ White Space
• The white-space attribute allows you to h4{
prevent text from wrapping until you place a white-space : nowrap;
break <br /> into your text. }

▪ Word Spacing
• With the CSS attribute word-spacing you are h4{
able to specify the exact value of the spacing word-spacing : 10px;
between your words. Word-spacing should }
be defined with exact values.
CSS Text Property (Cont.)
▪ Letter Spacing h4{
• With the CSS attribute letter-spacing you are letter-spacing : 3px;
able to specify the exact value of the spacing }
between your letters. Letter-spacing should
be defined with exact values.
▪ Line Height
• The line-height attribute will set the height
of the line in the page. h4{
line-height : 10px;
}
CSS Border
▪ The CSS border properties allow you to specify h4{
the style and color of an element's border. border : 1px solid red;
▪ Border Style Types }
• The border-style property specifies what kind of h4{
border to display. border-style : solid;
▪ Border Width border-style : dotted;
• The border-width property is used to set the border-style : double;
width of the border. }
▪ Border Color h4{
• The border-color property is used to set the border-width : 7px;
color of the border. }
• Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example h4{
of each of these types. border-color : red;
}
▪ The top, right, bottom, and left border can be
changed independently using separate h4{
properties. border-top : 1px solid red;
}
CSS Padding
▪ The CSS padding properties define the space h4{
between the element border and the padding : 10px;
element content. }

▪ The top, right, bottom, and left padding can


h4{
be changed independently using separate
padding-top : 10px;
properties. padding-right : 20px;
▪ A shorthand padding property can also be padding-bottom : 30 px;
padding-left : 40 px;
used, to change all padding at once.
}

h4{
padding : 10px 20px 30px 40px;
}
CSS Margin
▪ The CSS margin properties define the space h4{
around elements margin: 10px;
}

▪ The top, right, bottom, and left margin can


h4{
be changed independently using separate margin -top : 10px;
properties. margin -right : 20px;
margin -bottom : 30 px;
margin -left : 40 px;
▪ A shorthand margin property can also be }
used, to change all margins at once.

h4{
margin : 10px 20px 30px 40px;
}
CSS Dimension
height and width
The height and width properties are used to set the height and width of an element.
Note : The height and width properties do not include padding, borders, or margins!
They set the height/width of the area inside the padding, border, and margin of the
element!
CSS height and width Values:

The height and width properties can have the following values:
•auto - This is default. The browser calculates the height and width
•length - Defines the height or width .
•% - Defines the height or width in percent of the containing block
•inherit - The height or width will be inherited from its parent value

div {
height: 200px;
width: 330px;
background-color: blue;
}
The Box Model

 The CSS Box Model is a fundamental concept in web design that defines
how elements are structured and rendered on a webpage.

 The CSS box model is a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content

 All HTML elements can be considered as boxes.


 The box model allows us to place a border around elements and space
.elements in relation to other elements.

 "box model" is used when talking about design and layout.


The Box Model (Cont)
Margin
▪ The image below illustrates the box model:
Border
Padding
Content
The Box Model (Cont)
margin-top
border-top
padding-top

padding-right

margin-right
border-right
padding-left
margin-left
border-left

Content

padding-bottom
border-bottom
margin-bottom
Example of Box Model Mystyle.css
Box.html .box{
<!DOCTYPE html> background-color: aqua;
<html lang="en"> border: 15px solid red;
<head> width: 300px;
<link rel="stylesheet" height: 100px;
href="mystyle.css"> padding: 40px;
</head> margin: 10px;
<body> }
<div class="box">
Box1 output
</div>
<div class="box">
Box2
</div>

</body>
</html>
The Box Model (Cont)
Calculating the Total Size of an Element
 By default, when you set the width and height of an element, those values apply
only to the content area.
 To calculate the total width and height of an element, you must also include
the padding and borders.
 The formula for the total size of an element is:

Total element width = width + left padding + right padding + left border +
right border

Total element height = height + top padding + bottom padding + top border +
bottom border

Note: The margin property also affects the total space that the box will take up on
the page, but the margin is not included in the actual size of the box. The box's total
width and height stops at the border.
The box-sizing Property
 As adding padding and borders to an element can cause it to become larger than the size you
specified. Which is default value of box-sizing property content-box

Box-sizing:content-box
 To address this, CSS provides the box-sizing property value border-box.
box-sizing: border-box:
 By using this property the padding
and borders are included inside the
specified width and height.
 This makes it much easier to size
elements accurately and consistently,
as the total size of the element
remains what you set it to be
CSS List:
 A CSS list is a way to style the appearance of lists on a web page, such as bullet points or
numbered lists, using Cascading Style Sheets (CSS).

ordered list:
 An ordered list is created in HTML using the <ol> tag (ordered list) and each item is
placed inside an <li> (list item) tag.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Styling with CSS:


You can change the appearance of the numbers using the list-style-type property on
the <ol> tag.
1. Changing the Numbering Style
You can use different values for list-style-type attribute to change the number format.

Value Description Example


Normal numbers
decimal 1, 2, 3
(default)
Uppercase Roman
upper-roman I, II, III
numerals
lower-alpha Lowercase letters a, b, c
upper-alpha Uppercase letters A, B, C
lower-latin Same as lower-alpha a, b, c
HTML
CSS:
<ol>
ol {
<h1>Programming list:</h1>
list-style-type: upper-roman;
<li >Java</li>
}
<li>C++</li>
<li>c</li>
<li>python</li>
</ol>
2.list-style-position:
 Specifies the position of the list-item.

li { li {
list-style-position: outside; list-style-position: inside;
} }
Unordered list :

To style unordered lists (bulleted lists), we can change the list item marker.

HTML CSS:
<ul> ul {
<h1>Food list</h1> list-style-type: value;
<li>Pizza</li> }
<li>Burger</li>
<li>Sandwich</li>
<li>Ice-cream</li>
</ul>

The value can be:


•disc: (default) - Filled circle marker
•circle: hollow circle marker
•square: a filled square marker
•none: No marker (remove bullets)
list-style-image:
 Specify an image as the list-item.

ul {
list-style-image: url(‘a.jpeg');
}

output
CSS Tables
1.CSS Table Borders:
The CSS border property is used to specify the width, style, and color of table borders.

border-width - sets the width of the border HTML


border-style - sets the style of the border (required) <table>
border-color - sets the color of the border <tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
CSS:
<tr>
table, th, td {
<td>Rahul</td>
border-style: double;
<td>Mishra</td>
border-width: 1px;
</tr>
border-color: blueviolet;
<tr>
}
<td>Mohit</td>
<td>Jain</td>
</tr>
</table>
2.CSS border-collapse: property sets whether table borders should collapse into a single
border.
table {
border-collapse: collapse;
}

=>hovering on the row its color will change to coral

tr:hover {
background-color: coral;
}
=>Background color of table heading will be brown

th{
background-color: brown;
color:rgb(167, 174, 21)
}
CSS display Property
The display property is an important CSS property for controlling layout.
It specifies whether an HTML element is treated as a block or an inline element.

Every HTML element has a default display value, depending on what type of element it is.

The default display value for most elements is block or inline.


The display property is used to change the default display behavior of HTML elements.

Block-level Elements
 A block-level element ALWAYS starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).

Examples of block-level elements:


•<header>
•<div> •<footer>
•<h1> - <h6> •<section>
•<p>
•<form>
Inline Elements
 An inline element DOES NOT start on a new line and only takes up as much width as necessary.
Examples of inline elements:
• <span>
• <a>
• <img>

Common display Values


inline Displays an element as an inline element

block Displays an element as a block element

inline-block Displays an element as an inline-level block


container. The element itself is formatted as an
inline element, but you can apply height, width,
padding, and margin values

none The element is completely hidden from the document


flow (does not take up any space).
Changing an inline element to a block element, or vice versa
Example : Change <div> block level elements to inline, to create a horizontal
menu.

style.css
<!DOCTYPE html> #b1{
<html> width: 100px;
<head> height: 100px;
<link rel=“stylesheet” href=“style.css”> background-color: aqua;
</head> display: inline-block;
<body> }
<div id="b1"> #b2{
box1 width: 150px;
</div> height: 150px;
<div id="b2"> background-color: blueviolet;
box2 display:inline-block;
output
</div> }
</body>
</html>
Example2: Change <span> inline element to block level element
<!DOCTYPE html>
<html>
<head>
<style>
a{
background-color: bisque;
display: block;
}
</style>
</head>
<body>
<a href="">google</a>
<a href="">facebook</a>
</body>
</html> output
Positioning
 CSS positioning is about controlling the placement of elements within a web page.
 With CSS positioning, you can override the normal document flow.

CSS position Property


 The position property specifies the positioning type for an element.
 This property can have one of the following values:

•static - This is default


•relative
•fixed
•absolute
•sticky
Static:

 All HTML elements are positioned static by default.


 Static positioned elements are not affected by the top, bottom, left, and right
properties.
 Element is always positioned according to the normal flow of the page.

<html>
<head>
<style>
div {
position: static;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
This element has position: static;
</div>
</body>
</html>
output
position: relative
 An element with position: relative; is positioned relative to its normal position in the
document flow.
 Setting the top, right, bottom, and left properties will cause the element to be adjusted away
from its normal position.
 Other content will not be adjusted to fit into any gap left by the element.
Relative.html style.css
<!DOCTYPE html> .relative {
<html> position: relative;
<head> width: 300px;
</head> height: 200px;
<body> border: 3px solid red;
<div class="normal"> float: left;
This div element has position: static!! top: 300px;
</div> }
<div class="relative"> .normal{
This div element has position: relative!! width: 300px;
</div> height: 200px;
<div class="normal"> border: 5px solid green;
This div element has position: static!! float: left;
</div> top: 300px;
</body> }
</html>
Output
position: absolute
 An element with position: absolute; is positioned relative to the nearest positioned ancestor
(with position other than static).
 if an absolute positioned element has no positioned ancestors, it uses the browser body, and
moves along with page scrolling.

Absolute.html style.css
<!DOCTYPE html> #rel{
<html> width:200px;
<head> height: 300px;
<link rel=“stylesheet” href=“style.css”> border: 5px solid red;
</head> position: relative;
<body> background-color: aqua;
<div id="rel">box1 left:50px;
<div id="abs">box2</div> Output }
</div> #abs{
</body> width: 100px;
</html> height:100px;
border: 2px solid blue;
background-color: brown;
position: absolute;
top:40px;
}
position: fixed
 The element is positioned relative to the viewport (browser window).
 The top, right, bottom, and left properties are used set the final location of the element.
 Stays fixed in the same spot on the screen no matter where you are on the page.

Fixed.html style.css
<!DOCTYPE html> .fixed {
<html> width:200px;
<head> height: 100px;
<link rel=“stylesheet” href=“style.css”> border: 5px solid red;
</head> position: fixed;
<body> background-color: aqua;
<div class="fixed"> left:150px;
</div> }
</body>
</html> Output
position: sticky
 The element is positioned relative to its nearest scrollable ancestor (usually the
parent container).
 Fixed only within the parent container when scroll passes threshold.
Note: You must specify at least one of the top, right, bottom or left properties, for sticky positioning
to work.
style.css
<!DOCTYPE html>
.sticky {
<html>
position: sticky;
<head>
top: 0;
<link rel=“stylesheet” href=“style.css”>
padding: 5px;
</head>
background-color: blue;
<body>
border: 2px solid red;
<div class="sticky">I have position
}
sticky!</div> Output
<p>
</p>
</body>
</html>
Floating Property: float
 The float property specifies how an element should float within its container.

 It places an element on the left or right side of its container, allowing text and
inline elements to wrap around it.

 The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.

 This property can have one of the following values:

•left - The element floats to the left of its container


•right - The element floats to the right of its container
•none - Default. The element does not float and is displayed just where it occurs in the text
•inherit - The element inherits the float value of its parent

Note: The float property is often used to wrap text around images!

float: right
 The float: right value indicates that an element should float to the right within its
container.
floatright.html
Style.css
<!DOCTYPE html>
img {
<html>
float: right;
<head>
}
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<div>
<img src="image/c.jpg" alt=“flower" width="300" height="300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue
ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
Praesent convallis urna a lacus interdum ut hendrerit risus congue.
Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at
libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
dui eget tellus gravida </div>
</body> Output
</html>
float: left
The float: left value indicates that an element should float to the left within its container.
Floatleft.html
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“style.css”/> style.css
</head>
<body> img {
<div> float: left;
<img src="p.jpg" width="300" height="300"> }
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus imperdiet, nulla et
dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. sed nunc
venenatis imperdiet sed ornare turpis. Donec
vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non </div>
</body>
Output
</html>
CSS Align:
Horizontal & Vertical Align
Centering Elements
 you can center elements (horizontally, vertically, or both) with several methods,
depending on the type of element.
Center Align Block Elements
 Use margin: auto;, to horizontally center a block-level element
(like <div>).
 Also specify a width for the element, to prevent it from stretching out to the
edges of its container.

 Note: Center aligning has no effect on block-level elements if


the width property is not set (or set to 100%).
Example:
The <div> element is centered and has a width of 50% (and the remaining
space will be split equally between the left and right margins):

<!DOCTYPE html> style.css


<html> .center {
<head> margin: auto;
<link rel=“stylesheet” href=“style.css”/> width: 50%;
</head> border: 3px solid blue;
<body> padding: 10px;
<div class="center"> text-align: center;
<p>I am centered!text and center to browser!</p> }
</div>
</body>
</html>
Output
Center Align Text
 To center the text inside a block-level element, use text-align: center;.

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
}
</style>
</head>
<body>
<p>This text is centered.</p>
</body>
</html>
Center Align an Image

To center an image, set margin-left and margin-right to auto, and also


turn the image into a block element
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin:auto;
}
</style>
</head>
<body>
<img src="image/logo.jfif" alt=“flower" width="100" height="100">
</body>
</html>
Output
Pseudo class
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special
state of an element
common use for pseudo-classes:
 Style visited and unvisited links differently.

 Style an element when a user moves the mouse over it.


 Style an element when it gets focus

Syntax
Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class
name:

selector:pseudo-class-name
{
CSS properties
}
Pseudo-classes Used on Links
For HTML links, it is common to use the following pseudo-classes:

•:link- Styles unvisited links style.css


•:visited - Styles visited links /* unvisited link */
•:hover - Styles an link on mouse over a:link {
•:active - Styles an activated link color: red;
}
Link.html /* visited link */
<!DOCTYPE html> a:visited {
<html> color: green;
<head> }
<link rel=“stylesheet” href=“style.css”> /* mouse over link */
</head> a:hover {
<body> color: hotpink;
<a href=“http://google.com" target="_blank">This }
is a link</a> /* selected link */
</body> a:active {
</html> color: blue;
}
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names
are not case-sensitive.
Pseudo-classes Used on :focus on <input>

<!DOCTYPE html>
<html>
<head>
<style>
input:focus { Output
background-color: yellow;
}
Input:hover{
Background-color:red;
}
</style>
</head>
<body>
<form action=“ " method="get">
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS Pseudo-Elements
 A CSS pseudo-element is a keyword that can be added to a selector, to style a specific
part of an element.

 common use for pseudo-elements:

 Style the first letter or first line, of an element


 Insert content before or after an element
 Style the user-selected portion of an element

Syntax:
 Pseudo-elements are denoted by a double colon (::) followed by the pseudo-
element name:

selector::pseudo-element-name
{
CSS properties
}
CSS ::first-line Pseudo-element
 The ::first-line pseudo-element is used to add a special style to the first line of
a text.
Note: The ::first-line pseudo-element can only be applied to block-level elements.
<!DOCTYPE html>
style.css
<html>
p::first-line {
<head>
color: blue;
</head>
font-variant: small-caps;
<body>
font-size: 19px;
p>The first-line pseudo-element to add a special effect to the first
}
line of a text. Some more text. And even more, and more, and
more, and more, and more, and more, and more, and more, and
more, and more, and more, and more.</p>
</body> Output
</html>

CSS ::first-letter Pseudo-element


 The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
p::first-letter {
Output
color: red;
font-size: xx-large;
}
CSS ::before & CSS :: after Pseudo-element
 The ::before pseudo-element is used to insert some content before the content
of a specified element.
 Use the content property to specify the content to insert.

Example: Insert an image before and after the content of each <h1> and <h2>
element: h2::after {
h1::before { output content: url(smiley.gif);
content: url(smiley.gif); }
output
}

CSS ::selection Pseudo-element

 The ::selection pseudo-element is used to style the part of a text that is


selected by a user.
Example: Style the user-selected text with a red color, and a yellow background:
::selection {
color: red;
background: yellow;
} output
Assign Multiple Classes
▪ We can apply different class to same html element by giving space separated
class names in the class attribute:

Demo.html test.css
<html> . class1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head> . class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1> Output

</body>
How are you?
</html>
Grouping Selector or Multiple Selection
The grouping selector selects all the HTML elements with the same style definitions.
▪ We can apply same css to multiple selectors using comma separated selector
list, for example :

test.css
Demo.html p, h1
<html>
{
<head>
color : blue;
<link rel=“stylesheet” type=“text/css”
}
href=“test.css”>
</head>
<body>
Output
<p> Hello Friends </p> Hello Friends
<h1> How are you? </h1> How are you?
</body>
</html>
Combinators
 A combinator defines the relationship between two or more selectors.

 A CSS selector can contain more than one selector. Between the selectors, we can
include a combinator, to create a more specific selection.

 There are four different combinators in


CSS:
1. Descendant combinator (space)
2. Child combinator (>)
3. Next sibling combinator (+)
4. Subsequent-sibling combinator (~)

1. Descendant combinator (space) :

 The descendant combinator matches all elements that are descendants (children,
grandchildren, etc.) of a specified element.
Demo.html test.css
<html> div p{
<head> color: red;
<link rel=“stylesheet” href=“test.css”> }
</head>
<body>

<div>
Output
<p>this is child of div?</p>
<section>
<p>this is grand child of div</p>
</section>
</div>
<p>this is sibling of div</p>

</body>
</html>
Child Combinator (>):

The child combinator selects all elements that are direct children of a specified element.

Example : selects all <p> elements that are direct children of <div>:

childcombinator.html style.css
<html> div > p {
<head> background-color: red;
<link rel=“stylesheet” href=“style.css”> }
</head>
<body>
<div> Output
<p>this is direct child div</p>
<section>
<p>this is grad child.</p>
</section>
<p>this is direct child of div.</p>
</div>
<p>this is sibling of div</p>
</body>
</html>
Next Sibling Combinator (+)
 The next sibling combinator is used to select an element that is directly after a
specific element.
 Sibling elements must have the same parent element.

Example: selects the first <p> element that immediately follows a <div>, and
share the same parent:
style.css
<!DOCTYPE html> div + p {
<html> background-color: yellow;
<head> }
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<div>
<p>This is child of div.</p>
</div>
<p>This is sibling of div.</p> Output
<p>This is sibling of div.</p>
</body>
</html>
Subsequent-sibling Combinator (~)
 The subsequent-sibling combinator selects all elements that are next siblings of a
specified element.
Example:
selects all <p> elements that are next siblings of <div>, and share the same parent:

<!DOCTYPE html> <style>


<html> div ~ p {
<head> background-color: yellow;
<link rel=“stylesheet” href=“style.css”> }
</head>
<body>
<div>
<p>This is child of div.</p>
</div> Output
<p>This is sibling of div.</p>
<p>This is sibling of div.</p>
</body>
</html>
Attribute Selectors
 attribute selectors are used to select and style HTML elements with a specific
attribute or attribute value, or both.

[attribute] Selector
 The [attribute] selector is used to select elements with a specific attribute.
 example selects all <a> elements with a target attribute:
<!DOCTYPE html> style.css
<html> a[target] {
<head> background-color: yellow;
</head> }
<body>
<a href="https://google.com"></a>
<a href=" https://facebook.com " target="_blank"> facebook </a>
</body>
</html> Output
[attribute="value"] Selector
 The [attribute="value"] selector is used to select elements with a specific attribute with an
exact value.

Example: selects all <a> elements with a target="_blank" attribute:

Attribute.html Style.css
<!DOCTYPE html> a[target ="_blank" ] {
<html> background-color:green ;
<head> }
</head>
<body>
<a href="https://google.com"></a>
<a href=" https://facebook.com " target="_blank"> facebook </a>
</body>
</html>
Output
Navigation Bars
 navigation bars are an important component of web design. Navigation bars helps users
to easily navigate between different sections of a website.
 Navigation bars are typically built with HTML list elements ( <ul> and <li>), and then
styled with CSS to get a great look.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<div id="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Department</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
style.css ul li a{
ul{ text-decoration: none;
background-color: black; color:white;
overflow: auto; padding: 25px;
height: 50px;
}
} a:hover{
ul li{ background-color: brown;
float:left; }
margin-top: 15px;
list-style-type: none;
}

Output
Image Sprites
 An image sprite is a collection of various small images put into one larger image file,
called a "sprite image".
 instead of downloading each image separately, the browser downloads the single
sprite image file, which will reduce the number of server requests and reduce
bandwidth usage. Style.css
Imagesprite.html #save{
<!DOCTYPE html> height: 160px;
<html lang="en"> width: 60px;
<head> background-image:
<link rel="stylesheet" url("image/imagesrpite.jpg");
href=“style.css"> background-repeat: no-repeat;
</head> background-size: 300px;
<body>
<h2>image sprites</h2> }
<div id="save"> #search{
<div id="search"></div> height: 150px;
</div> width: 60px;
</body> Output background-image:
</html> url("image/imagesrpite.jpg");
background-repeat: no-repeat;
background-size: 350px;
background-position: 0px -
10px;
Website Layout
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="navigati.css">
</head>
<body>
<div class="header">
<h1>My Header</h1>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul> <div class="footer">
<div id="main"> <h1>My footer</h1>
<div id="section1">section1</div> </div>
<div id="section2">section2</div> </body>
<div id="section3">section2</div> </html>
</div>
* { ul li a { #section2{
margin: 0; float: left; width: 300px;
padding: 0; color: #f1f1f1; height: 500px;
box-sizing: border- padding: 34px; border: 3px solid
box; text-decoration: none; red;
} } float: left;
/* header section */ ul li a:hover { }
.header { background-color: #section3{
background-color: brown; width: 300px;
#f1f1f1; } height: 500px;
padding: 10px; /* main section */ border: 3px solid
text-align: center; #main{ red;
} background-color: float: left;
/*navigation bar*/ #dddddd; }
ul { height: 600px; /* footer section */
overflow: auto; } .footer {
list-style-type: none; #section1{ background-color:
margin: 0; width: 300px; #f1f1f1;
padding: 0; height: 500px; padding: 10px;
background-color: border: 3px solid red; text-align:
#333333; float: left; center;
} } }
Output

You might also like