Scribd
Upload
13 views38 pages

FOC-M4-part 2

CSS (Cascading Style Sheets) is a stylesheet language that separates content from design, enhancing web page aesthetics and maintainability. It can be applied in three ways: inline, internal, and external CSS, each with its own advantages and disadvantages. CSS allows for precise styling of elements, responsive design, and improved performance through caching of external stylesheets.

Uploaded by

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

FOC-M4-part 2

CSS (Cascading Style Sheets) is a stylesheet language that separates content from design, enhancing web page aesthetics and maintainability. It can be applied in three ways: inline, internal, and external CSS, each with its own advantages and disadvantages. CSS allows for precise styling of elements, responsive design, and improved performance through caching of external stylesheets.

Uploaded by

gthmachu007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

◤

CSS

◤
Introduction

▪ CSS (Cascading Style Sheets) is a stylesheet language used to control

the appearance and layout of web pages.

▪ It allows developers to separate content (HTML) from design, making

websites more visually appealing and easier to maintain.


Why Use CSS?
◤

▪ Separation of Content and Design –


▪ Keeps HTML clean by handling styling separately.

▪ Consistency –
▪ Ensures a uniform look across multiple web pages.

▪ Flexibility & Control –


▪ Enables precise styling of elements, including colors, fonts, layouts,
and animations.

▪ Improved Performance –
▪ External CSS files can be cached, reducing load times.

▪ Responsive Design –
▪ Helps create mobile-friendly websites that adapt to different screen
sizes.

◤
Basic CSS Syntax

▪ CSS (Cascading Style Sheets) follows a simple syntax to define styles for
HTML elements.

▪ The basic structure consists of selectors, properties, and values.


selector {
property: value;
}
◤
Basic CSS Syntax

•Selector:
•Targets the HTML element to apply styles.
•Property:
•Specifies the style aspect to be changed (e.g., color, font-size).
•Value:
•Defines the setting for the property (e.g., blue, 16px).
•Declaration:
•A combination of property and value.
•Declaration Block:
•Multiple declarations enclosed in { } and separated by semicolons (;).

◤
Example

p{

color: blue;

font-size: 16px;

}
•p → Selector (Targets all <p> elements)
•color → Property (Defines text color)
•blue → Value (Sets text color to blue)
•font-size → Property (Defines text size)
•16px → Value (Sets text size to 16 pixels)
◤
Types of CSS

▪ CSS (Cascading Style Sheets) can be applied in three ways:


1. Inline CSS
2. Internal CSS
3. External CSS

◤
1. Inline CSS

▪ Inline CSS is applied directly within an HTML tag using the style attribute.

▪ Inline CSS refers to applying CSS styles directly within an HTML element
using the style attribute.

▪ Styles are applied directly to inpidual HTML elements.

▪ This method is useful for quick, one-off styles or testing but is not
recommended for large-scale projects due to its limitations in scalability and
maintainability.
Example
◤

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1 style="color: blue; font-size: 24px;">Hello, Inline CSS!</h1>

<p style="color: green;">This paragraph is styled using inline CSS.</p>

</body>

</html>
◤
Advantages

•Quick and Easy:

•Great for applying quick fixes or testing styles during development.

•Overrides Other Styles:

•Useful when you need to override external or internal styles for specific elements.

•No Additional Files:

•Does not require a separate CSS file, which can simplify small projects.

◤
Disadvantages

•Poor Maintainability:
•Inline CSS makes the HTML code messy and difficult to manage for larger
projects.
•Limited Reusability:
•Styles cannot be reused, leading to redundancy and inefficiency.
•Performance Issues:
•Increases HTML file size and reduces performance as styles are not cached like
external CSS.
•Low Readability:
•Hard to read and debug when scattered throughout the HTML.
◤
Internal CSS

▪ Internal CSS refers to defining styles within the <style> tag in the <head> section

of an HTML document.

▪ These styles apply to all elements in the same HTML file, offering better

