Scribd
Upload
29 views

Css 1

CSS Notes

Uploaded by

Lakshmana Rao Rowthu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Css 1

CSS Notes

Uploaded by

Lakshmana Rao Rowthu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 108

CSS

Topics
• CSS Introduction,
• Advantages, Uses,
• CSS syntax,
• Style Specification format:Css Selectors,
• Types of CSS(Levels of CSS),
• Box Model,
• Variousproperties(Colors,Background,Border,Margins,Pad
ding,Height and width,Text ,Font,links)
CSS
• CSS stands for Cascading Style Sheets
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes
• cascading style sheets are a language used to simplify the process
of making a webpage.
• CSS is used to handle some parts of the webpage. With the help of
CSS, we can control the colour of text and style of fonts, and we can
control the spacing between the paragraph and many more things.
• CSS is easy to understand but provides strong control on the Html
documents.
• CSS is combined with HTML 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
Advantages of CSS
Faster page speed: It has a faster page speed than other code's page speeds. With the
help of the CSS rule, we can apply it to all occurrences of certain tags in HTML
documents.
Better user experience: CSS makes a webpage very attractive to the eyes. Also, CSS
makes it user-friendly. When the button or text is in a proper format, it improves the
user experience.
Quicker Development time: With the help of CSS, we can specify the format and style
the multiple pages into one code string. In cascading style sheet, we can make a
duplicate copy of several website pages.
If we make a webpage, it has the same formatting, looks, and feel, so with the help of
the CSS rule for one page, and it is sufficient for all the pages.
Easy Formatting changes: In CSS, if we need to make changes in the format, it is very
easy; we only need to change the one-page format it will automatically apply to the
other pages of CSS.
There is no need to correct individual pages in a CSS style sheet. If we fix a CSS style
sheet, it will automatically update the other CSS style sheet.
Compatibility: Compatibility is very important in today's age. If we create any webpage,
it should be very responsive and user-friendly. CSS is used with Html to make webpage
design responsive.
Why do We Use CSS?
As we all know, CSS is a powerful style sheet language used to control the HTML
document to improve the webpage design.

• CSS provides efficiency in webpage design: It also provides updates so our


webpage works appropriately. With the help of CSS, we can create and apply
those rules within the website. If we create a webpage design separately, we can
make changes in our style sheet, and it will affect all the style sheets.
• CSS provides faster page download: CSS helps with faster page download
because when we download a page, we get the cache that helps to load a page,
but with the help of CSS, we can lead to load a lighter page which helps to
improve the performance.
• CSS is easy to work: In CSS, we can visual aspect of the website separate entirely
from the content; using CSS, we can create a website that allows us to make
quick layou0074.
CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
 Example of CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
colour: white;
text-align: center;
}
p{
font-family: Verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:

• 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.
Style Specification Format in CSS
Style Specification Format in CSS
Style Specification
• The set of rules and declarations in CSS that
are specified using <style> tag or "style"
attribute is called style specification.

• Style makes the HTML elements look beautiful


on a webpage and attracts more users. We can
provide style to the elements utilizing CSS.
Style Specification Format
The style specification format is the structure that is utilized to define the
rules for styling the HTML elements.

Syntax:

selector {
property1: value1;
property2: value2;
...
property_n: value_n;
}

The "selector" is utilized to select the HTML element on which we want to


apply the style. The "property1" and "property2" …. property_n are the
properties that are utilized to give style to the selected element. We can put
many styles on a single element utilizing different CSS properties.
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id,
class)
2. Combinator selectors (select elements based on a
specific relationship between them)
3. Pseudo-class selectors (select elements based on a
certain state)
4. Pseudo-elements selectors (select and style a part of an
element)
5. Attribute selectors (select elements based on an
attribute or attribute value)
1. The CSS element Selector

• The element selector selects HTML elements


based on the element name.
Example
• Here, all <p> elements on the page will be
center-aligned, with a red text color:
• p{
text-align: center;
color: red;
}
2.The CSS id Selector
• 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.
Example
• The CSS rule below will be applied to the HTML element
with id="para1":
#para1 {
text-align: center;
color: red;
}
3. The CSS class Selector

• 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.
Example
• In this example all HTML elements with
class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}
4. The CSS Universal Selector

• The universal selector (*) selects all HTML


elements on the page.
Example: The CSS rule below will affect every
HTML element on the page:

