Scribd
Upload
19 views

CSS Lecture 6 - 7

The document discusses different types of CSS selectors including simple selectors, combinator selectors, attribute selectors, pseudo class selectors, and pseudo element selectors. It provides examples and explanations of element selectors, id selectors, class selectors, universal selectors, descendant selectors, child selectors, adjacent sibling selectors, and general sibling selectors.

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

CSS Lecture 6 - 7

The document discusses different types of CSS selectors including simple selectors, combinator selectors, attribute selectors, pseudo class selectors, and pseudo element selectors. It provides examples and explanations of element selectors, id selectors, class selectors, universal selectors, descendant selectors, child selectors, adjacent sibling selectors, and general sibling selectors.

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

Cascading Style

Sheets
(CSS)
Lecture 6 -7 -8
Table of Contents
⬥What is CSS?
⬥ Styling with Cascading Stylesheets (CSS)
⬥Selectors and style definitions
⬥Linking HTML and CSS
⬥Fonts, Backgrounds, Borders
⬥The Box Model
⬥Alignment, Z-Index, Margin, Padding
⬥Positioning and Floating Elements
⬥Visibility, Display, Overflow
⬥CSS Development Tools
2
CSS Introduction
⬥ Cascading Style Sheets (CSS)
⬩ Used to describe the presentation of documents
⬩ Define sizes, spacing, fonts, colors, layout, etc.
⬩ 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.

3
CSS Introduction (2)
⬥CSS can be applied to any XML document
⬩ Not just to HTML / XHTML
⬥CSS can specify different styles for different
media
⬩ On-screen
⬩ In print
⬩ Handheld, projection, etc.
⬩ … even by voice or Braille-based reader

4
Why “Cascading”? (3)
⬥Some CSS styles are inherited and some not
⬩ Text-related and list-related properties are
inherited - color, font-size, font-family,
line-height, text-align, list-style,
etc
⬩ Box-related and positioning styles are not
inherited - width, height, border, margin,
padding, position, float, etc
⬩ <a> elements do not inherit color and
text- decoration
5
Why “Cascading”?
⬥Priority
scheme determining which style rules
apply to element
⬩ Cascade priorities or specificity (weight) are
calculated and assigned to the rules
⬩ Child elements in the HTML DOM tree inherit
styles from their parent
⬩ Can override them
⬩ Control via !important rule

6
Using <DIV> and
<SPAN>
Block and Inline Elements
Definition and Usage
The <div> tag defines a division or a section in an
HTML document.
The <div> tag is used as a container for HTML
elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or id
attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break
before and after the <div> element
DIV Element
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<p>The yellow background is added to demonstrate the footprint of the DIV


element.</p>

</body>
</html>
The <span>
⬥Inline style element
Tag
⬥ Useful for modifying a specific portion of text
⬩ Don't create a separate area
(paragraph) in the document
⬥Very useful with CSS

span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-
size:32px;
font-weight:bold">TEST</span>.</p> 10
Style Sheets Syntax
⬥ Stylesheets consist of rules, selectors,
declarations, properties and values

http://css.maxdesign.com.au/

⬥ Selectors are separated by commas


⬥ Declarations are separated by semicolons
⬥ Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }
11
selector

CSS selectors are used to "find" (or select) the HTML


elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id,
class)
Combinator selectors (select elements based on a specific
relationship between them)
Pseudo-class selectors (select elements based on a
certain state)
Pseudo-elements selectors (select and style a part of an
element)
Attribute selectors (select elements based on an
attribute or attribute value)
Selector types

1. Simple selector
2. Combinator selector
3. Attribute selector
4. Pseudo class selector
5. Pseudo element Selector
NO 1 Simple Selector (5 types)

1. Element selector
2. Id selector
3. Class selector
4. Universal Selector
5. Grouping Selector
Element Selector The element selector selects all elements
With the specified element name.
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Demo of the element selector</h1>

<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is abc.</p>

</body>
</html>
Id Selector
The id of an element is unique within a page, so the id selector is used to
select one unique element! To select an element with a specific id, write a
hash (#) character, followed by the id of the element

<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Demo of the #id selector</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is ABC.</p>

</body>
</html>
Class Selector
CLass selector is formatted as a period
(.) character followed by the name of the class.
It selects all elements with that class
attribute so that unique CSS declarations can be
applied to those specific elements without
affecting other elements on the page.
Class selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>
Grouping SelectorThe grouping selector selects all the HTML
elements with the same style definitions. It will be better
to group the selectors, to minimize the code.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>
Universal Selector

The universal selector provided by CSS helps


in choosing any elements within the HTML
page. It goes with a single element and uses
the asterisk (i.e., "*") symbol used for
denoting the selector as a universal
selector. It is usually written as an
asterisk followed by a selector.
Universal selector
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the


style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>
NO2 Combinator selectorA combinator is something
that explains the relationship between the
selectors

4 types
1. Descendent selector (space)
2. Child selector >
3. Adjacent Sibling selector +
4. General sibling selector (~)
Descendent selector

:The descendant selector matches all elements that are


descendants of a specified element.
The following example selects all <p> elements inside <div>
elements

div p {background-color: yellow;}


<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span>
<p>Paragraph 3 in the div</p>
</span>
</div>
Descendent Selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified
element.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>


<p>Paragraph 5. Not in a div.</p>

</body>
</html>
Child Selector (>)
. The child selector selects all elements that are the
children of a specified element. The following example
selects all <p> elements that are children of a
<div> ..
div > p {background-color: yellow;}
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span>
<p>Paragraph 3 in the div</p>
</span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
25
Adjacent Sibling Selector (+)

Adjacent Sibling Selector (+)The adjacent


sibling selector is used to select an element
that is directly after another specific
element. Sibling elements must have the same
parent element, and "adjacent" means
"immediately following div + p {background-
color: yellow;}
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

