Scribd
Upload
32 views39 pages

CSS ppt1

The document provides an overview of Cascading Style Sheets (CSS) used for web presentation, highlighting its advantages such as separating content from presentation and defining styles in one place. It explains the creation of external, internal, and inline style sheets, along with examples of CSS rules and selectors. Additionally, it describes the expected output for a styled container with specific background and border properties.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views39 pages

CSS ppt1

The document provides an overview of Cascading Style Sheets (CSS) used for web presentation, highlighting its advantages such as separating content from presentation and defining styles in one place. It explains the creation of external, internal, and inline style sheets, along with examples of CSS rules and selectors. Additionally, it describes the expected output for a styled container with specific background and border properties.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

SRI RAMAKRISHNA INSTITUTE OF TECHNOLOGY

(An Autonomous Institution)


Accredited by NAAC with 'A' Grade,
Approved by AICTE, permanently Affiliated to Anna University, Chennai.

Course : Full Stack


Programming
Module : II
Faculty : Dr. S. Karthikeyini
Department : Computer Science & Engineering

1
Cascading Style Sheets (CSS)
CSS
• Markup language used in the web document
for presentation purpose.
• Various elements like text, font and colour are
used in CSS for presentation.
• Can be used to bring styles in the web
documents.
• By combining with HTML document, flexibility
of content is achieved.
CSS
A Cascading Style Sheet (CSS) describes the appearance of an
HTML page in a separate document
CSS has the following advantages
• It lets you separate content from presentation.
• It lets you define the appearance and layout of all the pages
in your web site in a single place.
• It can be used for both HTML and XML pages
External
Create the External Style Sheet
style sheet
An external style sheet is a separate file where you define the CSS rules for your
website.
It should be created using any text editor (like Notepad, VS Code, etc.).
The file should be saved with a .css extension.
Example: mystyle.css
2. Write the CSS Rules
In the mystyle.css file, you define the styles using CSS selectors and properties:
✅ Example :
hr { color: sienna; } p { margin-left: 20px; } body { background-image:
url("images/back40.gif"); }
👉 Explanation of Rules:
hr { color: sienna; } → Sets the color of the horizontal line (<hr>) to sienna.
p { margin-left: 20px; } → Adds a left margin of 20px to all paragraph (<p>) elements.
body { background-image: url("images/back40.gif"); } → Sets a background image for
the body using the specified file path.
mystyle.css
HTML
Internal Style Sheet
Purpose of Internal CSS
• Internal CSS is used when a single HTML document needs to have a unique style that applies
only to that specific document.
• Internal CSS is defined within the <style> tag in the <head> section of an HTML document .
Explanation
Inline Style Sheet
An inline style is used to apply a unique style to a single HTML element
directly within the HTML tag using the style attribute.
Types of CSS
CSS Selectors
Expected Output
• [Container]
• Light gray background with a black border.
• Positioned box inside the container:
– Light blue background.
– Blue border.
– Text centered inside the box.

You might also like