Scribd
Upload
10 views27 pages

CSS Powerpoint 2024 112324

This document introduces CSS (Cascading Style Sheets) as a tool for styling web pages, explaining its syntax and how to link CSS files to HTML. It covers the basic properties of CSS, methods for applying styles (external, internal, and inline), and provides coding demonstrations. Additionally, it discusses CORS (Cross-Origin Resource Sharing) and best practices for using the <link> element in HTML.

Uploaded by

Jude Solis
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
10 views27 pages

CSS Powerpoint 2024 112324

This document introduces CSS (Cascading Style Sheets) as a tool for styling web pages, explaining its syntax and how to link CSS files to HTML. It covers the basic properties of CSS, methods for applying styles (external, internal, and inline), and provides coding demonstrations. Additionally, it discusses CORS (Cross-Origin Resource Sharing) and best practices for using the <link> element in HTML.

Uploaded by

Jude Solis
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/ 27

INTRODUCTION

CSS first steps


• CSS (Cascading Style Sheets) is used to style and lay out web pages
— for example, to alter the font, color, size, and spacing of your
content, split it into multiple columns, or add animations and other
decorative features. This module provides a gentle beginning to your
path towards CSS mastery with the basics of how it works, what the
syntax looks like, and how you can start using it to add styling to
HTML.
.
Before starting this module, you should have:
1.Basic familiarity with using computers and using the Web passively (i.e. looking
at it, consuming the content.)
2.A basic work environment set up, as detailed in Installing basic software, and an
understanding of how to create and manage files, as detailed in Dealing with
files.
3.Basic familiarity with HTML, as discussed in the Introduction to HTML module.
HTML skills to the next level by diving into CSS, which stands
for Cascading Style Sheets. By the end of this session, you’ll
be able to style your webpages and make them visually appe
aling.
What is CSS :
“CSS is used to control the layout and appearance of web pages.
It allows us to separate content (HTML) from presentation
(CSS). This means you can change the look of an entire website
by editing just one CSS file.”
Linking a CSS File:
“To apply CSS to an HTML document, you need to link it using the <link> tag inside the <head> section
: .html
Copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Styled Webpage</title>
</head>
<body>
<h1>Welcome to My Stylish Page!</h1>
<p>This page is now styled with CSS.</p>
</body>
</html>
Basic CSS Syntax:
“Here’s.the basic structure of a CSS rule: For example, to change the text color of all <p> elements
css to blue:
css
Copy
Copy
selector {
p{
property: value;
color: blue;
}
}
Common
. CSS Properties:
• Color : Changes the text color
• font-family: Changes the font
• font-size : Changes the size of the text
• Margin : Adds space around elements
• Padding : Adds space inside elements, between the content and the border
Coding Demonstration:
.
“Let’s style a simple HTML page together. Open your code editor and create a
new CSS file called styles.css. Add the following styles:
css h1 {
Copy color: #333;
body { }
font-family: Arial, sans-serif;
background-color: #f0f0f0; p{
margin: 0; color: #666;
padding: 20px; line-height: 1.5;
} }
Then, link this CSS file to your HTML document and see the changes in your browser.”
Applying
.
CSS to HTML
- Examine three methods of applying CSS to a document: with an external
stylesheet, with an internal stylesheet, and with inline styles.

External stylesheet
An external stylesheet contains CSS in a separate file with a .css extension. This is the most
common and useful method of bringing CSS to a document. You can link a single CSS file to
multiple web pages, styling all of them with the same CSS stylesheet.
You reference an external CSS stylesheet from an HTML <link> element:

The CSS stylesheet file might look like this:


The href attribute of the <link> element needs to reference a file on a file system. In the example above,
.
the CSS file is in the same folder as the HTML document, but you could place it somewhere else and
adjust the path. Here are three examples:
<Link>

TRY it:::

To link an external stylesheet, you'd include a <link> element inside your <head>:
• There are
.
a number of other common types you'll come across. For
example, a link to the site's favicon:

There are a number of other icon rel values, mainly used to indicate special icon types for
use on various mobile platforms, e.g.:

The size attribute indicates the icon size, while the type contains the MIME type of the resource being
linked. These provide useful hints to allow the browser to choose the most appropriate icon available.
.
You can also provide a media type or query inside a media attribute;
this resource will then only be loaded if the media condition is true.
For example:
.
Some interesting new performance and security features have been
added to the <link> element too. Take this example

A rel value of preload indicates that the browser should preload this resource
(see rel="preload" for more details), with the as attribute indicating the specific class of content being fetched.
The crossorigin attribute indicates whether the resource should be fetched with a CORS request.
CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines
whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.
The same-origin security policy forbids cross-origin access to resources. But CORS gives web servers the ability to
say they want to opt into allowing cross-origin access to their resources.
CORS headers
Access-Control-Allow-Origin
Indicates whether the response can be shared.
Access-Control-Allow-Credentials
Indicates whether or not the response to the request can be exposed when the credentials flag is true.
Access-Control-Allow-Headers
Used in response to a preflight request to indicate which HTTP headers can be used when making the actual
request.
Access-Control-Allow-Headers
. Used in response to a preflight request to indicate which HTTP
headers can be used when making the actual request.
Access-Control-Allow-Methods
Specifies the method or methods allowed when accessing the
resource in response to a preflight request.
Access-Control-Expose-Headers
Indicates which headers can be exposed as part of the response
by listing their names.
Access-Control-Max-Age
Indicates how long the results of a preflight request can be
cached.
Access-Control-Request-Headers
. Used when issuing a preflight request to let the server know
which HTTP headers will be used when the actual request is
made.
Access-Control-Request-Method
Used when issuing a preflight request to let the server know
which HTTP method will be used when the actual request is
made.
Origin
Indicates where a fetch originates from.
Timing-Allow-Origin
Specifies origins that are allowed to see values of attributes
retrieved via features of the Resource Timing API, which would
otherwise be reported as zero due to cross-origin restrictions.
.
• Other usage notes:

• A <link> element can occur either in the <head> or <body> element, depending on whether it has a link
type that is body-ok. For example, the stylesheet link type is body-ok, and therefore <link
rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more
sense to separate your <link> elements from your body content, putting them in the <head>.

• When using <link> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to
enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not
loading, verify that the Content-Security-Policy header's img-src directive is not preventing access to it.
.

• The HTML and XHTML specifications define event handlers


for the <link> element, but it is unclear how they would be
used.
• Under XHTML 1.0, void elements such as <link> require a
trailing slash: <link />.
• WebTV supports the use of the value next for rel to preload
the next page in a document series.
Internal Stylesheet:
An internal stylesheet resides within an HTML document. To create an internal stylesheet, you
place CSS inside a <style> element contained inside the HTML <head>.
The HTML for an internal stylesheet might look like this:
Inline styles are CSS declarations that affect a single HTML element, contained within
a .style attribute. The implementation of an inline style in an HTML document might look like
this:
Activity. : Create a CSS file and style your existing HTML pages.
Focus on:
▪ Setting a background color for the page
▪ Changing the font and text color
▪ Adding margins and padding to elements
▪ create a folder on your computer. You can name the folder
whatever you want. Inside the folder, copy the text below to
create two files:
Partner up to review each other's styles and provide feedback
.
.
.
.

You might also like