26
General Sibling Selector (~)

The general sibling selector selects all elements


that are siblings of a specified element.
div ~ p {background-color: yellow;}
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<h1></h1>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

27
No 3 Attribute selector
The [attribute] selector is used to select elements with a
specified attribute
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>

</body>
</html>
The ::first-letter CSS pseudo-element
applies styles to the first letter of the
first line of a block container, but only
when not preceded by other content (such as
images or inline tables).
4 First letter Pseudo element

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to


add a special effect to the first character of a text!
</p>

</body>
</html>
NO 4 Pseudo class Selector
Lab Task
Hints

pseudo class Selector


A pseudo-class is used to define a special state
of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax
selector:pseudo-class {
property: value;
}
Pseudo class
<!DOCTYPE html>
< html>
selector
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>


<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
Values in the CSS Rules
⬥ Colors are set in RGB format (decimal or hex):
⬩ Example: #a0a6aa = rgb(160, 166, 170)
⬩ Predefined color aliases exist: black, blue, etc.
⬥ Numeric values are specified in:
⬩ Pixels, ems, e.g. 12px , 1.4em
⬩ Points, inches, centimeters, millimeters
⬩ E.g. 10pt , 1in, 1cm, 1mm
⬩ Percentages, e.g. 50%
⬩ Percentage of what?...
⬩ Zero can be used with no unit: border: 0; 33
Default Browser Styles
⬥Browsers have default CSS styles
⬩ Used when there is no CSS information or any
other style information in the document
⬥Caution: default styles differ in browsers
⬩ E.g. margins, paddings and font sizes differ
most often and usually developers reset them
* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

34
Linking HTML and CSS

CSS can be added to HTML documents in 3 ways:


•Inline - by using the style attribute inside HTML
elements
•Internal - by using a <style> element in
the <head> section
•External - by using a <link> element to link to
an external CSS file
The most common way to add CSS, is to keep the
styles in external CSS files

35
Linking HTML and CSS (2)
⬥ Using external files is highly recommended
⬩ Simplifies the HTML document
⬩ Improves page load speed as the CSS file is
cached

36
Inline Styles: Example
inline-styles.html
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

37
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "htt
p://www.w3.org/TR/xhtml1/ DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon--
>
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html> 38
CSS Cascade (Precedence)
⬥There arebrowser, user and author stylesheets
with "normal" and "important" declarations
⬩ Browser styles (least priority)
⬩ Normal user styles
⬩ Normal author styles (external, in head, inline)
⬩ Important author styles
⬩ Important user styles (max priority)
a { color: red !important ; }

http://www.slideshare.net/maxdesign/css-cascade-1658158
39
CSS Specificity
⬥CSS specificity
is used to determine the
precedence of CSS style declarations with the
same origin. Selectors are what matters
⬩ Simple calculation: #id = 100, .class = 10,
:pseudo = 10, [attr] = 10, tag = 1, * = 0
⬩ Same number of points? Order matters.
⬩ See also:
⬩ http://www.smashingmagazine.com/2007/07/27/css-specificity-things-

you-should-know/
40
Embedded Styles
⬥Embedded in the HTML in the <style> tag:
<style type="text/css">

⬩ The <style> tag is placed in the


<head>
section of the document
⬩ type attribute specifies the MIME type
⬩ MIME describes the format of the content
⬩ Other MIME types include text/html,
image/gif, text/javascript …
⬥Used for document-specific styles
41
<!DOCTYPE html>

<html>
Embedded Styles: Example
<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
42
Embedded Styles: Example (2)

…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is
some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some
<em>more</em>
text. Here is some more text.</p>
</body>
</html>

43
Embedded Styles: Example (3)

…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is
some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some
<em>more</em>
text. Here is some more text.</p>
</body>
</html>

44
External CSS Styles
⬥ External linking
⬩ Separate pages can all use a shared style sheet
⬩ Only modify a single file to change the styles across
your entire Web site (see http://www.csszengarden.com/)
⬥ link tag (with a rel attribute)
⬩ Specifies a relationship between current document
and another document
<link rel="stylesheet" type="text/css"
href="styles.css">

⬩ link elements should be in the


<head> 45
External CSS Styles (2)
@import
⬩ Another way to link external CSS files
⬩ Example:
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

⬩ Ancient browsers do
not recognize
@import
46
External Styles: Example
styles.css
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;


color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm }

47
External Styles: Example (2)
external-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for
<em>Monday</em>:</h1>
<li>Milk</li>
… 48
External Styles: Example (3)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</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>
49
External Styles: Example (4)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</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>
50

You might also like