organization compared to inline CSS while maintaining control within a single file.

▪ Example: <style> body { background-color: lightblue; } </style>

<!DOCTYPE html>

◤
<html lang="en">

<head>

<title>Internal CSS Example</title>

<style>

body { background-color: lightblue; }

</style>

</head>

<body>

<h1>Welcome to My Page</h1>

<p>This is an example of using internal CSS to style a webpage.</p>

</body>

</html>
◤
Advantages

1. File Consolidation:
▪ Styles are included in the same file as the HTML, making it easy to share
and distribute a single file.

2. Scope:
▪ Styles affect only the document in which they are defined, avoiding
unintentional application across multiple pages.

3. Ease of Debugging:
▪ No need to switch between files to modify styles.
◤
Disadvantages

•Limited Reusability:
•Styles cannot be reused across multiple files, leading to redundancy.
•Increased File Size:
•Mixing styles and content can make the HTML file larger and harder to maintain.
•Performance:
•External style sheets are cached, but internal CSS is processed each time the
page loads, potentially slowing down rendering.

◤
External CSS

▪ External CSS refers to defining CSS rules in a separate .css file and linking it

to one or more HTML documents.

▪ This approach separates content (HTML) from design (CSS), improving

maintainability and reusability across multiple web pages.

▪ To use an external CSS file, you link it to your HTML document using the

<link> tag within the <head> section.


body {
Example
◤
font-family: Arial, sans-serif;

background-color: #FFFF00;

margin: 0;

padding: 0; }

h1 {

color: darkblue;

text-align: center; }

p{

color: gray;

font-size: 16px;

line-height: 1.5; }

Example
◤
<!DOCTYPE html>

<html lang="en">

<head>

<title>External CSS Example</title>

<link rel="stylesheet" href=“design.css">

</head>

<body>

<h1>Welcome to External CSS</h1>

<p>This paragraph is styled using external CSS.</p>

</body>

</html>
◤
Advantages
•Reusability:

•One CSS file can style multiple HTML pages, reducing redundancy.

•Better Maintainability:

•Changes made to the CSS file automatically reflect across all linked HTML files.

•Clean Code:

•Separates structure (HTML) from design (CSS), enhancing readability.

•Caching:

•Browsers cache external CSS files, improving performance for subsequent visits.
◤
Disadvantages
▪ Dependency:
▪ The webpage relies on the external file, and styles won't load if the file is
missing or inaccessible.

▪ Latency:
▪ Additional HTTP requests to fetch the CSS file may increase initial page
load time.

▪ Complexity:
▪ Requires managing multiple files, which may be challenging for beginners.

◤
When to Use External CSS?

•Large Projects:

•Essential for managing styles in projects with multiple pages.

•Reusable Styles:

•When styles need to be consistent across various pages.

•Team Projects:

•Helps maintain a clean structure, enabling team collaboration.


◤
Comparison

Feature Inline CSS Internal CSS External CSS

Location Inside HTML elements <style> in <head> Separate .css file

Reusability None Limited High

Performance Slower (large projects) Faster (cached resources) Fastest (cached resources)

◤
A CSS Style Primer

▪ You now have a basic knowledge of CSS style sheets and how they are based on
style rules that describe the appearance of information in web pages.

▪ CSS includes various style properties that are used to control fonts, colors,
alignment, and margins, to name just a few.

▪ The style properties in CSS can be generally grouped into two major categories: .

▪ Layout properties—Consist of properties that affect the positioning of elements


on a web page, such as margins, padding, alignment, and so on .

▪ Formatting properties—Consist of properties that affect the visual display of


elements within a website, such as the font type, size, color, and so on
◤
Layout Properties

▪ CSS layout properties are used to determine how content is placed on a


web.
▪ One of the most important layout properties is the display property, which
describes how an element is displayed with respect to other elements.
▪ There are four possible values for the display property page.
✔ block—The element is displayed on a new line, as in a new paragraph.
✔ list-item—The element is displayed on a new line with a list-item mark
(bullet) next to it.
✔ inline—The element is displayed inline with the current paragraph.
✔ none—The element is not displayed; it is hidden.