*{
text-align: center;
color: blue;
}
5. 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):
Example
In this example we have grouped
• h1 { the selectors from the code above:
text-align: center;
color: red;
}
h1, h2, p {
h2 {
text-align: center;
text-align: center;
color: red; color: red;
} }
p{
text-align: center;
color: red;
}
All CSS Simple Selectors

Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"

* * Selects all elements

element p Selects all <p> elements

element,eleme div, p Selects all <div> elements and all <p> elements
nt,..
Types of CSS or Levels of CSS

Provide CSS Styles in 3 Ways:


Add CSS To HTML
• When a browser reads a style sheet, it will
format the HTML document according to the
information in the style sheet.
• Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
1. External CSS
2. Internal CSS
3. Inline CSS
1. External CSS

• With an external style sheet, you can change the look of an entire website
by changing just one file!
• Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
• Example: External styles are defined within the <link> element, inside the
<head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
1. External CSS: css file
• An external style sheet can be written in any text editor, and
must be saved with a .css extension.
• The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks like:
"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
2. Internal CSS
• An internal style sheet may be background-color: linen;
used if one single HTML page}
has a unique style.
• The internal style is definedh1 {
inside the <style> element, color: maroon;
inside the head section. margin-left: 40px;
• Example: Internal styles are}
defined within the <style></style>
element, inside the <head></head>
section of an HTML page: <body>

<h1>This is a heading</h1>
<!DOCTYPE html> <p>This is a paragraph.</p>
<html>
<head> </body>
<style> </html>
body {
3. Inline CSS
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
• Example: Inline styles are defined within the "style" attribute of the
relevant element:

• <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
CSS Comments
• 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 */:

Example
/* This is a single-line comment */
p{
color: red;
Box Model
CSS Box Model
• All HTML elements can be considered as boxes. In CSS,
the term "box model" is used when talking about
design and layout.
• The CSS box model is essentially a box that wraps
around every HTML element. It consists of: margins,
borders, padding, and the actual content.
• The image below illustrates the box model:
Explanation of the different parts:
1.Content - The content of the box, where text and images
appear
2.Padding - Clears an area around the content. The padding is
transparent
3.Border - A border that goes around the padding and content
4.Margin - Clears an area outside the border. The margin is
transparent
• The box model allows us to add a border around elements,
and to define space between elements.
Example: Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Properties of
• Colors
• Background
• Border
• Margins
• Padding
• Height and width
• Text
• Font
• links
Colors
• CSS Background Color
• Text Color
• Border Color
CSS Colors

• Colors are specified using predefined color names, or


RGB, HEX, HSL, RGBA, HSLA values.
• CSS Color Names
• In CSS, a color can be specified by using a color
name:
1. CSS Background Color
• You can set the background color for HTML
elements:
• Example:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
2. CSS Text Color: You can set the color of text:

Example:

<h1 style="color:Tomato;">Hello World</h1>


<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
3. CSS Border Color: You can set the color of
borders:

Example:

<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 Color Values

Example
<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>
Backgrounds
CSS Backgrounds

• The CSS background properties are used to


define the background effects for elements.
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1. CSS background-color
• The background-color property specifies the background color of an
element.
Example: The background color of a page is set like this:

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:

body {
background-color: lightblue;
opacity:0.3;
}
2. CSS Background Image
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.
Example
• The background image for a page can be set like this:

body {
background-image: url("paper.gif");
}
body { background-image:
url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');}
body {background-image:linear-gradient(red,yellow); }
body {background-image:radial-gradient(red,yellow); }
body {background-image:conic-gradient(red,blue,yellow); }
3. CSS Background 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:
• Example
body {
background-image: url("gradient_bg.png");
background-repeat: norepeat
}
CSS background-repeat: no-repeat
• Showing the background image only once is
also specified by the background-
repeat property:
Example
• Show the background image only once:

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.
Example
• Position the background image in the top-right corner:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom
4. 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):
• Example: Specify that the background image should be fixed:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Or
background-attachment: scroll;
5. CSS background - Shorthand property
• To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
• Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Example: Use the shorthand property to set the background properties in


one declaration:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
Borders
Border-Style
border-width: thin, medium, or thick
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-radius
CSS Borders
• CSS Border Properties: T he CSS border properties allow you to specify the
style, width, and color of an element's border.

1. CSS Border Style: The border-style property specifies what kind of
border to display.
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
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
Example: Demonstration of the different border
styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
2. 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-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}
• Specific Side Widths: The border-width property can have from one to
four values (for the top border, right border, bottom border, and the left
border):
• Example

p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom
and 35px left */
}
3. 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
• Note: If border-color is not set, it inherits the color
of the element.
Example
Demonstration of the different border colors:
• p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
• Specific Side Colors
• The border-color property can have from one
to four values (for the top border, right border,
bottom border, and the left border).
• Example
• p.one { border-style: solid;
border-color: red green blue yellow; }
/* red top, green right, blue bottom and yellow
left */
4.CSS Border - Individual Sides

