0% found this document useful (0 votes)

40 views49 pages

CSS Cascading Style Sheet

CSS, or Cascading Style Sheets, is a style sheet language used for formatting HTML documents, allowing developers to apply styles across multiple pages with a single file. It was developed in 1995, with various levels published over the years, becoming a W3C standard with HTML5. The document covers CSS syntax, types (internal, external, inline), selectors, color properties, and text properties, providing examples for each.

Uploaded by

Safwan Samad

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

0% found this document useful (0 votes)

40 views49 pages

CSS Cascading Style Sheet

Uploaded by

Safwan Samad

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/ 49

Cascading Style Sheet

CSS or Cascading style sheet is the style sheet language of web, used to style or formatting of an HTML
document.

Before we had CSS, all of the styling of HTML was embedded directly in the html document- like, attributes
width or bgcolor (background color) or in the form of presentational tags like font, center, strike etc.
Using separate style sheet for an entire site, a developer can apply styles across a whole site while updating a
single css file.

Css was Developed by Hakon Wium Lie of MIT in 1995. In 1996, level 1 of CSS was published, level 2
comes in 1998 and level 3 ( CSS3) in 2009 with HTML5.

With HTML5, CSS has become the W3C standard for controlling visual presentation of web pages. W3C
is celebrating 20th anniversary of css in 2016 as level 1 of css was published 20 years ago on 17 Dec 1996.

CSS Syntax

Type of CSS
Type Explanation
Internal CSS CSS Code is written inside <style> tag in head. Recommended for single page only.
CSS code is written in separate file with .css extension and <link> element is used to
External CSS
attach external css with html document. Used for multipage websites.
Inline CSS CSS code is written inside html tag directly, in style attribute.

Internal CSS
Use internal stylesheet when you are working on single page website. An internal stylesheet is defined using the
<style> tag and goes in the head section of an HTML document.

The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css". But
in HTML5, type is optional.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<meta charset="UTF-8">
<style >
p{color: green}
h1{ text-align:center; color:red}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>The text in this paragraph will be green.</p>
<p>This paragraph is also green.</p>
</body>
</html>

External CSS
Use an external stylesheet when you want to apply one style to many pages. If you make one change in an
external stylesheet, the change is universal on all the pages where the stylesheet is used.
An external stylesheet is declared in an external file with a .css extension. It is called by pages whose
interface it will affect. External stylesheets are called using the <link> tag which should be placed in the
head section of an HTML document. This tag includes three attributes.

Attributes in the link tag

• rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet"
• type - When using an external stylesheet on a webpage, this attribute takes the value "text/css".
• href - Denotes the name and location of the external stylesheet to be used.

<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>
</body>
</html>

Inline CSS

Use inline css when you want to apply a style to a single occurrence of an element.
Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with
the style attribute and value inside.

<p style="color:red">This text will be red.</p>

<p>This text is <span style="background:yellow">highligted</span>.</p>

CSS Media Attribute

CSS Media Atttribute specifies the device media where css will run. Default value of media attribute is all.
Others values for media attribute are screen and print. Here are some examples for media attribute

<style media="screen and (min-width:460px)">

body{
font-family:cursive;
}
</style>

or
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-print.css" rel="stylesheet" media="print">

Type of selectors in CSS

• Tag Selector
• Id Selector
• Class Selector
• Grouping
• Nesting
• Universal-selector

CSS Selectors List

Selector Code Use
Tag Selector p{} Used to call all p tags
ID Selector #para{} Used to call that unique element with id para.
Class Selector .para{} Used to call group of different elements with class para
Tag with Class
p.para{} Used to call only p elements with class para
Selector
h1, h3,
Grouping Selector Used to group <h1>, <h3> <h5> elements
h5{}
Used to call all p elements of div, i.e, children, grand children and so
Descendant Selector div p{}
on.
Child Selector div > p{} Used to call only child p elements of div, not grand and great grand.
Universal Selector *{} Used to call all elements in web document.
Tag Selectors
The first Major selector in css is TAG Selector. Tag Selectors are LEVEL 1 in css. All html elements can
be called in css using their tag name. Tags can be used more than once, so all elements will be called.

Tag Selector in css

<h3>This heading will be red.</h3>

<p>This text will be blue and center align.</p>
<p>This text will be blue and center align.</p>

OUTPUT:

ID Selectors

