Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
11 views

L5 CSS

The document provides an overview of CSS (Cascading Style Sheets) and how it can be used to style web pages. It covers key points like CSS syntax, rules for inserting CSS using inline styles, internal and external style sheets. It also discusses CSS attributes such as inheritance, cascade, different types of CSS selectors and how to specify colors and text alignment. The goal is to demonstrate a good understanding of CSS and how to style web pages using it.

Uploaded by

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

L5 CSS

The document provides an overview of CSS (Cascading Style Sheets) and how it can be used to style web pages. It covers key points like CSS syntax, rules for inserting CSS using inline styles, internal and external style sheets. It also discusses CSS attributes such as inheritance, cascade, different types of CSS selectors and how to specify colors and text alignment. The goal is to demonstrate a good understanding of CSS and how to style web pages using it.

Uploaded by

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

Lecture 5: CSS

Dr. Victor ODUMUYIWA


vodumuyiwa@unilag.edu.ng
Learning Objectives

At the end of this lecture, you should be able to:

• Demonstrate a good understanding of CSS

• Style Web pages using CSS


Introduction to CSS

• Cascading Style Sheets (CSS) is a style sheet language for the World Wide Web. It describes the
presentation (e.g. fonts, colors and spacing) of structured documents (RFC 2318)

• CSS is human readable and writable, and expresses style in common desktop publishing
terminology (RFC 2318)

• CSS defines how HTML elements are to be displayed

Layout problem in HTML


• HTML was never invented to contain tags for formatting a document. It was rather intended to
define the content of a document
• Document formatting capability was integrated into HTML 3.2

• CSS was integrated in HTML 4 to solve the layout problem of HTML 3.2

3
Why CSS?

• Easy maintenance: It makes it easier to maintain web site over time (cleaner code, different web
masters)

• Greater flexibility: HTML focuses on the content, CSS focuses on the format. Greater flexibility
and control over presentation. CSS has a more wider array of attributes than HTML.

• Easy reuse: saves time. You can write CSS once and reuse it in multiple web pages.

• Faster page loading time: smaller file size, shorter browser loading time. Styling is done globally
for entire website rather than page-by-page.

• Multiple device compatibility: allows content to be optimized for different devices

• Global Web standard: has become primary resource for style, layout. HTML attributes are being
deprecated.

4
CSS Syntax

CSS rule has two main parts:


• selector (the HTML element to be styled or formatted )
• Selector{ declaration}
• declaration (consisting of properties and values – style properties)
• property: value ;

Each declaration must end with a semicolon

H1 { Selector
font-size: 16px; Declaration
font-family: Arial;
font-weight: bold; value
}

property 5
Rules for inserting CSS

• Inline styles

• Internal style sheet

• External style sheet

6
Inline styles

• Inline styles are used for specific instances within tags in the HTML document

• They should be sparingly used

7
Internal style sheets

• Are contained within the document. A typical scenario is an HTML document that contains a style
sheet within the STYLE element (Raggett et al 1997) . Due to this close relationship, HTML and CSS
share the same top-level name ("text“)

• Reside in <head> portion of HTML document

• Useful when web site is one-page

<head><title>Internal Style>/title>
<style type="text/css">
body{
background-color: #FFCC33;
}
.style1{
color:#FFFFFF;
}
</style></head> 8
External style sheets
• Separate files containing CSS rules that are linked to pages in a website

• The style sheet is linked to a document through a URI and exists as a separate object on the
Web. The media type text/css is used when fetching the object, for example in the Content-
Type and Accept header fields of HTTP (Fielding et al 1997)

<head><link rel="stylesheet"
type="text/css ” href="style.css" />

</head>

The rel attribute specifies the relationship between the current document and the linked document

9
A Sample CSS Document

10
Attributes of Style Sheets

• Inheritance

• Tags added inside other tags inherit the formatting rules (values) of the outside tags

• Cascade

• When different rules are applied, a cascade is formed for certain rules to take
precedence through their specificity

• More specific selectors override more general ones

• Selectors can be combined

• h1, h2, h3, h4 {


font-family: Garamond;
}

11
The Type Selectors

• apply a style rule to elements of specific type

h1 {
color: #36CFFF;
}
The Universal Selectors

• Rather than selecting elements of a specific type, the universal selector quite
simply matches the name of any element type

*{
color: #000000;
}
The Descendant Selectors

• apply a style rule to a particular element only when it lies inside a particular
element.

ul em {
color: #000000;
}
The Child Selectors

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct children of
the <body> element. Other paragraphs put inside other elements like <div> or
<td> would not have any effect of this rule.
The ID Selectors

• apply style rules based on the id of an element

#black {

color: #000000;

}
The Class Selectors

• apply style rules based on the class attribute of the elements

.black {
color: #000000;
}

h1.black {
color: #000000;
}
The Attribute Selectors

• apply styles to HTML elements with particular attributes

input[type="text"]{
color: #000000;
}
CSS Comments

• Comments are used to explain your code, and may help you when you edit the
source code at a later date. Comments are ignored by browsers.
• A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

19
CSS Colors

• Colors are displayed combining RED, GREEN, and BLUE light.

• CSS colors are defined using a hexadecimal (hex) notation for the combination
of Red, Green, and Blue color values (RGB). The lowest value that can be given
to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

• Hex values are written as 3 double digit numbers, starting with a # sign.

20
Text Color

Text Color
The color property is used to set the color of the text. The color can be specified by:

 name - a color name, like "red"


 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

The default color for a page is defined in the body selector.


Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

21
Text Alignment

• The text-align property is used to set the horizontal alignment of a text. Text can be
centred, or aligned to the left or right, or justified.

• When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight

Example
h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

22

You might also like