CET214
Web Programming
04 - Introduction to CSS
Dr. Ahmed Said
Start
Anatomy of HTML
Opening Tag
Closing Tag
<p>This is a paragraph of text.</p>
Content
<a href="http://example.com">Link</a>
Attribute
<img src="face.png">
Dr. Ahmed Said
| 2 of 37
article vs. section Tags
<article> : Represents a self-contained composition in a document, page, application, or site, which is
intended to be independently distributable or reusable.
<article> : Can stand alone and make sense on its own.
<article> : Can be syndicated or shared independently from the rest of the page.
Examples: Blog post, newspaper article, forum post, user comment, etc.
<section> : Represents a thematic grouping of content, typically with a heading.
<section> : Groups related content together.
often forming a part of a larger document or <article> .
Examples: Chapters, headings, tabbed sections, etc.
Use <article> when the content could be independently syndicated or when you want to clearly mark a
standalone piece of content.
Use <section> to organize content into logical sections within a page or an article , typically with a
heading.
Dr. Ahmed Said
| 3 of 37
article vs. section Tags, cont.
<article>
<h1>Understanding HTML5 Semantic Elements</h1>
<section>
<h2>Introduction</h2>
<p>This section introduces HTML5 semantic elements...</p>
</section>
<section>
<h2>Advantages</h2>
<p>This section covers the advantages of using semantic elements...</p>
</section>
</article>
html
Dr. Ahmed Said
| 4 of 37
strong , em vs. b , i Tags
<strong> and <em> are semantic tags that convey meaning
<b> and <i> are presentational tags that convey style
<strong> vs. <b>
<strong> : Indicates that the content is of strong importance or emphasis. Screen readers often vocalize this
with a stronger tone.
<b> : Simply makes the text bold without adding any semantic significance. It’s a visual style without conveying
importance to screen readers.
<em> vs. <i>
<em> : Indicates that the content is emphasized. Screen readers often vocalize this with a slight pause and a
change in tone.
<i> : Simply makes the text italic without adding any semantic significance. It’s a visual style without conveying
emphasis to screen readers.
Dr. Ahmed Said
| 5 of 37
Changes to Physical Style Tags in HTML5
HTML5 has deprecated many physical style tags in favor of semantic tags
Physical style tags are tags that define the appearance of text, such as:
<b> : Text that is usually bold
<i> : Text that is usually displayed as italic
<u> : Text that is usually displayed as underlined
<small> : Text that displays as small print
<sub> : Text that displays as subscript
<sup> : Text that displays as superscript
<font> : Text that is styled with a particular font, size, and color
…
Dr. Ahmed Said
| 6 of 37
Changes to Physical Style Tags in HTML5, cont.
Semantic tags are tags that define the meaning of text, such as <strong> , <em> , <mark> , <cite> ,
<code> , <var> , <abbr> , <time> , <del> , <ins> , <sub> , <sup> , …
Physical style tags are discouraged in HTML5 because they mix content with presentation, making it
difficult to separate content from style
Semantic tags are preferred because they convey meaning and are easier to style with CSS
Physical style tags are still supported in HTML5 but are considered obsolete
Dr. Ahmed Said
| 7 of 37
Preview to CSS
Dr. Ahmed Said
| 8 of 37
The Bad Way to Produce Styles
<p>
<font face="Arial">Welcome to Greasy Joe's.</font>
You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat
<font size="+4" color="red">OUR</font> prices!
</p
Welcome to Greasy Joe's. You will never, ever, EVER beat
html
OUR
prices!
Tags such as b, i, u and font are discouraged in strict HTML
Why is this bad?
Accessibility
Code organization
Changing style easily
Dr. Ahmed Said
| 9 of 37
Character Formatting Using CSS
Cascading Style Sheets (CSS) are a way to control how the browser renders HTML elements.
CSS describes the appearance and layout of information on a web page (as opposed to HTML, which
describes the content).
Using CSS, you can tell the browser to render the <h1> tag differently than it normally would.
CSS provides a lot of flexibility in how you can control the appearance of your web pages.
Dr. Ahmed Said
| 10 of 37
Applying CSS to HTML
The advantage of CSS is that it can be used in various ways.
1. You can put all your styles into a separate file and link to that file from your web page. That way, if you
want to change the appearance an entire site.
2. You can include styles at the top of your page so that they apply only to that page.
3. You can also include styles inside the tags themselves using the style attribute.
4. You can also control the specificity of the styles you create based on how you define them. using tags ,
classes , or IDs .
Dr. Ahmed Said
| 11 of 37
Using the style Attribute
The style attribute is used to add styles directly to an HTML element.
The style attribute can contain any number of CSS properties and values separated by semicolons.
<h2 style="font-family: Verdana, sans-serif;">Heading</h2>
<h2>Same Heading without style</h2>
html
Heading
Same Heading without style
The style attribute of the <h2> tag contains a style declaration.
All style declarations follow this same basic pattern, with the property on the left and the value associated
with that property on the right.
The rule ends with a semicolon, and you can include more than one in a style attribute by placing semicolons between
them.
If you’re only including one rule in the style attribute, the semicolon is optional, but it’s a good idea to include it.
Dr. Ahmed Said
| 12 of 37
Using the style Attribute, cont.
the style attribute can be used with most tags.
However, most tags somehow affect the appearance of the text that they enclose.
There’s a tag that doesn’t have any inherent effect on the text that it’s wrapped around: the <span> tag.
It exists solely to be associated with style sheets.
It’s used exactly like any of the other tags.
Simply wrap it around some text, like this:
<p>This is an example of the <span>usage of the span tag</span>.</p>
html
Used by itself, the <span> tag has absolutely no effect.
This is an example of the usage of the span tag.
Dr. Ahmed Said
| 13 of 37
The Text Decoration Property
The text-decoration property is used to specify the decoration added to text.
The text-decoration property can have one of the following values:
none : No decoration is added to the text.
underline : An underline is added to the text.
overline : An overline is added to the text.
line-through : A line is drawn through the text.
blink : The text blinks (not supported in most browsers).
Dr. Ahmed Said
| 14 of 37
The Text Decoration Property, cont.
<p>Here is some <span style="text-decoration: underline;">underlined text
</span>.</p>
<p>Here is some <span style="text-decoration: overline;">overlined text</span>.
</p>
<p>Here is some <span style="text-decoration: line-through;">line-through text
</span>.</p>
<p>Here is some <span style="text-decoration: blink;">blinking text</span>.</p>
html
Here is some underlined text .
Here is some overlined text.
Here is some line-through text .
Here is some blinking text.
Dr. Ahmed Said
| 15 of 37
Font Properties
The font-family property is used to specify the font of text.
The font-size property is used to specify the size of text.
The font-style property is used to specify the style of text.
The font-weight property is used to specify the weight of text.
The font-variant property is used to specify whether or not text should be displayed in small caps.
The line-height property is used to specify the height of a line.’
Dr. Ahmed Said
| 16 of 37
font-family Property
The font-family property is used to specify the font of text.
The font-family property can have one or more values, separated by commas.
If the font name consists of more than one word, it must be enclosed in quotation marks.
If the font name is not available, the browser will use the default font.
<p style="font-family: Arial, sans-serif;">This text is in Arial.</p>
html
This text is in Arial.
Dr. Ahmed Said
| 17 of 37
font-style Property
The font-style property is used to specify the style of text.
The font-style property can have one of the following values:
normal : The text is displayed normally.
italic : The text is displayed in italics.
oblique : The text is displayed in an oblique style (which may look like regular italics in your browser).
<p>Here's some <span style="font-style: italic;">italicized text</span>.</p>
<p>Here's some <span style="font-style: oblique;">oblique text</span>
(which may look like regular italics in your browser).</p>
html
Here's some italicized text.
Here's some oblique text (which may look like regular italics in your browser).
Dr. Ahmed Said
| 18 of 37
font-weight Property
The font-weight property is used to specify the weight of text.
The font-weight property can have one of the following values:
normal : The text is displayed normally.
bold : The text is displayed in a bold font.
bolder : The text is displayed in a bolder font.
lighter : The text is displayed in a lighter font.
100 to 900 : The text is displayed in a font weight from 100 (lightest) to 900 (heaviest).
Dr. Ahmed Said
| 19 of 37
font-weight Property, cont.
<p>Here's some <span style="font-weight: bold;">bold text</span>.</p>
<p>Here's some <span style="font-weight: bolder;">bolder text</span>.</p>
<p>Here's some <span style="font-weight: lighter;">lighter text</span>.</p>
<p>Here's some <span style="font-weight: 700;">bolder text</span>.</p>
html
Here's some bold text.
Here's some bolder text.
Here's some lighter text.
Here's some bolder text.
Dr. Ahmed Said
| 20 of 37
font-variant Property
The font-variant property is used to specify whether or not text should be displayed in small caps.
The font-variant property can have one of the following values:
normal : The text is displayed normally.
small-caps : The text is displayed in small caps.
<p><span style='font-variant: small-caps;'>This Text Uses Small Caps.</span></p>
html
Dr. Ahmed Said
| 21 of 37
font-size Property
The font-size property is used to specify the size of text and can have one of the following values:
xx-small : The text is displayed in an xx-small font.
x-small : The text is displayed in an x-small font.
small : The text is displayed in a small font.
medium : The text is displayed in a medium font.
large : The text is displayed in a large font.
x-large : The text is displayed in an x-large font.
xx-large : The text is displayed in an xx-large font.
smaller : The text is displayed in a smaller font.
larger : The text is displayed in a larger font.
length : The text is displayed in a font size specified in pixels, ems, or other units.
percentage : The text is displayed in a font size specified as a percentage of the parent element’s font size.
Dr. Ahmed Said
| 22 of 37
font-size Property, cont.
The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Dr. Ahmed Said
| 23 of 37
font-size Property, cont.
Set the font size to an absolute size:
<p style="font-size: 12px;">This text is 12 pixels in size.</p>
<p style="font-size: 24px;">This text is 24 pixels in size.</p>
html
This text is 12 pixels in size.
This text is 24 pixels in size.
Dr. Ahmed Said
| 24 of 37
font-size Property, cont.
Set the font size to a relative size:
<p style="font-size: 80%;">This text is 80% of the parent element's font size.</p>
html
This text is 80% of the parent element's font size.
Dr. Ahmed Said
| 25 of 37
font-size Property, cont.
Set the font size to a relative size using em :
The em unit is a relative unit of measurement that is based on the computed value of the font size of the
parent element.
1em is equal to the current font size. The default text size in browsers is 16px.
So, the default size of 1em is 16px.
The size can be calculated from pixels to ems using this formula:
pixels / parent element's font size in pixels (16px) = ems
<p style="font-size: 0.5em;">This text is half the parent element's font size.</p>
<p style="font-size: 1em;">This text is same as the parent element's font size.</p>
html
<p style="font-size: 1.5em;">This text is 1.5 times the parent element's font size.</p>
This text is half the parent element's font size.
This text is same as the parent element's font size.
This text is 1.5 times the parent element's font size.
Dr. Ahmed Said
| 26 of 37
line-height Property
The line-height property is used to specify the height of a line.
The line-height property can have one of the following values:
normal : The line height is normal.
number : The line height is a number that will be multiplied by the font size.
length : The line height is a length value.
percentage : The line height is a percentage of the font size.
<p>This text has a line height of 1.</p>
<p>This text has a line height of 1.</p>
html
<p style="line-height: 3;">This text has a line height of 3.</p>
This text has a line height of 1.
This text has a line height of 1.
This text has a line height of 3.
Dr. Ahmed Said
| 27 of 37
The font Property
The font property is a shorthand property for setting all the font properties in one declaration.
The font property can have the following values:
font-style
font-variant
font-weight
font-size
line-height
font-family
<p style="font: italic small-caps bold 12px/30px Arial, sans-serif;">
html
This text is italic, small caps, bold, 12 pixels in size, with a line height of 30 pixels, and in the Arial font.
</p>
This text is italic, small caps, bold, 12 pixels in size, with a line height of 30 pixels, and in the Arial font.
Dr. Ahmed Said
| 28 of 37
Side Notes
DO
DON’T
DO list backup fonts when specifying a font family in order to make it more likely that
your users will have one of the fonts you specify.
DON’T use too many different fonts on the same page.
DON’T use absolute font sizes with CSS if you can help it, because some
browsers won’t let users alter the text size if you do so.
Note
One thing to watch out for: When you specify units in CSS, you must leave no spaces between the number of units and unit
specification. In other words, 12px and 100% are valid, and 12 px and 100 % aren’t.
Dr. Ahmed Said
| 29 of 37
Including Style Sheets in a Page
So far, we’ve applied styles directly to HTML elements using the style attribute.
If you rely on the style attribute of tags to apply CSS, if you want to embolden every paragraph on a page,
you need to put style="font-weight: bold" in every <p> tag.
This is no improvement over just using <p><b> and </b></p> instead.
The good news is that the style attribute is the least efficient method of applying styles to a page or
a site.
The better way is to use external style sheets.
Dr. Ahmed Said
| 30 of 37
Creating Page-Level Styles
We can apply styles to our page at the page level using <style> tag.
The <style> tag is used to define style information for an HTML document.
The <style> tag contains CSS rules that define the styles for the page.
The <style> tag is placed inside the <head> element.
<head>
<style type="text/css">
h1 { font-size: x-large; font-weight: bold; }
h2 { font-size: large; font-weight: bold; }
html
</style>
</head>
- The `type` attribute indicates the **MIME type** of the style sheet. text/css is the only value you’ll use.
MIME type: A media type (also known as a Multipurpose Internet Mail Extensions)
Dr. Ahmed Said
| 31 of 37
External Style Sheets
External style sheets are the most efficient way to apply styles to a page or a site.
An external style sheet is a separate file that contains CSS rules.
External style sheets are linked to an HTML document using the <link> tag.
The <link> tag is placed inside the <head> element.
The href attribute specifies the path to the external style sheet.
The rel attribute specifies the relationship between the current document and the linked document.
The type attribute specifies the MIME type of the linked document.
<head>
...
html
<link href="filename.css" rel="stylesheet" type="text/css">
...
</head>
<link href="style.css" rel="stylesheet">
html
Dr. Ahmed Said
| 32 of 37
Basic CSS Syntax
A CSS rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
selector {
property: value;
property: value;
...
property: value;
css
}
p {
color: red;
css
font-family: sans-serif;
}
Dr. Ahmed Said
| 33 of 37
CSS Selectors
CSS selectors are used to select the HTML elements you want to style.
CSS selectors are case-insensitive.
You already seen one type of selector: the tag selector.
Tag selectors select all elements of a particular type.
You can add a rule to the <b> tag that makes all bold text red.
b {
color: red;
css
}
Dr. Ahmed Said
| 34 of 37
CSS Selectors, cont.
CSS selectors can be grouped to apply the same styles to multiple elements.
Suppose, for instance, that you want all unordered lists, ordered lists, and paragraphs on a page to be
displayed using blue text.
Instead of writing individual rules for each of these elements, you can write a single rule that applies to all of
them. Here’s the syntax:
p, ol, ul { color: blue; }
css
A comma-separated list indicates that the style rule should apply to all the tags listed.
The preceding rule is just an easier way to write the following:
p { color: blue; }
ol { color: blue; }
css
ul { color: blue; }
Dr. Ahmed Said
| 35 of 37
CSS Selectors, cont.
Applying styles to the <body> tag using the body selector enables you to apply pagewide settings.
A selector of * selects all elements
* {
css
}
body {
}
Dr. Ahmed Said
| 36 of 37
Contextual Selectors
Contextual selectors are used to apply styles to elements based on their context within the document.
These are used to apply styles to elements only when they’re nested within other specified elements.
Take a look at this rule:
ol em { color: blue; }
css
The fact that I left out the comma indicates that this rule applies only to em elements that are nested within
ordered lists.
ol, em { color: blue; }
css
Dr. Ahmed Said
| 37 of 37