• In CSS, there are also properties for specifying


each of the borders (top, right, bottom, and left):
• Example
• p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
• 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:
border-style: dotted;
– all four borders are dotted
Example
• /* Four values */
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{
border-style: dotted;
}
CSS Border - Shorthand Property
• 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;
background-color: lightgrey;
}
Bottom Border
• p{
border-bottom: 6px solid red;
background-color: lightgrey;
}
5. CSS Rounded Borders
• The border-radius property is used to add
rounded borders to an element
• Example

p{
border: 2px solid red;
border-radius: 5px;
}
All CSS Border
Properties
Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-widt Sets the width of the bottom border


h

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border


border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius Sets all the four border-*-radius properties for rounded


corners

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders


Margins
CSS Margins
• 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
• 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
Example: Set different margins for all four sides
of a <p> 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.
• The margin property is a shorthand property for the
following individual margin properties:
margin-top
margin-right
margin-bottom
margin-left
• So, here is how it works:
• If the margin property has four values:
• margin: 25px 50px 75px 100px;
– top margin is 25px
– right margin is 50px
– bottom margin is 75px
– left margin is 100px
2. 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!
• Example: Demonstration of margin collapse:

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
All CSS Margin Properties

Property Description

margin A shorthand property for setting the margin properties in one


declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element


Padding
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
• Example: Set different padding for all four
sides of a <div> element:

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: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
• Examples: div { padding: 25px 50px 75px 100px; }
All CSS Padding Properties

Property Description

padding A shorthand property for setting all the padding properties in


one declaration

padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element


Height and Width
CSS Height and Width
• CSS Setting height and width: The height and width properties are
used to set the height and width of an element.

• The height and width properties do not include padding, borders, or


margins. It sets the height/width of the area inside the padding,
border, and margin of the element.

• CSS height and width Values: The height and width properties may
have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
• Example1:Set the height and width of a <div> element:

div {
height: 200px;
width: 50%;
background-color: powderblue;
}
• Example2:Set the height and width of another <div>
element:

div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Text
CSS Text
1)Text Color: The color property is used to set the color of the text. The
color is specified by:

 a color name - like "red"


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
• The default text color for a page is defined in the body selector.
Example
body {
color: blue;
}

h1 {
color: green;
}
2)Text Alignment: The text-align property is used to set the
horizontal alignment of a text.
• A text can be left or right aligned, centered, or justified.
• The following example shows center aligned, and left and right
aligned text (left alignment is default if text direction is left-to-
right, and right alignment is default if text direction is right-to-left):
Example
• h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
• Text Direction: The direction and unicode-bidi properties can be
used to change the text direction of an element:
EX:
p{
direction: rtl;
unicode-bidi: bidi-override;
}
Vertical Alignment
• The vertical-align property sets the vertical alignment of an
element.
• This example demonstrates how to set the vertical alignment of an
image in a text:
EX: img.top { vertical-align: top; }

img.middle { vertical-align: middle; }

img.bottom { vertical-align: bottom;}


3)Text Decoration: The text-decoration property is used
to set or remove decorations from text.
• The value text-decoration: none; is often used to
remove underlines from links:
• Example: a { text-decoration: none; }
• The other text-decoration values are used to decorate
text:
• Example

h1 { text-decoration: overline; }

h2 { text-decoration: line-through; }

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

Example

p.uppercase { text-transform: uppercase; }

p.lowercase { text-transform: lowercase; }

p.capitalize { text-transform: capitalize; }


5)CSS Text Spacing
1)Text Indentation
• The text-indent property is used to specify the indentation of
the first line of a text:
• Example: p { text-indent: 50px; }
2)Letter Spacing
• The letter-spacing property is used to specify the space
between the characters in a text.
• The following example demonstrates how to increase or
decrease the space between characters:
• Example:

h1 { letter-spacing: 3px; }

h2 { letter-spacing: -3px; }
3)Line Height: The line-height property is used to specify the space
between lines:
• p.small { line-height: 0.8; }

p.big { line-height: 1.8; }


