Computer 8 - 3rd Quarter Lessons
Uploaded by
aeonComputer 8 - 3rd Quarter Lessons
Uploaded by
aeonWorking with Style Sheets – CSS Lesson 1
Introduction to CSS
CSS – Cascading Style Sheet
It is used to control the layout of HTML documents.
It is used to add styles like text color, font type, paragraph spacing, column size and layout,
background image & color, etc.
It is usually a text file separate from your HTML file.
html files uses attribute names and values, and angle brackets.
css makes use of properties and values, and curly braces.
Capabilities of CSS
1. Web pages are easily updated.
2. Objects can be positioned where you want them.
3. Objects can be layered in 3D.
4. You can create custom tags.
Advantages of CSS
1. It saves time.
2. Pages load faster.
3. Multiple link tags can be added to one document.
3 Kinds of CSS
1. Inline Style
2. Internal Style or Embedded Style
3. External Style or Linked Style
Inline Style
Inline styles are placed straight into the HTML tags using the style attribute
ex. <p style=”font-family: Arial; color: red”> This is a paragraph </p>
font-family and color are called properties
Arial and red are called values
Inline style should be avoided since it mixes content with presentation.
Internal Style or Embedded Style
Internal style are placed inside <head> section.
Internal style apply to elements in the HTML file.
The style for the page are enclosed in the <style> </style> tags.
Examples:
External Style or Linked Style
External styles are used for the whole, multi-page website.
The styles are placed inside another file (.css files) and linked to the web pages.
The css file content in Notepad simply looks like this:
The Style Rule
The css file is then linked to the web page using the <link> tag as shown below.
CSS comprises of style rules that are interpreted by the browser and applied to elements in the
html document.
3 parts of a style rule
1. Selector – the html tag to which the style will be applied
2. Property – a type of attribute of HTML tag
3. Value – value assigned to a property
The Style Rule Syntax
The syntax is: selector {property: value}
Examples:
Types of Selector
1. Element selector
ex. h1 {color:#000000;}
2. Descendant selector
ex. ul em {color:#000000;} This means the em is inside the ul.
3. Class selector
ex. h1.black {color:#000000;} You need to create a class name.
4. ID selector
ex. #black {color:#000000;} You need to create an id name.
CSS Property
It is a type of attribute of HTML tag.
In simple terms, all HTML attributes are converted into CSS properties.
examples:
color
border
font
text-align
Value
the value assigned to properties
examples:
red for color property
solid for border property
16pt Arial for font property
center for text-align property
Types of Values
Length and Percentage (numeric value with unit, e.g. 5px)
examples:
px for pixels
em for calculated size of font (e.g. 2em = 2x the current font size)
pt for points (for measurement typically of printed media)
% for percentages
cm for centimeters
in for inches
mm for millimeters
Colors
examples:
A color name like red
A hexadecimal color code like #ff0000 or #f00
An RGB color code like rgb(255, 0, 0) use web-safe colors which are available
online.
CSS Comments
Comments are used to explain the code.
They are ignored by browsers.
A CSS comment starts with /* and ends with */
CSS Properties – CSS Lesson 2
Font properties
The font CSS property sets the style, variant, boldness, size/line-height, and the font family for an
element’s text content.
Individual font properties can be set as:
o font-style
o font-variant
o font-weight
o font-size/line-height
o font-family
font-style is used to specify the style for text, such as italic, oblique or normal
o p {font-style: italic;}
font-variant is used to set text in small-caps or normal; (in small-caps font, all lowercase letters
are converted to uppercase)
o p {font-variant: small-caps;}
font-weight shows how thick or thin characters in text should be displayed, such as bold, bolder,
lighter or a number from 100-900.
o p {font-weight: bold;}
font-size sets the size of the font, such as any number followed by px, pt or %. It can also be
normal, xx-small, x-small, small, medium, x-large, xx-large.
o p {font-size: 14pt;}
font-family is used to indicate the typeface of text.
o p {font-family: arial, helvetica, serif;}
In the above example, serif is a "fallback" font, that is, if the browser does not
support the first font, it tries the next font, and so on.
Other fallback font names are: sans-serif, cursive, fantasy and monospace.
The shorthand declaration is font.
The syntax is:
o {font: [font-style font-variant font-weight font-size/line-height font-family];}
o Example:
o p {font: italic small-caps bold 15px/20px Arial;}
Note: if a font name has a white-space, it must be quoted; example: "Comic Sans MS"
Text properties
The text CSS property sets the appearance of individual characters in a word or line of text.
Individual text properties can be set as:
o text-align
o text-decoration
o text-transform
o text-indent
o letter-spacing
o word-spacing
text-align sets the horizontal alignment of text in an element; possible values are left, right,
center, and justify
o p {text-align: justify;}
text-decoration specifies the decoration added to text; possible values are underline, overline,
line-through, and none. (You can use none to remove underline from hyperlinks.)
o p {text-decoration: underline;}
o a:link {text-decoration: none;}
text-transform sets the cases for text; possible values are capitalize, lowercase, uppercase, and
none.
o p {text-transform: uppercase;}
text-indent sets the indent of the first line of a paragraph; possible values are % or a number
specifying indent space.
o p {text-indent: 100px;}
letter-spacing sets the extra spacing between letters of an element's text
o p {letter-spacing: 15px;}
word-spacing sets the extra spacing between the words in the text content
o p {word-spacing: 50px;}
Background properties
The background CSS property provide fundamental styles to an element, such as color, image,
and position.
Individual background properties can be set as:
o background-color
o background-image
o background-repeat
o background-position
o background-attachment
background-color sets the background color for a page.
o body {background-color: lightblue;}
background-image sets the background color for the <body> element.
o body {background-image: url("paper.gif");}
|____________|
This is how image files
are specified in CSS.
background-repeat sets if how a background image will be repeated.
o By default, a background image is repeated both vertically and horizontally
o Possible values: repeat, repeat-x (horizontal, laying down), repeat-y (vertical, standing
up), no-repeat
o body {background-image: url("paper.gif"); background repeat: repeat-x;}
background-position sets the starting position of a background image.
o By default, a background image is placed at the top-left corner of an element
o Possible values: left top, left center, left bottom, right top, right center, right bottom,
center top, center center, center bottom
o body {background-image: url("paper.gif"); background repeat: no-repeat; background-
position: center;}
background-attachment sets whether a background image scrolls with the rest of the page, or is
fixed.
o By default, a background image scrolls with the page
o Possible values: scroll, fixed, and local
o body {background-image: url("paper.gif"); background-repeat: no-repeat; background-
position: center; background-attachment: fixed;}
Background shorthand sets different background properties in one declaration.
o body {background: lightblue url(“paper.gif”) no-repeat center fixed;}
width sets sets the width of an element.
o Value can be a fixed value or percentage value.
o img {width: 250px;}
o img {width: 50%;}
color sets the color of an element.
o Value can be a color name, hexadecimal color code or rgb color.
o p {color: green;}
o p {color: #00FF00;}
o p {color: rgb(0,255,0);}
Recap
1. CSS means ___ [Cascading] Style Sheet.
2. CSS is used to control the ___ [layout] of web pages.
3. HTML uses ___, while CSS makes use of ___ [attributes – properties].
4. Inline styles are placed inside the tag using the ___ [style] attribute.
5. Internal style rules are placed inside the ___ [<head>] section.
6. Internal style rules apply to ___ [all elements in the html file.].
7. External style rules are placed in ___ [a separate file with the .css extension.].
8. The part of the style rule that points to the html element to which the style will be applied is
called ___ [selector].
9. The characteristic of the element that the style rule will modify is called ___ [property].
10. The CSS property and value pair, which is also known as declaration, is enclosed in ___ [curly
braces].
11. Multiple declarations, i.e. properties and values, are separated by ___ [semi-colon].
12. A ___ [semi-colon] separates the property and value pair.
13. The most basic selector that you can use in a style rule is the ___ [element] selector.
14. A length value must have ___ [a number and a unit].
15. Comments are used to explain the code and they are enclosed in ___ [/* */].
16. The syntax of a CSS style rule is <selector> {property: value;} [False]
[The correct syntax is selector {property: value;}]
17. Choose True if the style rule is correct and False if it is incorrect; p {colour: #ff00ff;} [False]
[The correct syntax is: p {color: #ff00ff;}]
18. Choose True if the style rule is correct and False if it is incorrect; h1 {font: Arial 16pt;} [False]
[The correct syntax is: h1 {font: 16pt Arial;}. This is because when you specify the font size and
font family using the font shorthand property, size must come first and followed by the family.]
19. Choose True if the style rule is correct and False if it is incorrect; li {font-size: 12pt; font-family:
Tahoma; color: blue;} [True]
20. Choose True if the style rule is correct and False if it is incorrect; li {font: 10pt Tahoma; font-
weight: 100; color: green;} [True]
21. Choose True if the style rule is correct and False if it is incorrect; <h1 style=font: 24pt Impact>
[False] [The correct syntax is: <h1 style="font: 24pt Impact">]
22. Choose True if the style rule is correct and False if it is incorrect; <p style="font: 18pt Calibri;
color: green"> [True]
23. Choose True if the style rule is correct and False if it is incorrect; <h2> {color: #36CFFF;} [False]
[The correct style rule is h2 {color: #36CFFF;}. The selector should not be enclosed in angle
brackets.]
24. Choose True if the style rule is correct and False if it is incorrect; p {text-align: justify;} [True]
25. Choose True if the style rule is correct and False if it is incorrect; li {font-weight: bold;} [True]
Write the correct selector for the html element in each number.
26. <p> [p]
27. <h3> [h3]
28. <li> [li]
29. <body> [body]
30. <img src="house.jpg" alt="home" width="250" > [img]
To change the alignment of text with CSS, use the [text-align] property.
To place underline beneath text use the CSS property: text-decoration
Which of these is not a predefined value for text-align property? left, right, center, middle
To place a horizontal line through text using the text-decoration property, used the line-through value.
The correct predefined value for font-style property to create an italicized text is italic
The correct CSS property for specifying the typeface of text is font-family
Which of the following is not a predefined value for font-weight? bold, lighter, bolder, medium
The CSS property that will change text to italics is font-style
When using a font family name that has white spaces on it, enclose the name in double quotes
The correct property for changing the size of text is font-size
The CSS property that will apply bold formatting to text is font-weight
Which of these is not a generic font name? serif, monospace, sans-serif, modern
