20-10-2024

CSS Introduction
• Cascading Style Sheets (CSS)
– Used to describe the presentation of documents
– Define sizes, spacing, fonts, colors, layout, etc.
Cascading Style Sheets (CSS) – Improve content accessibility
– Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center,
etc.

CSS Rules: Selectors and Declarations CSS Rules: Declaration Parts

Rule
Selector Properties Values

h1 {
h1 { font-family: Times, Georgia, serif;
font-family: Times, Georgia, serif; font-size: 24px;
font-size: 24px; text-align:: center;
;
text-align: center; }
Each declaration separated
} Properties and values
separated with a colon
with a semi-colon

Declarations
Declarations consist of 2 parts: a property and a value. Each declaration ends
with a semi-colon ( ; ). Properties and values are separated with a colon ( : ).

A more readable way of writing CSS rules

3 4

1
 20-10-2024

Versions of CSS CSS Simple, or Element Selectors

• Like XML and XHTML, CSS specifications are laid down by the • The most basic form of CSS selector is an XHTML
World Wide Web Consortium.
element name;
• The current, most widely used version of the CSS specification
is version 3
– h1, h2, p, ol, ul, table, etc.
• There are over 100 different properties available in CSS • This is the simple or element selector. Example:
– p { color: #003366; }
• This will set every occurrence of content marked
up the <p> paragraph tag to be a dark blue colour.

5 6

CSS Class Selectors CSS ID Selectors

• However, in XHTML markup, elements can • XHTML elements can also have id selectors assigned to them.
have class attributes assigned to them. The Example:
value attached to a class attribute can be one • <p id=“summary”>blah, blah, blah.</p>
(or more) names, separated by spaces. • In the CSS, the id “summary” can be styled in a rule, thus:
Example: • #summary { font-style: italic; }
• Whereas class selectors can be used across a number of
– <h1 class=“special”> or
elements in an XHTML document, ID selectors can only be
– <h1 class=“special underlined”> assigned to one specific element in any given XHTML
• The actual definition of the value “special” is document.
defined in a CSS class selector…

7 8

2
 20-10-2024

Example of Class & ID Selector

Class Selectors vs ID Selectors
#top { <div id="top"> <h1>Chocolate • How do we know which to use and when?
curry</h1>

background-color: #ccc; ID selectors:

1. As they must be unique to a page, ID selectors are useful for persistent structural
padding: 20px; elements, such as navigation zones, or key content areas, that occur once on a
page, but that are consistent across a site.
} 2. For example, #mainNav may be the selector to style the the main navigation
element, which will likely appear on every page of your site.
<p class="intro">This is my recipe
for making curry purely with 3. So, ID selectors are generally applied to conceptually similar elements across a
.intro { chocolate</p> site.

color: red; font-weight: bold; </div>

}
9 10

Class Selectors vs ID Selectors Element Selector Grouping