ID Selector is used to call an HTML Element by its unique id name. Id is always unique in a single web
page. We can not give same ID to two different HTML Elements in a webpage.
Id is basically an attribute used in opening or start tag. Inside double quotation, the value of ID is given. ID
value is single, means no white space separation
In css code, Id is always starts with HASH ( #), than id value.

CSS Id Selector
<style>
#head1{ color:green}
#para{ color:red; background:yellow}
p{ color:blue}
</style>

<h3 id="head1">This heading will be green.</h3>

<p id="para>This text will be red and background yellow.</p>
<p>i am a paragraph without id</p>

OUTPUT:

Class Selectors
Class Selector in css is used to call all html Elements with same class group.
Class represents a group of different or same elements. We can give same Class name to two or more
different HTML Elements.
Class is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of Class is
given.
In css code, class always starts with DOT ( .), than class value.

CSS Class Selector

OUTPUT:

Grouping Selector
Grouping is used to call a group of HTML Elements by tagname, classname or id.
Unlike Class selector, we don't need to create attribute first.
We can group multiple tags, IDs and Classes. We have to use COMMA (,) to separate Selectors in grouping.

Grouping Selector in css

Nesting in CSS
Nesting is used to call a particular child of parent Element. If we are calling a P tag, all Para Tags will be
selected. We can Nest a particular tag of parent using nesting. We use single space bar to relate child of that
particular element.

CSS Nesting Selector

<p>This para is outside div.</p>

OUTPUT:

In Example above, all paragraphs are assigned red color, but para inside header class is assigned color white and
background gray.

Universal Selector *
Universal Selector or * is used to call all html elements in css.

CSS universal Selector

OUTPUT:

HTML CSS Colors

In CSS, font color is given by using css "color" Property, background color is given using "background-color" property
and border color is given using "border-color" property. Basically there are three major colors, Red, Green, and Blue.
Rest all colors are a combination of these three colors. RGB Colors are basically Screen Colors. However for printing
purpose, we use CMYK

CSS Color codes

1. Color Name
2. Hexadecimal Color code
3. RGB Colors

CSS Color Names

CSS include total 16,777,216 ( 1 Crore 67 Lakhs ) or 16 Million colours.
However 17 colors are known by their name. These popular colors are

Way to write color by its name

<p style="color:red"> Color Red </p>

<p style="color:blue"> Color Blue </p>

<p style="color:green"> Color Green </p>

<p style="color:yellow"> Color Yellow </p>

RGB Color Code
We can also write a color value using RGB Color Code( Red, Green, Blue) color value.
In RGB, we write a color using its value which lies in-between 0 and 255, or 0%-100%. 0 or 0% is minimum
value and 255 or 100% is maximum value.

Color Name RGB Code( in numbers) RGB Code( in %)

Red RGB(255,0,0) RGB(100%,0%,0%)
Green RGB(0,255,0) RGB(0%,100%,0%)
Blue RGB(0,0,255) RGB(0%,0%,100%)
Black RGB(0,0,0) RGB(0%,0%,0%)
White RGB(255,255,255) RGB(100%,100%,100%)
Cyan RGB(0,255,255) RGB(0%,100%,100%)
Magenta RGB(255,0,255) RGB(100%,0%,100%)
yellow RGB(255,255,0) RGB(100%,100%,0%)

How To Use RGB Colors

<p style="color:rgb(255,0,0)"> Color Red </p>

<p style="color:rgb(0,255,0)"> Color Green </p>

<p style="color:rgb(0,0,255)"> Color Blue </p>

Hexadecimal Color Code

We can also write color's value using HEXADECIMAL COLOR CODES.
Hexadecimal is basically a 16 base number system where we use 16 different values and mix them to write
a color code.

In Hexadecimal color coding, we use:

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

Minimum value is 0, and maximum is f.

Color code in Hexadecimal

#RRGGBB;

There are total six digits. First two represent red, next two represents green and last two represents blue
color.

Color Name Hexa Code Hexa in short

Red #FF0000 #F00

Green #00FF00 #0F0

Blue #0000FF #00F

Black #000000 #000

White #FFFFFF #FFF

Cyan #00FFFF #0FF

Magenta #FF00FF #F0F

yellow #FFFF00 #FF0

How To Use Hexa Colors

<p style="color:#ff0000"> Color Red </p>

<p style="color:#0000ff"> Color Blue </p>

<p style="color:#00ff00"> Color Green </p>

<p style="color:#000000"> Color Black </p>

<p style="color:#ffffff"> Color White </p>

CSS Text Properties

CSS Text Align

Css Text Align property is used to align text in left, center, right and justify.

Text-align Value
left align text to the left
center align text to the center
right align text to the right
justify Justified text

(How to write a CSS in HTML code)

<h3 id="text1">TECH ALTUM</h3>

<h3 id="text2">TECH ALTUM</h3>
<h3 id="text3">TECH ALTUM</h3>

Text Align Justify

(How to write a CSS in HTML code)

<h3 id="text4">TECH ALTUM is an IT Training and Development Center located in Noida.

We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive
Layouts.</h3>
Text-indent
Text Indent changes the position of first word of first line in right direction. If given negative, it will moves
to left

(How to write a CSS in HTML code)

<p id="text4">TECH ALTUM is an IT Training and Development Center located in Noida.

We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive
Layouts.</p>

<p id="text5">TECH ALTUM is an IT Training and Development Center located in Noida.

We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive
Layouts.</p></body>

<p id="text6">TECH ALTUM is an IT Training and Development Center located in Noida.

We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive
Layouts.</p>

Text Decoration
CSS text Decoration add or remove decoration of text, like underline, overline, line-through and none.

Text-decoration Value Example

overline create a line over text Tech Altum
underline create a line under text Tech Altum
line-through strike through text Tech Altum
blink blink text Tech Altum
none Remove default decoration of text. Tech Altum

(How to write a CSS in HTML code)

Text Transform
CSS Text Transform is used to transform text from lowercase to uppercase, lowercase to capitalize and
uppercase to lowercase.

(How to write a CSS in HTML code)

<h4 id="text9">tech altum</h4>

<h4 id="text10">tech altum</h4>
<h4 id="text11">tech altum</h4>
<h4 id="text12">tech altum</h4>

Word Spacing

(How to write a CSS in HTML code)

<h3 id="text1">TECH ALTUM</h3>

<h3 id="text2">TECH ALTUM</h3>

Letter Spacing

(How to write a CSS in HTML code)

<h3 id="text15">TECH ALTUM</h3>

<h3 id="text16">TECH ALTUM</h3>
<h3 id="text17">TECH ALTUM</h3>

CSS Font Properties

CSS can change Font Properties of HTML elements, like font size, line height, font family, font weight, font style,
font stretch, font variant, Font Family etc. Using these properties, we can change look of any html element. In this
article, i will explain all CSS Font Properties one by one.

Font Size
In CSS, Font size property can change the font size of a font. Some famous values for font size are xx-small, x-small,
small, smaller, medium, large, larger, x-large, xx-large. We can give value of font-size using 5 different units.

Font Size units in CSS

• Pixels (px)
• Em(em)
• Points (pt)
• percentage (%)
• rem (rem)

"em" and "%" are relative units, whereas px, pt and rem are fixed

Font Size 200%

Line-Height
Css Line-height property defines the actual height of a line. It can be used in px or n

Line-height in px is fixed, whereas n is relative. 1 means 100% of font-size, 2 means 200% of font-size.

<div>
<p style="line-height:normal">Line Height normal </p>
<p style="line-height:1">Line Height 1 </p>
<p style="line-height:2">Line Height 2 </p>
<p style="line-height:16px">Line Height 16px </p>
<p style="line-height:20px">Line Height 20px </p>
<p style="line-height:24px">Line Height 24px </p>
<p style="line-height:30px">Line Height 30px </p>
</div>

Always prefer line height in numbers as numbers are relative. Line height is pixel is
fixed.

Font Weight
In CSS, Font weight is used to give Bold or Bolder appearance to font. Various value of font-weight are

Font Weight values

• Normal
• Bold
• Bolder → same like bold
• 100 → same like normal
• 200
• 300
• 400
• 500
• 600 → same as bold
• 700
• 800 → slightly bolder than bold
• 900 → maximum allowed value
<p style="font-weight:bold"> Font weight bold </p>

<p style="font-weight:bolder"> Font weight bolder </p>

<p style="font-weight:normal"> Font weight normal </p>

<p style="font-weight:100"> Font weight 100 </p>

<p style="font-weight:500"> Font weight 500 </p>

<p style="font-weight:700"> Font weight 700 </p>

<p style="font-weight:900"> Font weight 900 </p>

Font Style
In CSS, Font style is used to gives italics appearance. Various value of font-style are

• Italic
• Normal
• Oblique

<p style="font-style:normal"> Font style Normal </p>

<p style="font-style:italic"> Font style Otalic </p>

<p style="font-style:oblique"> Font style Oblique </p>

Font Variant
CSS Font varient is used to set variant of font we are using. Font variant small caps set all text in smaller
size and all capitals. Various values of font variant are

• Normal
• Small-caps

Font variant normal.

FONT VARIANT SMALL CAPS.

<p style="font-varient:normal"> Font style normal </p>

<p style="font-varient:small-caps"> Font style small caps. </p>

Font Stretch
CSS Font stretch is used to stretch the font if available. Like we can set condensed, expanded, extra
condensed or extra condensed values of font stretch.

Various values for font stretch are

• normal
• condensed
• semi-condensed
• ultra-condensed
• extra-condensed
• expanded
• semi-expanded
• ultra-expanded
• extra-expanded

CODE:

<p style="font-stretch:normal"> Font stretch normal </p>

<p style="font-stretch:condensed"> Font stretch condensed </p>

<p style="font-stretch:semicondensed"> Font stretch semi condensed </p>

<p style="font-stretch:extra-condensed"> Font stretch extra condensed </p>

<p style="font-stretch:ultra-condensed"> Font stretch ultra condensed </p>

<p style="font-stretch:expanded"> Font stretch expanded </p>

<p style="font-stretch:semi-expanded"> Font stretch semi expanded </p>

<p style="font-stretch:ultra-expanded"> Font stretch extra expanded </p>

<p style="font-stretch:extra-expanded"> Font stretch ultra expanded </p>

OUTPUT:

Font stretch normal.

Font stretch condensed.

Font stretch semi condensed.

Font stretch extra condensed.

Font stretch ultra condensed.

Font stretch expanded.

Font stretch semi expanded.

Font stretch extra expanded.

Font stretch ultra expanded.

Font Family
In CSS, Font family specify the Font Typeface or Font Family we are using. These fonts are already
embedded in our operating system. But in CSS3, we can embedded external fonts too.
Web Safe Fonts

• Serif
• Sans-Serif
• Arial
• Helvetica
• Times new roman
• Times
• Georgia
• Verdana
• Courier
• Open Sans
• Monospace

Other Web Fonts

• Cursive
• Fantasy
• Algerian

We can also use two different fonts together in a group. This tell the browser that if one font is unavailable,
use another one.

Font Family on Browsers

Font family Arial

Font family Helvetica

Font family Sans-Serif

Font family Roman

Font family Georgia

Font family Serif

Font family Arial and Helvetica

<p style="font-family:arial"> Font family Arial </p>

<p style="font-family:helvetica"> Font family Helvetica </p>

<p style="font-family:sans-serif"> Font family sans-serif </p>

<p style="font-family:"Times New Roman""> Font family Roman </p>

<p style="font-family:georgia"> Font family Georgia </p>

<p style="font-family:serif"> Font family Serif </p>

<p style="font-family:arial, helvetica"> Font family Arial and helvetica </p>

Font Property
CSS Font Property is used to group all font properties in one single property. Properties like font size, line
height and font family are compulsory to add, rest all are optional.
CSS Font Property

Font with size 16px, line height 18px and arial font.

Font with size 18px, line height 1.4, bold, italic, small caps, condensed and arial font.

<p style="font:16px/18px arial"> Font with size 16px, line height 18px and arial
font.</p>
<p style="font:14px/18px arial"> Font with size 14px, line height 18px and arial
font.</p>
<p style="bold font:18px/1.4 cursive"> Font with size 14px, line height 18px and arial
font.</p>
<p style="font:small-caps condensed bold italic 18px/1.4 sans-serif"> Font with size
18px, line height 1.4, bold, italic, small caps, condensed and arial font.</p>

CSS Box Model

CSS Box Model includes margin, border and padding of an element. IN CSS Box Model, every div or
container is consider as a box. That box can have width, margin, padding and content.

CSS Box Model is a box inside HTML Elements including Padding, Margin, & Border.

Lets say, we have a div as shown above, containing an image,

Padding is used to give space inside, Border is visible outline of an element, and Margin is used to give space
outside.

CSS Padding

Padding is used to give space inside an element. Padding inherit background color of content. As shown in
example above, padding occupy space inside.

Padding units are px, % and em.

padding Example
<img src="1.png" style="border:solid; padding:20px;" >
CSS Margin

Margin is used to give space outside an element. Margin background color is transparent. Margin value can
be positive and negative.

Margin units are px, %, em and auto. margin auto is used to align a block element in middle.

How to use CSS Margin

CSS Border
Border is used to give visible outline around an element. Border comes between Margin and Padding. Border
can have different styles, color and width. There are three type of border Properties:

1. Border-Style
2. Border-Width
3. Border-Color

Border-style

Common border-styles are:

• Solid.
• Dashed.
• Dotted.
• Double.
• Groove.
• Inset.
• None.

It is compulsory to write border style. Otherwise Border will not work.

How to write on a webpage

<img src="1.png" style="border-style:solid;" >

Border-width

A border can have width in px in em. Normally we use border width in pixels. Default border width is 3px
and color is inherited from font color.

How to write on a webpage

<img src="1.png" style="border-style:solid;border-width:3px;" />

To write more than one property of border, we can also write border short-cut:

<img src="1.png" style="border:solid 3px;" >

<img src="1.png" style="border:solid 5px;" >
<img src="1.png" style="border:solid 8px;" >
Border-color:

Border can have color using border-color property.

We can use any color by name, hexadecimal color code, or rgb color code. Default border color is inherit
from font color.

How to write on a webpage

<img src="1.png" style="border-style:solid;border-color:red;" >

Border Shortcuts
Long property shortcut

border-style:solid;
border-width:2px; border:solid 2px red
border-color:red

border-style:solid;
border-width:4px;
border-top-color:red; border:solid 2px;
border-right-color:blue; border-color:red blue
border-bottom-color:red;
border-left-color:blue

border-style:solid;
border-width:2px;
border-top-color:red; border:solid 2px;
border-right-color:blue; border-color:red blue green yellow
border-bottom-color:green;
border-left-color:yellow

Margin and Padding Shortcuts

Long property shortcut

margin-top:40px;
margin-right:30px
margin: 40px 30px 20px 10px
margin-bottom:20px
margin-left:10px

margin-top:40px;
margin-right:20px
margin:40px 20px
margin-bottom:40px
margin-left:20px
padding-top:50px;
padding-right:40px
padding: 50px 40px 30px 20px
padding-bottom:30px
padding-left:20px

padding-top:40px;
padding-right:20px
padding:40px 20px
padding-bottom:40px
padding-left:20px

NOTE: Border, Margin and padding will always occupy space, do remember to calculate the complete box-model
before writing CSS.

CSS Float and Clear

CSS Float

CSS Float property is used to flow an element ( usually images, div, li ) to the left or right corner of parent element
and the next element wrap around it. A floating element doesn't occupy space on DOM. Thus we have to use clear
both after last floating element to avoid wrapping.

Value of CSS Float

• None
• Left
• Right

Image and Text without float

(How to write a CSS in HTML code)

<img src="demo.png" >

<p>This paragraph describes the image shown above. As the para tag is block
level element,
it will start from the new line. We can see the text is not wraping around the
image.</p>

Float Left
CSS Float Left pull an element to the left corner of parent element, and other elements wrap around it. A
floating element doesn't occupy space in flow.

(How to write a CSS in HTML code)

<img src="demo.png" alt="demo" >

<p>This paragraph describes the image shown. As the para tag is block level
element,
it will start from the new line until image is floated to left. We can see now
the text is warping.
around the image.</p>

Float left Example

Lets create a Default Unordered list

(How to write a CSS in HTML code)

Div Float Left

(How to write a CSS in HTML code)

<style>

*{ margin:0; padding:0}
.wrap{width:800px; height:auto; border:1px solid}
.aside1{width:200px; height:200px; background:aqua}
.section1{width:600px; height:200px; background:pink}
.aside2{width:200px; height:200px; background:aqua; float:left}
.section2{width:600px; height:200px; background:pink; float:left}

</style>
<div class="wrap">
<div class="aside1"></div>
<div class="section1"></div>
</div>
<div class="wrap">
<div class="aside2"></div>
<div class="section2"></div>
</div>

(Div without float)

(Div float Left)

Div Float Right

(How to write a CSS in HTML code)

<style>

.wrap{width:800px; height:auto; border:1px solid}

.aside1{width:200px; height:200px; background:aqua}
.section1{width:600px; height:200px; background:pink}
.aside2{width:200px; height:200px; background:aqua; float:right}
.section2{width:600px; height:200px; background:pink; float:right}

</style>

<div class="wrap">
<div class="aside1"></div>
<div class="section1"></div>
</div>
<div class="wrap">
<div class="aside2"></div>
<div class="section2"></div>
</div>
(Div without float)

(Div with float Right)

CSS Clear
CSS Clear property is used to stop an element to wrap around the adjacent floating element.

Values of clear property

• None( By Default)
• Left
• Right
• Both

Simple Floating Div's without clear

(How to write a CSS in HTML code)

<div class="wrap">
<div class="aside2"></div>
<div class="section2"></div>
<p>This Paragraph will wrap around Adjacent floating Divs</p>>
</div>

(Image without float in Browser Window)

(Div with float Left and without clear)

Simple Floating Div's with clear

(How to write a CSS in HTML code)

<div class="wrap">
<div class="aside2"></div>
<div class="section2"></div>
<div class="clear"></div>
<p>This Paragraph will not wrap around Adjacent floating Divs as it is
clear
from both sides</p>>
</div>

(Image without float in Browser Window)

(Div with float Left and clear)

Clear Both
CSS Clear Both Property does not allow any element to wrap around any adjacent Floating element in
both Left and Right Directions.

CSS Background Properties

Background Color and Background Images

Background Color

(How to write a CSS in HTML code)

<html>
<head>
<title>Background color</title>
<style>
.wrap1{width:90%; height:200px;
background-color:#FF0000;}
</style>
</head>
<body>
<div class="wrap1">
</div>
</body>
</html>

Background Image

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Image</title>
<style>
.wrap2{width:90%; height:200px;
background-image:url(images/favicon.ico);}
</style>
</head>
<body>
<div class="wrap2">
</div>
</body>
</html>

Background Repeat

background repeat Controls repeatition of a background Image.

Values of Background-Repeat:

• repeat ( By Default background is repeat )

• no-repeat
• repeat-x
• repeat-y

no repeat

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Repeat</title>
<style>
.wrap3{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="wrap3">
</div>
</body>
</html>

repeat-x
(How to write a CSS in HTML code)

<html>
<head>
<title>Background Repeat</title>
<style>
.wrap4{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:repeat-x;}
</style>
</head>
<body>
<div class="wrap4">
</div>
</body>
</html>

repeat-y
(How to write a CSS in HTML code)

<html>
<head>
<title>Background Repeat</title>
<style>
.wrap5{width:90%; height:400px;
background-image:url(images/favicon.ico);
background-repeat:repeat-y;}
</style>
</head>
<body>
<div class="wrap5">
</div>
</body>
</html>
Background Position

Background Position Specify position of background image. By Default the pposition is left top.

top

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap7{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:top left;}
</style>
</head>
<body>
<div class="wrap7">
</div>
</body>
</html>

bottom

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap8{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:bottom;}
</style>
</head>
<body>
<div class="wrap8">
</div>
</body>
</html>

left

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap9{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:left;}
</style>
</head>
<body>
<div class="wrap9">
</div>
</body>
</html>

right

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap10{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:right;}
</style>
</head>
<body>
<div class="wrap10">
</div>
</body>
</html>

center

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:center;}
</style>
</head>
<body>
<div class="wrap11">
</div>
</body>
</html>

Background Attachment

Background Attachment tells weather a background image scrolls or remain fixed when we scroll window.
By Default it is scroll.
Two Values of Background Attachment

• Scroll (Default)
• Fixed

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px;
background:url(images/box-model.png) no-repeat;
background-attachment:fixed}
</style>
</head>
<body>
<div class="wrap11">
</div>
</body>
</html>

Background Shorthand

We Can write all background properties in one by using property background. Here is an example

(How to write a CSS in HTML code)

<html>
<head>
<title>Background Position</title>
<style>
.wrap11{width:90%; height:200px;
background:url(images/box-model.png) no-repeat left top aqua;;}
</style>
</head>
<body>
<div class="wrap11">
</div>
</body>
</html>
CSS Pseudo Class and Pseudo Elements
Pseudo Class change properties of an element on particular event, like mouseover, focus etc.
Pseudo Elements are used to call particular child of parent, like first-line, first-letter etc.

Pseudo Classes

• :link
• :visited
• :active
• :focus
• :hover

Pseudo Elements

• :first-line
• :first-letter
• :first-child
• :before
• :after

a:link.

:link pseudo class is used to change properties of an unvisited link. once clicked, the link pseudo property
will not show as link is visited. Default link color is blue. link pseudo class was introduced in css level 1.

How to write code?

:visited

:visited pseudo class works only when an hyperlink is visited. Default color of visited hyperlinks is purple.
visited pseudo classcan change color and properties of visited links. visited pseudo class was also
introduced in css level 1.

How to write code?

:active class works only when user mouse left key is clicked, as soon as he remove.

How to write code?

:hover

:hover class works when user mouseover the element. On mouseout, it comes back to its original form.

How to write code?

:focus

:focus class change style of an element only when that element is focused. All hyperlinks, and form controls
support focus. Both mouse and tab key can focus an element.

How to write code?

<input type="text" />

<input id="text1" type="text" />
<a href="#">Link</a>
:first-line

:first-line works only for the first line of a paragraph or text.

How to write code?

<p>Inteligula congue id elis donec sce sagittis intes id laoreet aenean leo sem
massawisi condisse leo sem ac. Tincidunt nibh quis dui fauctor et.</p>

:first-child

:first-child of the parent only. Means only first child of parent will follow this class.

How to write code?

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

:first-letter

:first-letter is used to select the first letter of a text element.

How to write code?

:before
:before is used to add some content before element through css without affecting the Markup. before was
introduced in css 2.1 and is supported on Internet Explorer 8 and above. before content is treated as child of
same element. :before is inline.

<ul class="list"> /* List with :before */

carat icon using before

<button>Dropdown<button>

quotes using before

<p>This is a Quote<p>

:after
:after is used to add some content after an html tag, without any change in HTML Markup. After was also
introduced in css 2.1 with before.:after is also inline.

<ul class="list"> /* List with :after */

<li>Para 1</li>
<li>Para 2</li>
<li>Para 3</li>
<li>Para 4</li>
<li>Para 5</li>
</ul>
Clear both using after
<style>
ul{
list-style:none;
}
ul li{
float:left;
margin-right:10px;
}
ul:after{
content:"";
clear:both;
display:block;
}
</style>

CSS Navigation Menu

NAVIGATION Menu is used to give various links inside a web-page. Here we'll learn to create a simple
Navigation menu using HTML and CSS Only.

HTML Coding of a simple Navigation menu

(How to write a CSS in HTML code)

<div class="wrap">
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>

Remove List Type

(How to write a CSS in HTML code)

Give color to Text

(How to write a CSS in HTML code)

Change Text color on Mouse Hover

(How to write a CSS in HTML code)

DIV Based Layout

Table Vs Div Layout

CSS Layout using Div
<div> tag is used to group Block level elements and to create divisions in a webpage. Before 2004, we were
using Table Based Layouts. But After 2004, Div based layout become popular. Div can render fast as
compare to table, thus improve page performance. Div can create both Liquid Layouts and fixed Layouts.
Here we'll learn how to create a fixed layout of a Webpage using <div> tag and CSS.

Properties of Div tag

• It is a block level Element.

• Used to group other block Elements.
• By default, its width is 100% of parent.
• It default height is auto. Means Flexible to content inside.
• Can be easily customized using CSS.

Create a Wrap Div

(How to write a CSS in HTML code)

<! DOCTYPE html>

<html>
<head>
<title>my webpage</title>
<meta charset="UTF-8">
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
width:960px; /* Standard Width for Desktop and CRT Monitors*/
height:auto;
border:1px solid red;
}
</style>
<head>
<body>
<div class="wrap">
This is Wrapper of complete layout.
</div>
</div>
</body>
</html>