4)Word Spacing: The word-spacing property is used to specify the
space between the words in a text.
• The following example demonstrates how to increase or decrease
the space between words:
• h1 { word-spacing: 10px; }

h2 { word-spacing: -5px; }
5)White Space: The white-space property specifies how white-space
inside an element is handled.
• This example demonstrates how to disable text wrapping inside an
element:
p { white-space: nowrap;}
6)CSS Text Shadow
1)Text Shadow: The text-shadow property adds
shadow to text.
• In its simplest use, you only specify the horizontal
shadow (2px) and the vertical shadow (2px):

Example1: h1 { text-shadow: 2px 2px; }


Example2: h1 { text-shadow: 2px 2px red; }
Example2: h1 { text-shadow: 2px 2px 5px red; }
All CSS Text Properties

Property Description

color Sets the color of text

direction Specifies the text direction/writing direction

letter-spacing Increases or decreases the space between characters in a text

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

text-transform Controls the capitalization of text

text-overflow Specifies how overflowed content that is not displayed should be signaled to the user

unicode-bidi Used together with the direction property to set or return whether the text should be overridden to
support multiple languages in the same document

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a text


Fonts
CSS Fonts

• The CSS font properties define the font family,


boldness, size, and the style of a text.
• CSS Font two types of font family names:
• generic family - a group of font families with a
similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New
Roman" or "Arial")
Generic family Font family Description
Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters

Sans-serif Arial "Sans" means without - these fonts do not


Verdana have the lines at the ends of characters

Monospace Courier New All monospace characters have the same


Lucida Console width
1)Font Family
• The font family of a text is set with the font-
family property.
• The font-family property should hold several font
names as a "fallback" system. If the browser does
not support the first font, it tries the next font, and
so on.
• Start with the font you want, and end with a
generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.
• Example: Specify the font for three paragraphs:

.serif {
font-family: "Times New Roman", Times, serif;
}

.sansserif {
font-family: Arial, Helvetica, sans-serif;
}

.monospace {
font-family: "Lucida Console", Courier, monospace;
}
2. CSS Font Style
1)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)
• Example

p.normal { font-style: normal; }

p.italic { font-style: italic; }

p.oblique { font-style: oblique; }


2. Font Weight: The font-weight property specifies the
weight of a font:
• Example
• p.normal { font-weight: normal; }
p.thick { font-weight: bold; }
3.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;}
3.CSS Font Size
1)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:
• Example
• h1 { font-size: 40px; }

h2 { font-size: 30px;}

p { font-size: 14px;}
• Set Font Size With Em: To allow users to resize the text
(in the browser menu), many developers use em instead
of pixels.
• The em size unit is recommended by the W3C.
• 1em is equal to the current font size. The default text size
in browsers is 16px. So, the default size of 1em is 16px.
• The size can be calculated from pixels to em using this
formula: pixels/16=em
• Example
• h1 { font-size: 2.5em; /* 40px/16=2.5em */}

h2 { font-size: 1.875em; /* 30px/16=1.875em */}

p { font-size: 0.875em; /* 14px/16=0.875em */ }


Responsive Font Size
• The text size can be set with a vw unit, which
means the "viewport width".
• That way the text size will follow the size of
the browser window:
• Example
• <h1 style="font-size:10vw">Hello World</h1>
4. CSS Google Fonts
• Google Fonts
• If you do not want to use any of the standard fonts in HTML, you can use the
Google Fonts API to add hundreds of other fonts to your page.
• Just add a stylesheet link and refer to a font family of your choice:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body { font-family: "Sofia";
font-size: 22px; }

</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
5.Shortand

Font Property: 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
• Example
• Set some font properties with the shorthand declaration:
• p.a { font: 20px Arial, sans-serif;}

p.b { font: italic small-caps bold 12px/30px Georgia, serif; }


All CSS Font Properties
Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font


Links
CSS Links
1)Styling Links: Links can be styled with any CSS
property (e.g. color, font-family, background, etc.).
• Example: a { color: hotpink; }
• In addition, links can be styled differently
depending on what state they are in.
• 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
• Example
• /* 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;}
• 2) Text Decoration
• The text-decoration property is mostly used to remove underlines from links:
• Example

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
3. Background Color
• The background-color property can be used to specify a background color for
links:
• Example

a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
4. Link Buttons: This example demonstrates a more advanced
example where we combine several CSS properties to display links
as boxes/buttons:
• Example

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;
}
Thank you

You might also like