◤
Layout Properties

✔ Width and height property values can be specified in several


different units of measurement:

✔ . in—inches . cm—centimeters . mm—millimeters .


px—pixels . pt—point
◤
Formatting Properties

▪ CSS formatting properties are used to control the appearance


of content on a web page, as opposed to controlling the
physical positioning of the content.

▪ One of the most popular formatting properties is the border


property.
◤
▪ The following font properties are used to set the various
parameters associated with fonts:
▪ font-family—The family of the font .

▪ font-size—The size of the font.

▪ font-style—The style of the font (normal or italic)

▪ font-weight—The weight of the font (light, medium, bold, and


so on.
◤
CSS SELECTORS

▪ CSS selectors are patterns or rules used to select and style


specific HTML elements on a webpage.

▪ By targeting elements, attributes, classes, or IDs, selectors


enable precise styling.

◤
Type Selector
▪ The type selector is a CSS selector used to target all elements of a specific
type, such as <p>, <h1>, <p> etc.
▪ It applies styles to every instance of the specified element on the webpage.
▪ The type selector targets elements by their tag name and applies styles to
all occurrences of the specified tag in the document.
▪ Syntax:
element
{
property: value;
}
◤
Type Selector

▪ Example usage:

{
color: blue;
}

▪ This applies the style to all <p> elements.

◤
Class Selectors

▪ The class selector in CSS is used to target HTML elements that have a specific
class attribute.

▪ It allows for more specific styling than type selectors and is often used for
grouping styles that apply to multiple elements.

▪ A class can be applied to multiple elements.

▪ Elements can have multiple classes.

▪ Class selector offers higher specificity compared to type selectors.

▪ Classes can be used on multiple elements, reducing code duplication.


◤
Class Selectors
▪ Syntax:
.className
{
property: value;
}

▪ Example usage:
<style>
.highlight
{
background-color: yellow;
}
</style>
<p class="highlight">This paragraph is highlighted.</p>

▪ The highlight class applies the style to the elements with the class="highlight" attribute.

Styling Elements with a Single Class


◤

CSS:

.button {

background-color: blue;

color: white;

padding: 10px 20px;

border-radius: 5px;

HTML:

<button class="button">Click Me</button>


Styling Multiple Elements with the Same Class
◤
CSS:

.highlight {

background-color: yellow;

font-weight: bold;

HTML:

<p class="highlight">This text is highlighted.</p>

<p class="highlight">This text is also highlighted.</p>

<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.header {
background-color: #0044cc;
color: white;
text-align: center;
}
.footer {
background-color: #333;
color: white;
text-align: center;
margin-top: 20px;
}
.main {
font-size: 16px;
line-height: 1.5;
}
</style>
<body>

<p class="header">Welcome to My Website</p>

<p class="main">This is the main content of the page, styled uniquely using the ID

selector.</p>

<p class="footer">Footer Section</p>

</body>

</html>

</head>

<body>

<div class="header">Welcome to My Website</div>

<div class="main">This is the main content of the page,

styled uniquely using the class selector.</div>

<div class="footer">Footer Section</div>

</body>

</html>
◤
ID Selectors
▪ The ID selector in CSS is used to target a specific element with a unique id
attribute.

▪ The ID selector is highly specific and applies styles to one element per
page.

▪ It targets a single, unique element by its id.

▪ Syntax:

#idName {
property: value;
}

ID Selectors
CSS: ◤
<style>

#main-title {

font-size: 24px;

color: red;

</style>

HTML:

<h1 id="main-title">Welcome to My Website</h1>

▪ The #main-title style applies only to the element with id="main-title".


<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#header {
background-color: #0044cc;
color: white;
text-align: center;
}
#footer {
background-color: #333;
color: white;
text-align: center;
margin-top: 20px;
}
#main {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>