Insert Header

(How to write a CSS in HTML code)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
width:960px;
height:auto;
border:1px solid red;
}
.header{
height:150px;
background:#333;
}
</style>
<head>
<body>
<div class="wrap">
<div class="header">This is header</div>
</div>
</div>
</body>
</html>

Inserting Nav menu

(How to write a CSS in HTML code)

Inserting Footer

(How to write a CSS in HTML code)

Inserting Left/ Right Container

(How to write a CSS in HTML code)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
width:960px;
height:auto;
border:1px solid red;
}
.header{
height:150px;
background:#333;
}
.nav{
height:50px;
background:#000;
}
.container{
background:#ccc;
}
.left{
width:30%;
height:200px;
float:left;
background:#333;
}
.right{
width:70%;
height:200px;
float:left;
}
.clear{
clear:both; // Clear Both will clear floating from both sides.
}
.footer{
height:80px;
background:#ccc;
}
</style>
<head>
<body>
<div class="wrap">
<div class="header"></div>
<div class="nav"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</div>
</div>
</body>
</html>

CSS Display
CSS Display property shows how and html element behaves. Display property can also change display of
an HTML Element, like from block to inline and inline to block etc.

By default, the initial value of display for all html elements is inline. User Agent stylesheet ( CSS given by
browser ) change the behavior form inline to block, table, inline-block, none etc and thus all html behaves
different.