• How do we know which to use and when? • Element selectors can be grouped together if
Class selectors: you want to apply one CSS rule to a range of
1. As they can be allied to any number of elements on a page, class selectors are elements. Example:
useful for identifying (and targeting) types of content, or similar items.
2. For example, you have a news page with a date at the start of each story. If you
• h1, h2, h3, h4, h5, h6 { color: #FF0000; }
use ID selectors, you’d have to give every occurrence of the date a separate ID
name. Much easier to give every date one class name and style that one class.
• Each element is separated by a comma (except
for the last element before the start of the
declaration).
• However…

11 12

3
 20-10-2024

The Universal Selector CSS TYPES

• There is also a Universal Selector, that acts like
a wildcard, styling every available element that • INLINE CSS
isn’t specifically styled elsewhere. Example: • INTERNAL CSS
• * { padding: 0; margin: 0; } • EXTERNAL CSS
• …would usefully set the overall page styling to
zero padding and margin, which could then be
adjusted as-needed further down the line.
• The universal selector is donated by an *
symbol
13

Inline Styles: Example Internal Styles

inline-styles.html • The <style> tag is placed in the <head> section of the
<!DOCTYPE html > document
<head>
• <style type="text/css">
<title>Inline Styles</title>
</head>
<body> – type attribute specifies the MIME type
<p>Here is some text</p> • MIME describes the format of the content
<!--Separate multiple styles with a semicolon-->
• Other MIME types include text/html, image/gif,
<p style="font-size: 20pt">Here is some
more text</p> text/javascript …
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p> • Used for document-specific styles
</body>
</html>

15 16

4
 20-10-2024

USING INTERNAL CSS

External CSS Styles
• External linking
<html>
– Separate pages can all use a shared style sheet
<head>
<title>Using Internal CSS</title> – Only modify a single file to change the styles across your
<style type="text/css"> entire Web site (see http://www.csszengarden.com/)
body { • link tag (with a rel attribute)
font-family: arial; – Specifies a relationship between current document and
background-color: #rgb(185,179,175);} another document
h1 {
color: rgb(255,255,255);} – link elements should be in the <head>
</style>
</head> <link rel="stylesheet" type="text/css"
</html> href="styles.css">

18

USING EXTERNAL CSS

External CSS Styles (2)
<html> @import
– Another way to link external CSS files
<head>
<title>Using External CSS</title> – Example:
<link href="css/styles.css" <style type="text/css">
type="text/css” rel="stylesheet"> @import url("styles.css");
</head> /* same as */
@import "styles.css";
</style>
<body>
– Ancient browsers do not recognize @import
<h1>Potatoes</h1>
<p>There are dozens of...</p> – Use @import in an external CSS file to workaround
</body> the IE 32 CSS file limit
</html>
20

5
 20-10-2024

External Styles Styles.css

external-styles.html
<head>
<title>Importing style sheets</title> body {
<link type="text/css" rel="stylesheet"
href="styles.css" />
background-color: white;
</head> }
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li> h1 {
<li>Bread color: white;
<ul>
<li>White bread</li> text-align: center;
<li>Rye bread</li>
<li>Whole wheat bread</li>
font-family: "Times New Roman";
</ul> font-size: 20px;
</li>
<li>Rice</li>
}
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>

21

Benefits of using CSS Maintenance Example

• More powerful formatting than using
presentation tags Title
Title
Some random
text here. You
can’t read it
Title
Title
Title
Some random
text here. You
can’t read it
anyway! Har har
Some random har! Use Css.
text here. You
Title
Some random
text here. You
can’t read it
anyway! Har har
Title
Some random
text here. You
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Some random Some random har! Use Css.
anyway! Har har

• Your pages load faster, because browsers cache

text here. You text here. You can’t read it Title can’t read it
har! Use Css. anyway! Har har anyway! Har har
can’t read it can’t read it Title Title
har! Use Css. Some random har! Use Css.
anyway! Har har anyway! Har har
text here. You Some random Some random
har! Use Css. har! Use Css.
can’t read it text here. You text here. You Title
anyway! Har har can’t read it can’t read it
Title Some random
har! Use Css. anyway! Har har anyway! Har har
Some random Title Title Title text here. You
har! Use Css. har! Use Css.
text here. You Title can’t read it
Some random Some random Some random
can’t read it Some random anyway! Har har

the .css files

text here. You text here. You Title text here. You
anyway! Har har har! Use Css.
text here. You can’t read it can’t read it can’t read it Title
har! Use Css. Some random
can’t read it anyway! Har har anyway! Har har anyway! Har har
text here. You Title Some random
anyway! Har har har! Use Css. har! Use Css. har! Use Css.
Title har! Use Css. Title can’t read it text here. You
Some random
anyway! Har har can’t read it
Some random Some random Title text here. You
har! Use Css. anyway! Har har
text here. You text here. You can’t read it
Some random har! Use Css.
can’t read it can’t read it anyway! Har har
text here. You
anyway! Har har anyway! Har har har! Use Css.

• Increased accessibility, because rules can be

Title can’t read it Title
har! Use Css. har! Use Css. anyway! Har har
Some random har! Use Css. Some random
Title text here. You text here. You Title

CSS
Title can’t read it can’t read it
Some random Some random
anyway! Har har anyway! Har har
text here. You Some random Title Title Title text here. You
har! Use Css. har! Use Css.
can’t read it text here. You can’t read it
Some random Some random Some random
anyway! Har har can’t read it anyway! Har har
Title text here. You text here. You text here. You
har! Use Css. anyway! Har har har! Use Css.
can’t read it can’t read it can’t read it

defined according given media

har! Use Css. Some random
anyway! Har har anyway! Har har anyway! Har har
text here. You Title Title
har! Use Css. har! Use Css. har! Use Css.
can’t read it

file
Some random Some random
anyway! Har har
Title text here. You Title Title text here. You
har! Use Css.
can’t read it can’t read it
Some random Some random Some random
anyway! Har har anyway! Har har
Title text here. You text here. You text here. You
har! Use Css. har! Use Css.
can’t read it can’t read it can’t read it
Some random
anyway! Har har anyway! Har har anyway! Har har

• Pages are easier to maintain and update

Title text here. You Title Title
har! Use Css. har! Use Css. har! Use Css.
can’t read it Title Title Title
Some random Some random Some random
anyway! Har har
text here. You Some random text here. You Some random text here. You Some random
har! Use Css.
can’t read it text here. You can’t read it text here. You can’t read it Title text here. You
anyway! Har har can’t read it anyway! Har har can’t read it anyway! Har har can’t read it
har! Use Css. har! Use Css. har! Use Css. Some random
anyway! Har har anyway! Har har anyway! Har har
text here. You
har! Use Css. har! Use Css. har! Use Css.
Title Title can’t read it
anyway! Har har
Some random Title Some random Title
har! Use Css.
text here. You Some random text here. You Some random
Title can’t read it text here. You can’t read it text here. You
anyway! Har har can’t read it anyway! Har har can’t read it
Some random Title
har! Use Css. anyway! Har har har! Use Css. anyway! Har har
text here. You
Title Some random
har! Use Css. har! Use Css.
can’t read it Title text here. You Title
Some random
anyway! Har har can’t read it
text here. You Some random Some random Title
har! Use Css. anyway! Har har
can’t read it text here. You text here. You
har! Use Css. Some random
anyway! Har har can’t read it can’t read it
Title Title text here. You
har! Use Css. anyway! Har har anyway! Har har can’t read it
Some random har! Use Css. Some random har! Use Css. anyway! Har har
text here. You text here. You Title Title
har! Use Css.
can’t read it can’t read it
Some random Some random
anyway! Har har anyway! Har har
text here. You text here. You
har! Use Css. har! Use Css.
can’t read it can’t read it
anyway! Har har anyway! Har har
har! Use Css. har! Use Css.

23 24