Scribd
Upload
77 views

Lesson 12 CSS

This document discusses web development stylesheets. It covers: 1) Styles define elements' appearance on webpages and style sheets define styles for entire websites, allowing modification of characteristics like fonts, sizes, and margins. 2) Cascading Style Sheets (CSS) separate document presentation from content to improve accessibility and flexibility. 3) There are three types of style sheets: inline affects individual tags, embedded affects whole pages, and external affects multiple pages on a website.

Uploaded by

Mary Rose Ochavo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
77 views

Lesson 12 CSS

This document discusses web development stylesheets. It covers: 1) Styles define elements' appearance on webpages and style sheets define styles for entire websites, allowing modification of characteristics like fonts, sizes, and margins. 2) Cascading Style Sheets (CSS) separate document presentation from content to improve accessibility and flexibility. 3) There are three types of style sheets: inline affects individual tags, embedded affects whole pages, and external affects multiple pages on a website.

Uploaded by

Mary Rose Ochavo
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Lesson 12

ICT – Web Development


 Style – is a rule that defines the appearance
of an element on a Web page.
 Style Sheets – is a series of rules that define
the style for a webpage or entire website.
With a style sheet you can alter the
appearance of a Webpage, by changing its
characteristics such as font family, font
size, margin and link specifications.
 CSS is designed primarily to enable the separation
of document content (written in HTML or a similar
markup language) from document presentation,
including elements such as the layout, colors,
and fonts. This separation can improve
content accessibility, provide more flexibility and
control in the specification of presentation
characteristics, enable multiple pages to share
formatting, and reduce complexity and repetition
in the structural content
 Inline Style Sheets
 you add a style to an individual HTML tag, such as
heading or paragraph. The style changes the
specific tag, but does not affect other tag in the
document. Sample
 Embedded Style Sheets
 you add the style sheet within the <head> tags of
the HTML document to define the style of entire
web page. Sample
 External Style Sheets
 With a linked style sheets, you can create a text file
that contains all the style you want to apply then
save it with the file extension, .css. Sample
 A Style Statement is made up of selector and
a declaration that defines style for one or
more properties.
 The sample code below shows an example
of a style statement used in inline style sheet.
<h1 style=“font-family: Garamond; font-color: navy”>

selector declaration
 The sample code below shows an example of
a style statement used in embedded and
external style sheet.

h1 {style=“font-family: Garamond; color: navy}

selector declaration
TYPE LEVEL AND PRECEDENCE
Inline  To change the style within an
individual HTML tag
 Overrides embedded and external
style sheets
Embedded  To change the style of one page
 Overrides external sheets
External  To change the style of multiple pages
in the Website
PROPERTY NAME OPTION CAN BE CONTROLLED
background color
image
position
border color
style
width
font family
size
style
variant
PROPERTY NAME OPTION CAN BE CONTROLLED
margin length
Percentage
text alignment
decoration
indentation
spacing
white space
list image
position
type
 In order to gain more control, you can define
specific elements of an HTML file as a
category or class
 You then can create a specific style for each
class.
 The style statement uses the selector and a
series of property-value statements in the
declaration to define the text declaration,
font family and font size for all links.
 Setting the text-decoration property to a
value of none will remove the underline from
all links.
◦ blink – causes the text to blink on and off
◦ line-through – places a line through the middle of
the text.
◦ overline – places a line above the text
◦ underline-places a line below the text
 The link:hover property defines the way a link
displays when a mouse pointer points to or
hovers over a link.
 http://www.w3schools.com/css/default.asp

 Cascading Style Sheets – The Designer’s Edge


ebook

You might also like