CSS Display properties

Property Use
Inline Display elements as inline level elements. For Exp <a>, <img>, <span>, <b>, <i>, <tt>, <etc>.
Inline-block Display elements as inline block level elements. For Exp <button>, <input> etc.
list-item Display elements as list item. by default only li tag is having display list-item.
Block Display elements as block level element. For Exp div, p, h1, h2, h3, h4, h5, h6 etc.
None Do not display that element on screen.
Table Display elements as table .
Inline-table Display elements as inline level table .
Inherit Inherit property of parent.
Initial Load its Default property.

Display Inline
Display inline is default display property of <a>, <img>, <span>, <b>, <i>, <s>, <etc>. These Elements
occupy space of content only and does not break line. Inline elements of text type(a, span, b, i, strong, em,
small) doesn't support width. But image and iframe supports.

Properties of inline Elements

• Occupy width of content only .

• Need <br> to break line.
• Can have only inline elements as child element( except a tag).

Inline and Block element behaviour.

<span>This is a span</span>

<a href="#">Link</a> 
<p>This is a paragraph</p> 
<div>This is a div</div>

See the default display property of <span>, <a> is inline, and for <p>, and <div> is block.

Display Block to inline

p{ display:block} /Defauly display of p element/

.text-inline{ display:inline}
</style>

