Unit - 3 CSS(Cascading Style Sheet).pptx

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files

Why Use CSS?
• CSS is used to define styles for your web pages, including the
design, layout and variations in display for different devices and
screen sizes.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

CSS Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
h1 { color: blue; font-size:12px;}
Selector Declaration
Property Value
Declaration
Property Value

The CSS element
Selector
• The element selector selects HTML
elements based on the element name.
p {
text-align: center;
color: red;
}
• The id selector uses the id attribute of an
HTML element to select a specific
element.
• The id of an element is unique within a
page, so the id selector is used to select
one unique element!
• To select an element with a specific id,
write a hash (#) character, followed by
the id of the element.
#para1 {
text-align: center;
color: red;
}

The CSS Universal
Selector
• The universal selector (*) selects all
HTML elements on the page.
• The class selector selects HTML
elements with a specific class attribute.
• To select elements with a specific
class, write a period (.) character,
followed by the class name.
The CSS class Selector
.center {
text-align: center;
color: red;
}
* {
text-align: center;
color: blue;
}

CSS Comment
• CSS comments are not displayed in the
browser, but they can help document
your source code
• Comments are used to explain the code,
and may help when you edit the source
code at a later date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the
<style> element, and starts with /* and
ends with */
The CSS Grouping
Selector
The grouping selector selects all the
HTML elements with the same style
definitions.
Look at the following CSS code (the h1,
h2, and p elements have the same style
definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
/* This is a single-line comment
*/
p {
color: red;
}

CSS Background Color
• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color
• <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS background-color
• The background-color property specifies the background color of
an element.
body {
background-color: lightblue;
}

Opacity / Transparency
• The opacity property specifies the opacity/transparency of an element. It can
take a value from 0.0 - 1.0. The lower value, the more transparent:
• div {
background-color: green;
opacity: 0.3;
}
• An RGBA color value is specified with: rgba(red, green, blue,
alpha). The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).
• div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30%
opacity */
}

CSS Background Image
• The background-image property specifies an image to use as the background of
an element.
• By default, the image is repeated so it covers the entire element.
• body {
background-image: url("paper.gif");
}
• The background image can also be set for specific elements, like the <p>
element:
• p {
background-image: url("paper.gif");
}

CSS Background Image Repeat
CSS background-repeat
• By default, the background-image property repeats an image both horizontally
and vertically.
• Some images should be repeated only horizontally or vertically, or they will look
strange, like this:
• body {
background-image: url("gradient_bg.png");
}

CSS background-repeat: no-repeat
• Showing the background image only once is also specified by the background-
repeat property:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

CSS background-position
• The background-position property is used to specify the position of the
background image.
• body {
background-position: right top;
}

CSS Background Attachment
• The background-attachment property specifies whether the background image
should scroll or be fixed (will not scroll with the rest of the page):
Fixed
body {
background-attachment: fixed;
}
Scroll
body {
background-attachment: scroll;
}

CSS Background Shorthand
CSS background - Shorthand property
All property
body {
background-color: #ffffff;
}
Shorthand property
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Borders
• The CSS border properties allow you to specify the style, width, and color of an
element's border.

CSS Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color
value

CSS Border Style
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color
value
• none - Defines no border
• hidden - Defines a hidden border
• The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).

Unit - 3 CSS(Cascading Style Sheet).pptx

CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
the three pre-defined values: thin, medium, or thick:
• p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-width: thick;
}

CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

Example
• p.one {
border-color: red;
}
p.two {
border-color: green;
}
p.three {
border-color: blue;
}

CSS Border Sides
• CSS Border - Individual Sides
• From the examples on the previous pages, you have seen that it is
possible to specify a different border for each side.
• In CSS, there are also properties for specifying each of the borders
(top, right, bottom, and left):
• p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

So, here is how it works:
• If the border-style property has four values:
border-style: dotted solid double dashed;
• top border is dotted
• right border is solid
• bottom border is double
• left border is dashed
• If the border-style property has three values:
• border-style: dotted solid double;
• top border is dotted
• right and left borders are solid
• bottom border is double

