Scribd
Upload
21 views

CSS

The document discusses CSS (Cascading Style Sheets), which is used to style and lay out web pages. CSS allows separation of document content from document presentation and formatting. CSS works by applying styles to HTML elements. Styles are defined in CSS and then referenced in HTML pages. There are different ways to insert CSS including external, internal, and inline styles.

Uploaded by

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

CSS

The document discusses CSS (Cascading Style Sheets), which is used to style and lay out web pages. CSS allows separation of document content from document presentation and formatting. CSS works by applying styles to HTML elements. Styles are defined in CSS and then referenced in HTML pages. There are different ways to insert CSS including external, internal, and inline styles.

Uploaded by

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

CSS

CSS
• CSS – Cascading Style
Sheets
• Styles define how to
display HTML elements
• CSS is used to control the
style and layout of
multiple Web pages all at
once
Why CSS is needed
• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large web sites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
• In HTML 4.0, all formatting could be removed from the HTML document,
and stored in a separate CSS file.
• All browsers support CSS today.
Attributes
HTML + CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d0e4fe;
}

h1 {
color: orange;
text-align: center;
}

P{
font-family: "Times New Roman";
font-size: 20px;
}

</style>
</head>
<body> Students: Create this Code in e.g., NotePad
and Save the File as .htm.
<h1>My First CSS Example</h1> Then Open the File in a Web Browser (just
<p>This is a paragraph.</p>
double-click on the file.)
Change color, etc. and see what happens.
/ < body>
/ < html>
CSS Syntax and Style
CSS Syntax

You can see the style container positioned at the bottom of the web page’s head
container. It’s legal to position it in the body container, but don’t do it.
CSS Syntax and Style
CSS Style
Type Selectors and the Universal Selector
With a type selector, you use an element type (e.g., hr) to match
all instances of that element type and then apply specified
formatting features to those instances.
hr {width: 50%;}
The universal selector uses the same syntax as the type selector,
except that instead of specifying an element type, you specify *.
A wildcard is something that matches every item in a collection of
things.
* {text-align: center;}
CSS Classes (Class Selectors)
The dot thing (.) is called a class selector because its purpose is to select
elements that have a particular value for their class attribute.
ID Selectors
• An ID selector is similar to a class selector in that it relies on an element
attribute value in searching for element matches.
• an ID selector uses an element’s id attribute (as opposed to a class
selector, which uses an element’s class attribute).
• A significant feature of an id attribute is that its value must be unique
within a particular web page.
• The ID selector’s unique-value feature means that an ID selector’s CSS rule
matches only one element on a web page.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet (Recommended)!!
– An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing just one file.
– An external style sheet can be written in any text editor. The file should not contain any
html tags.
– The style sheet file must be saved with a .css extension
• Internal style sheet
– An internal style sheet should be used when a single document has a unique style.
– You define internal styles in the head section of an HTML page, inside the <style> tag
• Inline style
– An inline style loses many of the advantages of a style sheet (by mixing content
with presentation). Use this method sparingly!
Internal Style Sheet Example
You define internal styles in the head section of an HTML page, inside the <style> tag, like this:
External Style Sheet Example
Each HTML page must include a link to the style sheet with the <link> tag. The
<link> tag goes inside the head section:

Students: Try this Example


Inline style

You might also like