CSE4001 - Internet and Web Programming
Course Type: LTP Credits: 4
Prepared by
Dr Komarasamy G
Associate Professor (Grade-2)
School of Computing Science and Engineering
VIT Bhopal University
Unit-2 HTML and CSS
HTML5 Basics – Formatting – Colors – Images
– Links – Tables – Lists – Layout –
Forms–Canvas –Media.
CSS3 Basics – Selectors - Box Model -
Backgrounds and Borders -Text Effects –
Advanced Features.
Unit-2 CSS / Dr Komarasamy G 2
Introduction to CSS
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
p{
<html>
font-family: verdana;
<head>
font-size: 20px;
<style>
}
body {
</style>
background-color: lightblue;
</head>
}
<body>
<h1>My First CSS Example</h1>
h1 {
<p>This is a paragraph.</p>
color: white;
</body>
text-align: center;
</html>
}
Unit-2 CSS / Dr Komarasamy G 3
CSS Syntax
Unit-2 CSS / Dr Komarasamy G 4
CSS - The id Selector
• The id selector uses the id attribute of an HTML element to
select a specific element.
• The id of an element should be 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.
Unit-2 CSS / Dr Komarasamy G 5
CSS - The id Selector
Unit-2 CSS / Dr Komarasamy G 6
CSS - The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.
Unit-2 CSS / Dr Komarasamy G 7
Three Ways to Insert CSS
1. External style sheet
2. Internal style sheet
3. Inline style
External Style Sheet
•With an external style sheet, you can change the look of an entire
website by changing just one file!
•Each page must include a reference to the external style sheet file
inside the <link> element. The <link> element goes inside the
<head> section
Unit-2 CSS / Dr Komarasamy G 8
Three Ways to Insert CSS
Unit-2 CSS / Dr Komarasamy G 9
Three Ways to Insert CSS
Inline Styles
• 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.
Unit-2 CSS / Dr Komarasamy G 10
CSS Backgrounds properties
background-color
CSS background properties: Example
• background-color body {
background-color: lightblue;
• background-image }
• background-repeat With CSS, a color is most often specified by:
• background-attachment a valid color name - like "red"
a HEX value - like "#ff0000"
• background-position an RGB value - like "rgb(255,0,0)"
Unit-2 CSS / Dr Komarasamy G 11
CSS Backgrounds
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.
https://www.w3schools.com/css/css_background.asp
Unit-2 CSS / Dr Komarasamy G 12
CSS Backgrounds
CSS background properties:
• background-repeat
• background-attachment
• background-position
More Details:
https://www.w3schools.com/css/css_background.asp
Unit-2 CSS / Dr Komarasamy G 13
CSS Border Style
• 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
• The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
Unit-2 CSS / Dr Komarasamy G 14
CSS Border Style
Unit-2 CSS / Dr Komarasamy G 15
CSS Border Style
Unit-2 CSS / Dr Komarasamy G 16
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.
• The border-width property can have from one to four values
– top border, right border, bottom border, and the left border
Unit-2 CSS / Dr Komarasamy G 17
CSS - Border Width
<html> p.five {
<head> border-style: double;
<style> border-width: 15px;
p.one { }
border-style: solid; color: blue;
border-width: 5px; p.six {
} border-style: double;
border-width: thick;
p.two { }
border-style: solid;
border-width: medium; p.seven {
} border-style: solid;
border-width: 2px 10px 4px 20px;
p.three { }
border-style: dotted; </style>
border-width: 2px; </head>
} <body>
p.four { <h2>The border-width Property</h2>
border-style: dotted; <p>This property specifies the width of the
border-width: thick; four borders:</p>
} Unit-2 CSS / Dr Komarasamy G 18
CSS - Border Width
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>
</body>
</html>
Unit-2 CSS / Dr Komarasamy G 19
CSS - Border Width
Unit-2 CSS / Dr Komarasamy G 20
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)"
• transparent
• The border-color property can have from one to four values
(top border, right border, bottom border, and the left border).
• If border-color is not set, it inherits the color of the element.
Unit-2 CSS / Dr Komarasamy G 21
CSS - Border Color
Unit-2 CSS / Dr Komarasamy G 22
CSS - Border - Shorthand Property
• There are many properties to consider when dealing with
borders.
• 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
Unit-2 CSS / Dr Komarasamy G 23
CSS - Border - Shorthand Property
<html>
<head>
<style>
p{
border-left: 10px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-left Property</h2>
<p>Welcome <br>
To Jain University <br>
Bangalore </p>
</body>
</html>
Unit-2 CSS / Dr Komarasamy G 24
CSS – border Bottom Property
<html>
<head>
<style>
p{
border-bottom: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-bottom
Property</h2>
<p> bottom-color.</p>
</body>
</html>
Unit-2 CSS / Dr Komarasamy G 25
CSS – Rounded borders
Unit-2 CSS / Dr Komarasamy G 26
CSS – Rounded borders
<html>
<head> </head>
<style> <body>
p.normal {
border: 2px solid red; <h2>The border-radius Property</h2>
} <p>This property is used to add rounded
borders to an element:</p>
p.round1 { <p class="normal">Normal border</p>
border: 2px solid red; <p class="round1">Round border</p>
border-radius: 5px; <p class="round2">Rounder border</p>
} <p class="round3">Roundest border</p>
</body>
p.round2 { </html>
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
Unit-2 CSS / Dr Komarasamy G 27
CSS –borders – More Examples
Unit-2 CSS / Dr Komarasamy G 28
CSS box-sizing Property
Unit-2 CSS / Dr Komarasamy G 29
CSS Selector
• The [attribute] selector is used to select elements with a specified attribute.
https://www.w3schools.com/css/css_attribute_selectors.asp
Unit-2 CSS / Dr Komarasamy G 30
Embedding CSS to Html
• Styling HTML with CSS
• 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.
CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file
Unit-2 CSS / Dr Komarasamy G 31
Embedding CSS to Html
CSS can be added to HTML elements in 3 ways:
• Inline - by using the style attribute in HTML elements
Unit-2 CSS / Dr Komarasamy G 32
Embedding CSS to Html
External CSS
• An external style sheet is used to define the style for many HTML pages.
File Name: "styles.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
} <html>
p{ <head>
color: red; <link rel="stylesheet" href="styles.css">
</head>
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Unit-2 CSS / Dr Komarasamy G 33
CSS - Formatting fonts
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
Unit-2 CSS / Dr Komarasamy G 34
CSS Border
• The CSS border property defines a border around an HTML
element
Unit-2 CSS / Dr Komarasamy G 35
CSS Text
• The CSS text is styled with some of the text formatting properties.
Unit-2 CSS / Dr Komarasamy G 36
CSS 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.
Unit-2 CSS / Dr Komarasamy G 37
CSS Text Decoration
• The text-decoration property is used to set or remove decorations from text.
Unit-2 CSS / Dr Komarasamy G 38
CSS Text Transformation
• The text-transform property is used to specify uppercase and
lowercase letters in a text.
Unit-2 CSS / Dr Komarasamy G 39
CSS Text Indentation
• The text-indent property is used to specify the indentation of
the first line of a text.
Unit-2 CSS / Dr Komarasamy G 40
CSS Letter Spacing
• The letter-spacing property is used to specify the space
between the characters in a text.
Unit-2 CSS / Dr Komarasamy G 41
CSS Text Direction
• The direction property is used to change the text direction of an
element.
Unit-2 CSS / Dr Komarasamy G 42
CSS Text Shadow
• The text-shadow property adds shadow to text.
Unit-2 CSS / Dr Komarasamy G 43
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
Unit-2 CSS between
Dr Komarasamy G words in a text 44
Questions
1. Summarize the use of CSS.
2. Write the CSS Syntax with simple example.
3. Identify the use of CSS Selectors with simple example.
4. List and explain the ways of Insert the CSS. Write the sample
output.
5. Describe with example for Embedding CSS with HTML.
6. Explain with example for Formatting fonts in CSS.
7. Summarize the Text & background color changes in CSS.
8. List the CSS Text properties.
9. Write an example for CSS Text Transformation with sample
output.
10. Write an example for various borders available in CSS.
11. Explain with example for boxing in CSS.
Unit-2 CSS / Dr Komarasamy G 45