If the border-style property has two values:
border-style: dotted solid;
• top and bottom borders are dotted
• right and left borders are solid
If the border-style property has one value:
• all four borders are dotted

Example of all that 4 Borders
• p {
border-style: dotted solid double dashed;
}
/* Three values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
}

CSS Shorthand Border Property
• CSS Border - Shorthand Property
• Like you saw in the previous page, there are many properties to consider when
dealing with borders.
• To shorten the code, it is also possible to specify all the individual border
properties in one property.
• The border property is a shorthand property for the following individual border
properties:
• border-width
• border-style (required)
• border-color
Example:
p {
border: 5px solid red;
}

Left Border
• p {
border-left: 6px solid red;
}
Bottom Border
p {
border-bottom: 6px solid red;
}

CSS Rounded Borders
• The border-radius property is used to add rounded borders to an element
p.normal {
padding: 5px;
}
p.round1 {
border-radius: 5px;
padding: 5px;
}
p.round2 {
border-radius: 8px;
padding: 5px;
}
p.round3 {
border-radius: 12px;
padding: 5px;}`

CSS Fonts
Font Selection is Important
• Choosing the right font has a huge impact on how the readers
experience a website.
• The right font can create a strong identity for your brand.
• Using a font that is easy to read is important. The font adds value
to your text. It is also important to choose the correct color and text
size for the font.

Generic Font Families
• In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense
of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
• All the different font names belong to one of the generic font families.
• Difference Between Serif and Sans-serif Fonts is in the image

Some Font Examples
Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

The CSS font-family Property
• In CSS, we use the font-family property to specify the font of a text.
• .p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Ex: This is a paragraph, shown in the Times New Roman font.
Ex: This is a paragraph, shown in the Arial font.
Ex: This is a paragraph, shown in the Lucida
Console font.

What are Web Safe Fonts?
• Web safe fonts are fonts that are universally installed across all browsers and
devices.
• Fallback Fonts
• However, there are no 100% completely web safe fonts. There is always a
chance that a font is not found or is not installed properly.
• Therefore, it is very important to always use fallback fonts.
• This means that you should add a list of similar "backup fonts" in the font-family
property. If the first font does not work, the browser will try the next one, and the
next one, and so on. Always end the list with a generic font family name.

Best Web Safe Fonts for HTML and CSS
• The following list are the best web safe fonts for HTML and CSS:
• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

CSS Font Style
• The font-style property is mostly used to specify italic text.
• This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style.

Font Weight
• The font-weight property specifies the weight of a font:
• p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Ex : This is a paragraph.
Ex : This is a paragraph.

Font Variant
• The font-variant property specifies whether or not a text should be displayed in a
small-caps font.
• In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}

Font Size
• The font-size property sets the size of the text.
• Being able to manage the text size is important in web design. However, you should not
use font size adjustments to make paragraphs look like headings, or headings look like
paragraphs.
• Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
• The font-size value can be an absolute, or relative size.
• Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
• Absolute size is useful when the physical size of the output is known
• Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Set Font Size With Pixels
• Setting the text size with pixels gives you full control over the text
size:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}

CSS Google Fonts
Google Fonts
• If you do not want to use any of the standard fonts in HTML, you can use Google
Fonts.
• Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
• Just add a special style sheet link in the <head> section and then refer to the
font in the CSS.
<head>
<link rel="stylesheet" href="https://fonts.goog
leapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>

• To shorten the code, it is also possible to specify all the individual font properties
in one property.
The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
The CSS Font Property

Example of font shorthand property
• p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}

CSS Margins
• The CSS margin properties are used to create space around elements, outside
of any defined borders.
• With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
• Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left

margin properties
• 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

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property
• To shorten the code, it is possible to specify all the margin properties in one
property.
p {
margin: 25px 50px 75px 100px;
}

• If the margin property has two values:
• margin: 25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px
p {
margin: 25px 50px;
}

The auto Value of margin
• 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.
div {
width: 300px;
margin: auto;
}

The inherit Value
• This example lets the left margin of the <p class="ex1"> element
be inherited from the parent element (<div>):
div {
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}

CSS Margin Collapse
• Margin Collapse
• Top and bottom margins of elements are sometimes collapsed into
a single margin that is equal to the largest of the two margins.
• This does not happen on left and right margins! Only top and
bottom margins!
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}

CSS Lists
• HTML Lists and CSS List Properties
• In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

Html Code of unordered lists and
ordered lists
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

Different List Item Markers
• ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

An Image as The List Item Marker
• The list-style-image property specifies an image as the list item marker
• ul {
list-style-image: url('sqpurple.gif');
}

Styling List With Colors
CSS HTML
• ol {
background: #ff9999;
padding: 20px;
}
• ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

Styling List With Colors
CSS HTML
• ul {
background: #3399ff;
padding: 20px;
}
• ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

CSS Colors
• Colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values
• In CSS, a color can be specified by using a predefined color name:

CSS Background Color
• You can set the background color for HTML elements
• <h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>

CSS Text Color
• You can set the color of text
• <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values:
• Same as color name "Tomato“
• Same as color name "Tomato", but 50% transparent:

CSS Color Values Code :
• <h1 style="background-color:rgb(255, 99,
71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%,
64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71,
0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%,
0.5);">...</h1>

RGB Value
• In CSS, a color can be specified as an RGB value, using this
formula:
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the
color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because red is set
to its highest value (255) and the others are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255,
255, 255)

RGBA Value
• RGBA color values are an extension of RGB color values with an
alpha channel - which specifies the opacity for a color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all):
• Experiment by mixing the RGBA values below

CSS HEX Colors
• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the color.
• HEX Value
• In CSS, a color can be specified using a hexadecimal value in the form:
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
• Experiment by mixing the HEX values below

3 Digit HEX Value
• Sometimes you will see a 3-digit hex code in the CSS source.
• The 3-digit hex code is a shorthand for some 6-digit hex codes.
• The 3-digit hex code has the following form:
• #rgb
• Where r, g, and b represent the red, green, and blue components with values
between 0 and f.
• The 3-digit hex code can only be used when both the values (RR, GG, and BB)
are the same for each component. So, if we have #ff00cc, it can be written like
this: #f0c.
• Here is an example:

3 Digit HEX Value
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}

CSS HSL Colors
• HSL stands for hue, saturation, and lightness.
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and
100% is the full color.
• Lightness is also a percentage. 0% is black, 50% is neither light or
dark, 100% is white

Saturation
• Saturation can be described as the intensity of a color.
• 100% is pure color, no shades of gray.
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray; you can no longer see the color.
• The lightness of a color can be described as how much light you
want to give the color, where 0% means no light (black), 50%
means 50% light (neither dark nor light) and 100% means full
lightness (white).
Lightness

HSLA Value
• HSLA color values are an extension of HSL color values with an
alpha channel - which specifies the opacity for a color.
• An HSLA color value is specified with:
• hsla(hue, saturation, lightness, alpha)
• The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all):

CSS Links
• With CSS, links can be styled in many different ways.
• Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
a {
color: hotpink;
}
Styling Links

Link Buttons
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Link Buttons
• /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

Link Buttons
• This example demonstrates a more advanced example where we
combine several CSS properties to display links as boxes/buttons
• a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}

CSS Padding
• Padding is used to create space around an element's content,
inside of any defined borders.

CSS Padding
• The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
• With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).
• Padding - Individual Sides
• CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
• All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

CSS Padding
• div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Shorthand Property
• To shorten the code, it is possible to specify all the padding properties in one
property.
• The padding property is a shorthand property for the following individual padding
properties:
• padding-top
• padding-right
• padding-bottom
• padding-left
• So, here is how it works:

Padding - Shorthand Property
• If the padding property has four values:
• padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
• div {
padding: 25px 50px 75px 100px;
}

Example
• If the padding property has two values:
• padding: 25px 50px;
• top and bottom paddings are 25px
• right and left paddings are 50px
div {
padding: 25px 50px;
}

Unit - 3 CSS(Cascading Style Sheet).pptx

More Related Content

Similar to Unit - 3 CSS(Cascading Style Sheet).pptx (20)

More from kushwahanitesh592 (6)

Recently uploaded (20)

Unit - 3 CSS(Cascading Style Sheet).pptx