<body>

<p id="header">Welcome to My Website</p>

<p id="main">This is the main content of the page, styled uniquely using the ID

selector.</p>

<p id="footer">Footer Section</p>

</body>

</html>
◤

JavaScript
◤
JavaScript

▪ You use HTML tags to describe how you want your document
formatted, and the browser obeys your commands and shows the
formatted document to the user.

▪ But because HTML is a simple text markup language, it can’t respond


to the user, make decisions, or automate repetitive tasks.

▪ Interactive tasks such as these require a more sophisticated language:


a programming language, or a scripting language

◤
Learning Web Scripting Basics

▪ Web scripting languages enable you to combine scripting with HTML to


create interactive web pages.

▪ A script in JavaScript can range from a single line to a full-scale application.

▪ JavaScript is an interpreted language: The browser executes each line of


script as it comes to it.

▪ Changing a JavaScript script is as easy as changing a typical HTML


document, and the change is enacted as soon as you reload the document
in the browser.
◤
Introducing JavaScript

▪ JavaScript was developed by Netscape Communications Corporation, the


maker of the Netscape web browser.

▪ JavaScript was the first web scripting language to be supported by


browsers, and it is still by far the most popular.

▪ JavaScript is almost as easy to learn as HTML, and it can be included


directly in HTML documents

◤
Introducing JavaScript

▪ Here are a few of the things you can do with JavaScript:

▪ Display messages to the user as part of a web page, in the browser’s status line,
or in alert boxes

▪ Validate the contents of a form and make calculations (for example, an order form
can automatically display a running total as you enter item quantities)

▪ Animate images or create images that change when you move the mouse over
them

▪ Create ad banners that interact with the user, rather than simply displaying a
graphic
◤
Introducing JavaScript

▪ Detect the browser in use or its features and perform advanced functions
only on browsers that support them

▪ Detect installed plug-ins and notify the user if a plug-in is required

▪ Modify all or part of a web page without requiring the user to reload it

▪ Display or interact with data retrieved from a remote server

◤
How JavaScript Fits into a Web Page

▪ Using the <script> tag, you can add a short to a web document.

▪ The <script> tag tells the browser to start treating the text as a script, and
the closing </script> tag tells the browser to return to HTML mode
<body> ◤

<h1>The American Eggplant Society</h1>

<p>Welcome to our site. Unfortunately, it is still under construction.</p>

<p>We last worked on it on this date:

<script>

document.write(document.lastModified);

</script>

</p>

</body>

◤
How JavaScript Fits into a Web Page

▪ JavaScript’s document.write statement, sends output as part of the web


document.

▪ In this case, it displays the modification date of the document, as shown in


Figure 4.1.
◤
How JavaScript Fits into a Web Page

▪ In this example, we placed the script within the body of the HTML document.

▪ There are actually four different places where you might use scripts:

▪ In the body of the page—


▪ In this case, the script’s output is displayed as part of the HTML document
when the browser loads the page.

▪ In the header of the page between the <head> tags—


▪ Scripts in the header can’t create output within the HTML document, but can be
referred to by other scripts.
▪ The header is often used for functions— groups of JavaScript statements that
can be used as a single unit.
◤
How JavaScript Fits into a Web Page

▪ Within an HTML tag, such as <body> or <form>—


▪ This is called an event handler and enables the script to work with HTML
elements.
▪ When using JavaScript in event handlers, you don’t need to use the
<script> tag.

▪ In a separate file entirely—


▪ JavaScript supports the use of files with the .js extension containing
scripts; these can be included by specifying a file in the <script> tag.

◤
Exploring JavaScript’s Capabilities

Improving Navigation

• JavaScript enables interactive navigation menus.

• Examples:

• Drop-down menus for quick page selection.

• Submenus that appear on hover.

• Improves user experience while maintaining accessibility.


◤
Exploring JavaScript’s Capabilities

Form Validation with JavaScript

• Ensures user input is in the correct format.