<ul class="list1">

<ul class="list2">

<p class="text-inline">Para 4</p>

<p class="text-inline">Para 5</p>
<p class="text-inline">Para 6</p>
Display Block
Display Block allow inline elements to behave like block Elements. Div, p, address, pre, ul, ol, hr all are
block level elements. HTML Block elements can have both inline level and block level as child.

Properties of block elements

• Occupy Full width ( 100% ) of the parent tag.

• No need to add <br> to break line.
• can have both inline and block elements as child.

Convert inline elements to block.

<a style="display:block" href="#">Link 5</a>

Display NONE

Display none hide an html element from user. Thus it doesn't occupy any space. We can change display of
these elements on hover of parent element.

Display None Example.

<p>This paragraph in visible</p>

<p class="hidden-text">This paragraph in hidden</p>

Fixed and Liquid Layouts in CSS

In css2, we can create two types of layouts, Fixed and Liquid. CSS Fixed layouts are layouts with fixed
width in px or em. like 960px, 1200px, 1170px, etc. CSS Liquid Layouts are layouts with width in
percentage or auto.
Difference between fixed and liquid layouts.
Property Fixed Layout Liquid Layout

Width of wrap in Pixels ( 960px, 1200px). In Percentage or auto, for exp 80%

Height in Pixels or auto. Automatic

