Scribd
Upload
2 views

Unit-2.3 CSS

The document outlines the CSE4001 course on Internet and Web Programming, specifically focusing on HTML and CSS. It covers CSS basics, including syntax, selectors, and methods of embedding CSS into HTML, along with detailed explanations of various CSS properties such as backgrounds, borders, and text formatting. Additionally, it includes exercises and questions for students to reinforce their understanding of CSS concepts.

Uploaded by

aadijain2022
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Unit-2.3 CSS

The document outlines the CSE4001 course on Internet and Web Programming, specifically focusing on HTML and CSS. It covers CSS basics, including syntax, selectors, and methods of embedding CSS into HTML, along with detailed explanations of various CSS properties such as backgrounds, borders, and text formatting. Additionally, it includes exercises and questions for students to reinforce their understanding of CSS concepts.

Uploaded by

aadijain2022
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

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

You might also like