• Examples:

• Checking ZIP codes, phone numbers, email formats.

• Reduces server load by handling errors on the client side.

◤
Exploring JavaScript’s Capabilities
JavaScript and Special Effects

• Early JavaScript effects: scrolling messages, flashing


backgrounds.

• Modern effects:

• Drag-and-drop elements.

• Smooth transitions and animations.


◤
Exploring JavaScript’s Capabilities

AJAX: Asynchronous JavaScript and XML

• JavaScript now allows server communication without reloading


pages.

• Uses:

• Fetching real-time data.

• Saving form inputs dynamically.

• Examples:

• Gmail, Yahoo! Mail, Microsoft Hotmail.

◤
Displaying Time with JavaScript
◤
Displaying Time with JavaScript

▪ Beginning the Script.

▪ Adding JavaScript Statements.

▪ Creating Output.

▪ Adding the Script to a Web Page.

▪ Testing the Script.

◤
Beginning a JavaScript Script

•JavaScript scripts start within the <script> tag in an HTML document.

•Example:

<script type="text/javascript">

----------------------------

----------------------------

</script>

•Scripts can be added directly within the HTML file.


◤
Storing Data in Variables
•A variable is a container that can hold a value—a number, some text, or in this

case, a date.

•Example:

now = new Date();

•This statement creates a variable called now and stores the current date and

time in it.

•This statement use JavaScript’s built-in Date object, which enables you to

conveniently handle dates and times.

◤
Calculating the Results

•JavaScript stores dates as milliseconds.

•Built-in functions convert milliseconds into readable formats:

•localtime = now.toString();

•utctime = now.toGMTString();

▪ These statements create two new variables: localtime, containing the

current time and date in a nice readable format, and utctime, containing the

UTC equivalent. ( UTC stands for Universal Time Coordinated)


◤
Display the Output
▪ JavaScript includes a number of ways to display information, and one of the

simplest is the document.write statement.

▪ The document.write statement displays a text string, a number, or anything else

you throw at it.

•Use document.write to display output.

•Example:

document.write("<strong>Local time:</strong> " + localtime + "<br/>");

document.write("<strong>UTC time:</strong> " + utctime);

<html> Integrating JavaScript with HTML


<head> ◤

<title>Displaying Times and Dates</title>


</head>

<body>

<h1>Current Date and Time</h1>


<script type="text/javascript">
now = new Date();
localtime = now.toString();

utctime = now.toGMTString();

document.write("<strong>Local time:</strong> " + localtime + "<br/>");

document.write("<strong>UTC time:</strong> " + utctime);

</script>
</body>
◤
Testing the Script

•Save the file with .html extension.


•Open in a browser to see the output.
•Use browser reload to update the display.
◤
Modifying the Script for a Large Clock Display

▪ Extract hours, minutes, and seconds separately.

▪ To display a large clock, we need the hours, minutes, and seconds in


separate variables.

▪ Once again, JavaScript has built-in functions to this work:


hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

◤
Modifying the Script for a Large Clock Display

▪ These statements load the hours, mins, and secs variables with the
components of the time using JavaScript’s built-in date functions.

▪ After the hours, minutes, and seconds are in separate variables, you can
create document.write statements to display them:
document.write(“<h1>”);
document.write(hours + “:” + mins + “:” + secs);
document.write(“</h1>”);
OR
document.write("<h1>" + hours + ":" + mins + ":" + secs + "</h1>");
<body>
◤
<h1>Current Date and Time</h1>

<script type=”text/javascript”>

now = new Date();

localtime = now.toString();

utctime = now.toGMTString();

document.write(“<strong>Local time:</strong> “ + localtime + “<br/>”);

document.write(“<strong>UTC time:</strong> “ + utctime);

hours = now.getHours();

mins = now.getMinutes();

secs = now.getSeconds();
document.write("<h1>" + hours + ":" + mins + ":" + secs + "</h1>");
</script>

</body>

You might also like