Device Compatibility Remain Same, but compress. Remain Same. Do not compress

Text Scrolling on various Devices Remain same Text scroll down

Print Friendly Yes No

Fixed Layout
Fixed Layout is a layout in which the width of main container is fixed ( in pixels).

Properties of Fixed Layout

• Fixed width in pixels.

• Text doesn't scroll down when zoom in or zoom out
• Independent of screen size.
• Horizontal Scroll will come when screen size is less than width of main container.

Create Fixed layout.

<div class="wrap">
<div class="header">This is header</div>
<div class="nav">This is navigation menu</div>
<div class="container">
<div class="aside">this is left section</div>
<div class="section">this is right section</div>
<div class="clear"></div>
</div>
<div class="footer">this is footer</div>
</div>
</div>

Example:
http://iu.ac.bd/fixed_layout.html

Liquid Layout:
Liquid Layout is a layout in which the width of main container is flexible( in percentage). Whatever the
screen-size is, the layout will remain same.

Properties of Liquid Layout

• Width is in percentage.
• Text scroll down when zoom in or zoom out
• Dependent of screen size.
• Horizontal Scroll will Never come on any screen unless any fixed content is inside.

Create Liquid Layout

CSS Positions

CSS Position means where an HTML element should be placed. Positions are used to specify the location of
an HTML element on a page layout. By default, all elements in html are positioned staticly, means according
to page flow. But using css positions, they can be moved from their position relatively or absolutely.

Type of CSS positions

• Static Position ( Default Position)
• Relative Position
• Absolute Position
• Fixed Position

Static Position
Static position is the default position of all HTML elements. Static means position according to the HTML
Order or position taken by an element by its own.

Note: CSS Properties top, left, bottom, right and z-index doesn't work with static position.

Element with static position.

<div class="box">
<p> Div with Static Position</p>
</div>

Position Relative
Relative Position means position of an HTML element with respect to its actual position. Relative position
can overlap over another elements, relative to its position. Relative elements moves, but their space remains.
By default, relative elements are above static elements on z axis. But of two or more elements are relative
and we move them, the last relative element will come on the top(z axis)

Note: We can use top, left, bottom, right and z-index after giving position relative to an HTML element.

Position Relative Example

<style>

.box1{
width:200px;
height:200px;
background:#333;
}
.box2{
width:200px;
height:200px;
background:#999;
position:relative;
left:100px;
bottom:50px
}
</style>

<div class="box1">Div with position static.</div>

<div class="box2">Div with relative position, left 200px and bottom 50px</div>

Position Absolute
Absolute Position means position of an HTML element in a specific location outside of normal document
flow. Position Absolute remove the element from normal flow and shows all of its own. An element with
position absolute can be placed anywhere on the page using properties top, left, right and bottom. Absolute
Element can also overlap other elements by using z-index property.

Properties of Position Absolute

1. Leave space in normal flow.

2. Occupy width of content.
3. Can move relative to its non static parent.
4. width 100% of absolute element is actually 100% of its non static parent element.
5. If all parent elements are static, absolute element moves relative to body.

Note: We can use top, left, bottom, right and z-index after giving position absolute to an HTML element.

Position Absolute Example

<div class="box1">Div with position static.</div>

<div class="box2">Div with relative absolute;</div>
Position Fixed
Fixed Position means position of an HTML element with respect to device window. It doesn't move even if
we scroll window up or down.
For Exp: the Top Menu of this web-page is positioned fixed to the top. It doesn't move even after scrolling
down or up.

Note: We can use top, left, bottom, right and z-index after giving position fixed to an HTML element.

CSS Z-Index
CSS Z-Index is used to place an non static element above another element. Value of z-index is a number.

Note: z-index can work only if the position of the element is relative, absolute, or fixed. It Doesn't work on
position static.

div using position relative and z-index.

<div class="box1">Div with position relative and z-index 1.</div>

<div class="box2">Div with position relative and z-index 2;</div>
<div class="box2">Div with position relative and z-index 3;</div>
CSS Dropdown Menu

Dropdowm Navigation Menu

NAVIGATION Menu is used to give various sub-links inside a webpage. Here we'll learn how to create a
simple Navigation menu using html and CSS only.

