Attribute Selectors
The attribute selector [attribute] is used to select the elements with a specified attribute or attribute
value.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• [href] {
• background-color: lightgreen;
• color: black;
• font-family: monospace;
• }
• </style>
• </head>
• <body>
• <p>CSS attribute selectors</p>
• <a href="#">Home</a>
• <a href="#">About Us</a>
• <a href="#">Contact Us</a>
• </body>
• </html>
Property Value Forms(Unit of
Measurements in CSS
• Number Values: Integer and real fractional
numbers. These numbers serve as the basis for
other value types
• Percentage Values: Percentage units are always
relative to another values
• Length Values: CSS supports both absolute and
relative length values
• Many CSS properties take "length" values, such
as width, margin, padding, font-size, etc.
Absolute Lengths(fixed)
Unit Description
cm Centimeters
mm Millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
Relative Lengths
Relative length units specify a length relative to another length property.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size
of the current font)
rem Relative to font-size of the root element
% Relative to the parent element
Text Properties
CSS Text properties allows controlling the
spacing, decoration, and alignment of text.
Property
Text Properties
Description Values
color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between normal, number, length, %
lines normal, length
letter-spacing Increase or decrease the % ,normal, length
space between characters
text-decoration Adds decoration to text none, underline, overline,
line-through
text-indent Indents the first line of text in length, %
an element
text-transform Controls the letters in an none, capitalize, uppercase,
element lowercase
text-align Aligns the text in an element left, right, center, justify
color
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• color: blue;
• }
• h1 {
• color: green;
• }
• </style>
• </head>
• <body>
• <h1>This is heading 1</h1>
• <p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is
defined in the body selector.</p>
• <p>Another paragraph.</p>
• </body>
• </html>
CSS Text Spacing
• <!DOCTYPE html> • anyone,' he told me, 'just remember that all the people in
• <html>
• <head> • this world haven't had the advantages that you've
• <style>
• p{ • had.'</p>
• text-indent: 50px; • <h1>Using letter-spacing</h1>
• }
• h2 { • <h2>This is heading 1</h2>
• letter-spacing: 5px; • <h3>This is heading 2</h3>
• }
h3 { • <h1>Using line-height</h1>
• letter-spacing: -2px;
• } • <p>
• p.small { • This is a paragraph with a standard line-height.<br>
• line-height: 0.7; • The default line height in most browsers is about 110% to
• }
p.big { • 120%.<br>
• line-height: 1.8; • </p>
• }
• </style> • <p class="small">
• </head> • This is a paragraph with a smaller line-height.<br>
• <body> • This is a paragraph with a smaller line-height.<br>
• </p>
• <h1>Using text-indent</h1>
• <p class="big">
• <p>In my younger and more vulnerable years my father • This is a paragraph with a bigger line-height.<br>
• This is a paragraph with a bigger line-height.<br>
• gave me some advice that I've been turning over in my • </p>
• </body>
• mind ever since. 'Whenever you feel like criticizing • </html>
CSS Text Decoration
• text-decoration-line
• text-decoration-color
• text-decoration
• <!DOCTYPE html> • </head>
• <html> • <body>
• <head>
• <style> • <h1>Overline text decoration</h1>
• h1 { • <h2>Line-through text decoration</h2>
• text-decoration: overline; • <h3>Underline text decoration</h3>
• text-decoration-color: red; • <p class="ex">Overline and underline text
• }
• decoration.</p>
• h2 {
• text-decoration: line-through; • <p><strong>Note:</strong> It is not
recommended to
• }
• underline text that is not a link, as this
• h3 { often confuses
• text-decoration: underline; • the reader.</p>
• }
• </body>
• p.ex { • </html>
• text-decoration: overline underline;
• }
CSS Text Transformation
• <!DOCTYPE html> • <h1>Using the text-transform
• <html> property</h1>
• <head>
• <style> • <p class="uppercase">This text is
• p.uppercase { transformed to
• text-transform: uppercase;
• } • uppercase.</p>
• <p class="lowercase">This text is
transformed to
• p.lowercase {
• text-transform: lowercase;
• lowercase.</p>
• }
• <p class="capitalize">This text is
capitalized.</p>
• p.capitalize {
• text-transform: capitalize;
• </body>
• }
• </html>
• </style>
• </head>
• <body>
Font Properties
• For designing a document or Web one of the
first things we specify is Font.
• In CSS, fonts are specified using the font
related properties.
• We can change the text size,color,style and
more.
Property
Font Properties
Description Values
font Sets all the font font-style, font-variant, font-
properties in one weight,
declaration font-size/line-height, font-
family, caption,
icon, menu, message-box,
small-caption,
status-bar, inherit
font-family Specifies the font family for family-name, generic-family,
text inherit
font-size Specifies the font size of text xx-small, x-small, small,
medium, large,
x-large, xx-large, smaller,
larger, length,
%, inherit
font-style Specifies the font style for normal, italic, oblique, inherit
text
Property Description Values
font-variant Specifies whether or not a normal, small-caps, inherit
text should be displayed in
asmall-caps font
font-weight Specifies the weight of a
font
• <!DOCTYPE html> • <h3>Absolute font-size Properties</h3>
• <html> • <p style="font-size:xx-small">xx-small</p>
• <head> • <p style="font-size:x-small">x-small</p>
• <title> CSS | font-style Property </title> • <p style="font-size:small">small</p>
• </head> • <p style="font-size:medium">medium</p>
• <body> • <p style="font-size:large">large</p>
• <h3>font-style Properties</h3> • <p style="font-size:x-large">x-large</p>
• <p style="font-style:normal" >Normal font- • <p style="font-size:xx-large">xx-large</p>
style Property</p> • <p style="font-size:xxx-large">xxx-large</p>
• <p style="font-style:italic" >Italics font-style • <h3>font-weight Properties</h3>
Property</p> • <p style="font-weight:normal">Fontweight
• <p style="font-style:initial" >Initial font-style normal </p>
Property</p> • <p style="font-weight:bold">Fontweight bold
• <p style="font-style:oblique" >Oblique font- </p>
style Property</p> • <p style="font-weight:200">Fontweight 200
• <h3>font-size Properties</h3> </p>
• <p style="font-size:16px">Font size 16px </p> • <p style="font-weight:600">Fontweight 600
• <p style="font-size:1em">Font size 1em </p> </p>
• <p style="font-size:100%">Font size 100% • <p style="font-weight:900">Fontweight 900
</p> </p>
• <p style="font-size:12pt">Font size 12pt </p> • </body>
• <p style="font-size:1rem">Font size 1rem • </html>
</p>
Adobe Acrobat
Document
• Font Shorthand :
font: font-style | font-variant | font-size | font-family
• Example:
font:italic bold 30px arial,sans-serif;
List Properties
• CSS Offers a handful of properties to
customize the look of the lists from pre-
defined values to using our own list item
images
List Properties
Property Description Values
list-style Sets all the properties for a list-style-type, list-style-
list in one declaration position, list-style-image,
inherit
list-style-type Specifies the type of list- none, disc, circle, square,
item marker decimal, decimal-leading-
zero,armenian, lower-alpha,
upper-alpha, lower-
greek,lower-latin, upper-
latin, lower-roman, upper-
roman, inherit
list-style-position Specifies where to place the inside, outside, inherit
list-item marker
list-style-image Specifies an image as the URL, none, inherit
list-item marker
• <!DOCTYPE html> • <li>Tea</li>
• <html> • <li>Coca Cola</li>
• <head> • </ul>
• <style>
• ul.a { • <ul class="b">
• list-style-type: circle; • <li>Coffee</li>
• } • <li>Tea</li>
• <li>Coca Cola</li>
• ul.b { • </ul>
• list-style-type: square;
• } • <p>Example of ordered lists:</p>
• <ol class="c">
• ol.c { • <li>Coffee</li>
• list-style-type: upper-roman; • <li>Tea</li>
• } • <li>Coca Cola</li>
• </ol>
• ol.d {
• list-style-type: lower-alpha; • <ol class="d">
• } • <li>Coffee</li>
• </style> • <li>Tea</li>
• </head> • <li>Coca Cola</li>
• <body> • </ol>
• <h2>The list-style-type Property</h2> • </body>
• </html>
• <p>Example of unordered lists:</p>
• <ul class="a">
• <li>Coffee</li>
• <!DOCTYPE html>
• <html> • <p>The list-style-image
• <head> property specifies an image as
• <style> the list item marker:</p>
• ul {
• list-style-image: • <ul>
url('check.png'); • <li>Coffee</li>
• } • <li>Tea</li>
• </style> • <li>Coca Cola</li>
• </head> • </ul>
• <body>
• </body>
• <h2>The list-style-image • </html>
Property</h2>
• <!DOCTYPE html> berries from the Coffea plant</li>
• <html> • <li>Tea - An aromatic beverage commonly
• <head> prepared by pouring hot or boiling water over
• <style> cured leaves of the Camellia sinensis, an
evergreen shrub (bush) native to Asia</li>
• ul.a {
• </ul>
• list-style-position: outside;
• }
• <h2>list-style-position: inside:</h2>
• <ul class="b">
• ul.b {
• <li>Coffee - A brewed drink prepared from
• list-style-position: inside;
roasted coffee beans, which are the seeds of
• } berries from the Coffea plant</li>
• </style> • <li>Tea - An aromatic beverage commonly
• </head> prepared by pouring hot or boiling water over
• <body> cured leaves of the Camellia sinensis, an
evergreen shrub (bush) native to Asia</li>
• <h1>The list-style-position Property</h1> • </ul>
• <h2>list-style-position: outside • </body>
(default):</h2> • </html>
• <ul class="a">
• <li>Coffee - A brewed drink prepared from
roasted coffee beans, which are the seeds of
List shorthand property:
List-style:list-style-type | list-style-postion | list-style-image
Example:
ul {
list-style: square inside url("sqpurple.gif");
}
CSS color Property
color: It will set the color to the text which the programmer specifies in the CSS file.
The color can be set to the text in 3 forms-
• 1. color-name: By directly specifying the name of the color like blue, green,
yellow, white, black, etc.
Syntax:
color: name-of-the-color;
• 2. RGB/RGBA Value: Here R stands for Red, G stands for Green, and B
stands for Blue. The color will be assigned to the text by using the range of
these values. These values range from 0 to 255. And, A stands for Alpha
channel. Which represents the opacity or opaque of the color.
Syntax:
color: RGBA(value, value, value, value);
3. Hexa-Decimal Value: It represents the value of the color in hexadecimal
format. It should start with the prefix #. These values range from #000000 to
#FFFFFF.
Syntax:
color: #02A5F2;
• <html> • .clr22 {
• <head> • color: #0000ff;
• <title> • }
• CSS color-name property • </style>
• </title> • </head>
• <style> • <body>
• h1 { • <h1>CSS Color Property</h1>
• color: black; • <p>CSS is used for styling a web page and its
• } components.</p>
• p{ • <h2>CSS Color Property:RGB</h2>
• font-size: 20px; • <p class="colr1">RGB(255, 0, 0)-This is the
• color: green; code for red color.</p>
• } • <p class="colr2">RGB(0, 0, 255)-This is the
code for blue color.</p>
• .colr1 {
• <h2>CSS Color
• color: RGB(255, 0, 0);
Property:HEXA-DECIMAL</h2>
• }
• <p class="clr11">#FF0000-This is the code
• .colr2 { for red color.</p>
• color: RGB(0, 0, 255); • <p class="clr22">#0000FF-This is the code
• } for blue color.</p>
• .clr11 { • </body>
• color: #ff0000; • </html>
• }
CSS: text-align property
CSS Syntax
• text-align: left|right|center|justify|initial|
inherit;
Property Value Description
text-align left Text is left aligned, div { text-
align: left; }
right Text is right aligned, div
{ text-align: right; }
center Text is centered, div { text-
align: center; }
justify Text is justified (ie:
line up the left and right
edges of the paragraph), div
{ text-align: justify; }
<!DOCTYPE html> <h2>text-align: center:</h2>
<html> <p class="a">Lorem ipsum dolor sit amet, consectetur
<head> adipiscing elit. Etiam semper diam at erat pulvinar,
<style> at pulvinar felis blandit. Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.</p>
.a {
text-align: center;
}
<h2>text-align: left:</h2>
.b {
<p class="b">Lorem ipsum dolor sit amet, consectetur
text-align: left;
adipiscing elit. Etiam semper diam at erat pulvinar,
} at pulvinar felis blandit. Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.</p>
.c {
text-align: right; <h2>text-align: right:</h2>
} <p class="c">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam semper diam at erat pulvinar,
.d { at pulvinar felis blandit. Vestibulum volutpat tellus
text-align: justify; diam, consequat gravida libero rhoncus ut.</p>
}
</style> <h2>text-align: justify:</h2>
</head> <p class="d">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam semper diam at erat pulvinar,
<body>
at pulvinar felis blandit. Vestibulum volutpat tellus
diam, consequat gravida libero rhoncus ut.</p>
<h1>The text-align Property</h1>
</body>
</html>
Border Properties
• The CSS border properties allow you to specify
the style, width, and color of an element's
border.
Property Description Values
CSS Border Style The border-style property Soild,dashed,dashed,double
specifies what kind of border
to display.
CSS Border Width The border-width property The width can be set as a
specifies the width of the specific size (in px, pt, cm,
four borders. em, etc) or by using one of
the three pre-defined values:
thin, medium, or thick:
CSS Border Color The border-color property is Name,HEX,RGB
used to set the color of the
four borders.
• <html> • border-color: blue;
• <head> • }
• <style> • p{
• p.one { • border:3px solid maroon;
• border-style: solid; • }
• border-color: red; • </style>
• border-width:4px; • </head>
• } • <body>
• <p class="one">RED
• p.two { border</p>
• border-style: dashed; • <p class="two">GREEN
• border-color: green; border</p>
• } • <p class="three">BLUE
border</p>
• <p>Border ShortHand</p>
• p.three {
• </body>
CSS Margins
• Margins are used to create space around elements, outside of any defined
borders.
• There are properties for setting the margin for each side of an element
(top, right, bottom, and left).
● margin-top
● margin-right
● margin-bottom
● margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent
element
Negative values are allowed.
• If the margin property has four values:
• ● margin: 10px 5px 15px 20px;
• ○ top margin is 10px
• ○ right margin is 5px
• ○ bottom margin is 15px
• ○ left margin is 20px
If the margin property has three values:
• ● margin: 10px 5px 15px;
• ○ top margin is 10px
• ○ right and left margins are 5px
• ○ bottom margin is 15px
If the margin property has two values:
• ● margin: 10px 5px;
• ○ top and bottom margins are 10px
• ○ right and left margins are 5px
If the margin property has one value:
• ● margin: 10px; ○ all four margins are 10px
The auto Value
Margin:auto;
• You can set the margin property to auto to horizontally center the element within its container.
• The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins.
• <!DOCTYPE html>
• <html> • <h2>Use of margin: auto</h2>
• <head>
• <style> • <div class="auto">
• div.auto { • This div will be horizontally
• width: 300px; centered because it has margin:
• margin: auto; auto;
• border: 1px solid red; • </div>
• } • <div>
• div • Margin of this paragraph is set to
20px on all sides
• {
• </div>
• border: 1px solid red;
• </body>
• margin:25px;
• </html>
• }
• </style>
• </head>
The <span> and <div> tag.
HTML <div> tag:
• The <div> (division) element is a generic block-level element that
is typically used to separate page content into blocks. A block
element is a webpage element that begins a new line and has
the same width as the parent container or the full page.
• The div tag in HTML has both opening(<div>) and closing (</div>)
tags.
• The <div> tag is used as a container for HTML elements, which is
then styled with CSS or manipulated with JavaScript. The <div>
tag is easily customized by using the class or id attribute.
• The div tag in HTML is used to divide web page content into
sections, such as headers, footers, and navigations. Common
uses for divs include grouping similar text, pictures, headers, and
links.
• Example: • <body>
• <!DOCTYPE html> • <div>
• <html> • <h1> div tag example</h1>
• <head> • </div>
• <title>Div tag</title> • <div>
• <style> • <p> The div tag in HTML is used to
• div { divide web page content into
• color: red; sections, such as headers, footers,
and navigations. Common uses for
• background-color: yellow;
divs include grouping similar text,
• margin: 2px; pictures, headers, and links.</p>
• font-size: 25px; • </div>
• } • <div>
• h3 { • <h3>div tag example</h3>
• color:blue; • </div>
• } • </body>
• </style> • </html>
• </head>
• HTML <span> tag: The
• HTML span element is a generic inline container for inline elements and content.
It used to group elements for styling purposes (by using the class or id
attributes). The span tag is very similar to the div tag, but div is a block-level tag
and span is an inline tag.
• Example:
• <!DOCTYPE html>
• <html>
• <head>
• <title>span tag</title>
• </head>
• <body>
• <p><span style="background-color:lightgreen">
• CSS</span> is used to style a <span style="color:blue;">
• web layout</span> and <span
• style="background-color:lightblue; font-style:italic“>elements</span>
• of a webpasge
• </p>
• </body>
• </html>
Difference between <div> and <span> tag
<div> <span>
The <div> tag is a block level element. The <span> tag is an inline element.
It is best to attach it to a section of a web It is best to attach a CSS to a small section
page. of a line in a web page.
It accepts align attribute. It does not accept align attribute.
This tag should be used to wrap a section, This tag should be used to wrap any
for highlighting that section. specific word that you want to highlight in
your webpage.
Initial and inherit property
• initial: This value will set the value of the
color to its default value.
• inherit: It will inherit the property of the
color from its parent element.
• Initial example • font-size: 20px;
• <!DOCTYPE html> • color: initial;
• <html> • }
• <head> • </style>
• <title> • </head>
• CSS color-name property • <body>
• </title> • <h1>CSS Color
• <style> Property</h1>
• h1 { • <p>CSS Color
• color: black; Properties.</p>
• } • </body>
• p{ • </html>
• Inherit example • color:blue;
• <!DOCTYPE html> • }
• <html> • </style>
• <head> • </head>
• <style> • <body>
• div{ • <div>
• color:red; • <h1>CSS example</h1>
• } • <p>This is an example
• p{ for inherit property</p>
• color:inherit; • </div>
• } • </body>
• h1{ • </html>