HTML Coding of a simple Navigation menu

(How to write a CSS in HTML code)

.navtop form{ float:right; padding:10px 10px}

.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-
41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>
<head>
<body>
<div class="wrap">
<div class="navtop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Why We</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Career</a></li>
<li><a href="#"><b class="caret"></b>Training</a>
<ul>
<li><a href="#">Asp.net</a>
<ul>
<li><a href="#">Core Asp.net</a></li>
<li><a href="#">Adv .Net</a></li>
<li><a href="#">MVC</a></li>
</ul>
</li>
<li><a href="#">Web Designing</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java</a></li>
<li><a href="#">Adv Java</a></li>
</ul>
</li>
<li><a href="#">Php</a>
<li><a href="#">Core Phpp</a></li>
<li><a href="#">My Sql</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Joomla</a></li>
</li>
<li><a href="#">SQT</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
</ul>
</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
<img src="" alt="">

</div>
</body>
</html>

WD Unit 3 (A)
No ratings yet
WD Unit 3 (A)
39 pages
Unit 3
No ratings yet
Unit 3
94 pages
Web Tech (Third Unit)
No ratings yet
Web Tech (Third Unit)
72 pages
Chapter 4 - FSD I
No ratings yet
Chapter 4 - FSD I
63 pages
Unit2 CSS
No ratings yet
Unit2 CSS
74 pages
Unit 3 CSS
No ratings yet
Unit 3 CSS
11 pages
Unit 2 - CSS
No ratings yet
Unit 2 - CSS
187 pages
Chapter Three CSS
No ratings yet
Chapter Three CSS
12 pages
Cascading Style Sheets Lecture 1
No ratings yet
Cascading Style Sheets Lecture 1
20 pages
Unit 3
No ratings yet
Unit 3
75 pages
CSS JS 18 05 25
No ratings yet
CSS JS 18 05 25
75 pages
CSS Notes-1
No ratings yet
CSS Notes-1
69 pages
CSS Basics for Web Developers
No ratings yet
CSS Basics for Web Developers
10 pages
CSS Reading Material 2025
No ratings yet
CSS Reading Material 2025
30 pages
AWP Lab Manual
No ratings yet
AWP Lab Manual
94 pages
CSS Tutorial: CSS Example With CSS Editor
No ratings yet
CSS Tutorial: CSS Example With CSS Editor
39 pages
Web CH3
No ratings yet
Web CH3
30 pages
CSS Basics for Beginners
No ratings yet
CSS Basics for Beginners
15 pages
Week 5
No ratings yet
Week 5
35 pages
CSS Basic
No ratings yet
CSS Basic
37 pages
Css XML DTD
No ratings yet
Css XML DTD
23 pages
Unit Iii
No ratings yet
Unit Iii
46 pages
Intro to CSS & JavaScript Basics
No ratings yet
Intro to CSS & JavaScript Basics
32 pages
CSS Selectors & Style Methods Guide
No ratings yet
CSS Selectors & Style Methods Guide
11 pages
What Is CSS?
No ratings yet
What Is CSS?
19 pages
CSS Notes
100% (2)
CSS Notes
38 pages
CSS Introduction
No ratings yet
CSS Introduction
12 pages
M2 Part6
No ratings yet
M2 Part6
20 pages
CSSPDF
No ratings yet
CSSPDF
38 pages
WP Unit 3 CSS
No ratings yet
WP Unit 3 CSS
49 pages
CSS Notes
No ratings yet
CSS Notes
20 pages
NW Unit 5
No ratings yet
NW Unit 5
65 pages
CSS Introduction, Syntax, Selectors
No ratings yet
CSS Introduction, Syntax, Selectors
21 pages
What Is CSS
No ratings yet
What Is CSS
15 pages
CSS Tutorial
No ratings yet
CSS Tutorial
22 pages
HTML Part 3 CSS
No ratings yet
HTML Part 3 CSS
59 pages
Cascading Stylesheet
No ratings yet
Cascading Stylesheet
30 pages
Introduction To CSS3
No ratings yet
Introduction To CSS3
9 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
19 pages
Introduction To CSS
No ratings yet
Introduction To CSS
250 pages
CSS-Cascading Style Sheet
No ratings yet
CSS-Cascading Style Sheet
35 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
52 pages
UNIT-2 Web Technology (BCS502)
100% (1)
UNIT-2 Web Technology (BCS502)
27 pages
Nov 2024 Handouts
No ratings yet
Nov 2024 Handouts
5 pages
Css (Cascading Style Sheet)
No ratings yet
Css (Cascading Style Sheet)
18 pages
Malzama 2 Kurt
No ratings yet
Malzama 2 Kurt
60 pages
Cascading Style Sheets (CSS) : The Basics of
No ratings yet
Cascading Style Sheets (CSS) : The Basics of
64 pages
CSS-Cascading Style Sheets
No ratings yet
CSS-Cascading Style Sheets
26 pages
CSSNotes
No ratings yet
CSSNotes
37 pages
Developing Cascading Style Sheets
100% (1)
Developing Cascading Style Sheets
55 pages
Unit Iii - Web Designing
No ratings yet
Unit Iii - Web Designing
12 pages
CSS Experiment
No ratings yet
CSS Experiment
18 pages
CSS Styling and Selectors Guide
No ratings yet
CSS Styling and Selectors Guide
9 pages
Comprehensive CSS Guide by W3Schools
No ratings yet
Comprehensive CSS Guide by W3Schools
566 pages
CSS Introduction
No ratings yet
CSS Introduction
26 pages
What Is CSS?: Body (Background-Color: Lightblue ) h1 (
No ratings yet
What Is CSS?: Body (Background-Color: Lightblue ) h1 (
191 pages
Css Tutorial
No ratings yet
Css Tutorial
65 pages
Styling HTML With CSS
No ratings yet
Styling HTML With CSS
6 pages
Algorithm CH 4 Lec 2
No ratings yet
Algorithm CH 4 Lec 2
11 pages
Algorithm CH 3 Lec 1
No ratings yet
Algorithm CH 3 Lec 1
26 pages
Algorithm CH 1 Lec 2
No ratings yet
Algorithm CH 1 Lec 2
26 pages
Algorithm CH 3 Lec 2
No ratings yet
Algorithm CH 3 Lec 2
17 pages
DocumentType Search
No ratings yet
DocumentType Search
8 pages
GameCenter App Startup Logs
No ratings yet
GameCenter App Startup Logs
18 pages
Tushar Ladva
No ratings yet
Tushar Ladva
15 pages
Struts and Tiles - Steps To Use Struts and Tiles
No ratings yet
Struts and Tiles - Steps To Use Struts and Tiles
2 pages
XML Assignment
0% (1)
XML Assignment
9 pages
Jewish Diet
No ratings yet
Jewish Diet
529 pages
Thresold and Limit Check
No ratings yet
Thresold and Limit Check
3 pages
Easa Erules XML Export Schema Description 1.0.0
No ratings yet
Easa Erules XML Export Schema Description 1.0.0
15 pages
XML MCQ - CH - 01 - To - 13
50% (2)
XML MCQ - CH - 01 - To - 13
23 pages
HTML5 & CSS3 for Web Developers
No ratings yet
HTML5 & CSS3 for Web Developers
39 pages
1.02. - Introduction To HTML
No ratings yet
1.02. - Introduction To HTML
7 pages
HTML Basic - : 4 Examples
No ratings yet
HTML Basic - : 4 Examples
13 pages
Web Technologies Lab Manual 2024 Bcs 552
No ratings yet
Web Technologies Lab Manual 2024 Bcs 552
16 pages
GC 2025 01 20
No ratings yet
GC 2025 01 20
13 pages
XML Quick Guide
No ratings yet
XML Quick Guide
32 pages
Archivetempad0900499362064200002035156 XML
No ratings yet
Archivetempad0900499362064200002035156 XML
18 pages
XSLT MAPPING - Riyaz
50% (2)
XSLT MAPPING - Riyaz
13 pages
DTD Tutorials
No ratings yet
DTD Tutorials
19 pages
XML Code for imageMso Elements
No ratings yet
XML Code for imageMso Elements
99 pages
Unit-2 HTML
No ratings yet
Unit-2 HTML
52 pages
SKOS: Simplifying Knowledge Systems
No ratings yet
SKOS: Simplifying Knowledge Systems
11 pages
Week9 RDF Final
No ratings yet
Week9 RDF Final
52 pages
Oracle SOA - Fault Handling in File Adapter For CSV and XML Files in SOA 11G
No ratings yet
Oracle SOA - Fault Handling in File Adapter For CSV and XML Files in SOA 11G
6 pages
HTML Interview Prep Guide
No ratings yet
HTML Interview Prep Guide
9 pages
TV Protection Bypass Methods
No ratings yet
TV Protection Bypass Methods
251 pages
Magazine Burst - Dave Lombardo Number
No ratings yet
Magazine Burst - Dave Lombardo Number
174 pages
5.XML Processing
No ratings yet
5.XML Processing
30 pages
如何写一篇感人的葬礼演讲
100% (1)
如何写一篇感人的葬礼演讲
6 pages
XML 2020 Lab: XML Standards Guide
No ratings yet
XML 2020 Lab: XML Standards Guide
4 pages
Semantic Web: A Primer for Engineers
No ratings yet
Semantic Web: A Primer for Engineers
81 pages

CSS Cascading Style Sheet

Uploaded by

CSS Cascading Style Sheet

Uploaded by

Cascading Style Sheet

Attributes in the link tag

<p style="color:red">This text will be red.</p>

<p>This text is <span style="background:yellow">highligted</span>.</p>

CSS Media Attribute

<style media="screen and (min-width:460px)">

Type of selectors in CSS

CSS Selectors List

Tag Selector in css

<h3>This heading will be red.</h3>

<h3 id="head1">This heading will be green.</h3>

CSS Class Selector

Grouping Selector in css

CSS Nesting Selector

<p>This para is outside div.</p>

CSS universal Selector

HTML CSS Colors

CSS Color codes

CSS Color Names

Way to write color by its name

<p style="color:red"> Color Red </p>

<p style="color:blue"> Color Blue </p>

<p style="color:green"> Color Green </p>

<p style="color:yellow"> Color Yellow </p>

Color Name RGB Code( in numbers) RGB Code( in %)

How To Use RGB Colors

<p style="color:rgb(0,255,0)"> Color Green </p>

<p style="color:rgb(0,0,255)"> Color Blue </p>

Hexadecimal Color Code

In Hexadecimal color coding, we use:

Minimum value is 0, and maximum is f.

Color code in Hexadecimal

Color Name Hexa Code Hexa in short

Red #FF0000 #F00

Green #00FF00 #0F0

Blue #0000FF #00F

Black #000000 #000

White #FFFFFF #FFF

Cyan #00FFFF #0FF

yellow #FFFF00 #FF0

How To Use Hexa Colors

<p style="color:#0000ff"> Color Blue </p>

<p style="color:#00ff00"> Color Green </p>

<p style="color:#000000"> Color Black </p>

<p style="color:#ffffff"> Color White </p>

CSS Text Properties

CSS Text Align

(How to write a CSS in HTML code)

<h3 id="text1">TECH ALTUM</h3>

Text Align Justify

(How to write a CSS in HTML code)

<h3 id="text4">TECH ALTUM is an IT Training and Development Center located in Noida.

(How to write a CSS in HTML code)

<p id="text4">TECH ALTUM is an IT Training and Development Center located in Noida.

<p id="text5">TECH ALTUM is an IT Training and Development Center located in Noida.

<p id="text6">TECH ALTUM is an IT Training and Development Center located in Noida.

Text-decoration Value Example

(How to write a CSS in HTML code)

(How to write a CSS in HTML code)

<h4 id="text9">tech altum</h4>

(How to write a CSS in HTML code)

<h3 id="text1">TECH ALTUM</h3>

(How to write a CSS in HTML code)

<h3 id="text15">TECH ALTUM</h3>

CSS Font Properties

Font Size units in CSS

Default Font size of p tag

Font Size 200%

Font Weight values

<p style="font-weight:bolder"> Font weight bolder </p>

<p style="font-weight:normal"> Font weight normal </p>

<p style="font-weight:100"> Font weight 100 </p>

<p style="font-weight:500"> Font weight 500 </p>

<p style="font-weight:700"> Font weight 700 </p>

<p style="font-weight:900"> Font weight 900 </p>

<p style="font-style:normal"> Font style Normal </p>