13-Jan-20

Wollo University Cascading Style Sheets (CSS)

Kombolcha Institute of Technology Outline
College of Informatics  CSS Basics
Department of Information System  Style Sheet Rules  Type of CSS Styles
 CSS Selectors  Inline
Introduction to Internet Programming  Style Properties  Embedded
 Font and Text properties  External
Chapter 4
 Foreground and  Imported
Cascading Style Sheets (CSS) Background properties  Style Inheritance
 Layout and Positioning  Style Rules Precedence
Properties  Style Sheet Layers
Instructor: Habtamu Abate (M.Sc.)
Email: habate999@gmail.com

Internet Programming I CSS 1 Internet Programming I CSS 2

The good, the bad and the… ugly! Cascading Style Sheets (CSS)
3 4

<p>
<font face="Arial">Shashdot.</font>  Describes the appearance, layout, and
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be presentation of information on a web
<font size="+4" color="red">BORED</font> here!
</p> HTML page
Slashdot. News for nerds!! You will never, EVER be BORED HTML describes the content of the page
here!
output  Describes how information is to be
 Tags such as b, i, u, and font are discouraged in displayed, not what is being displayed.
strict XHTML  Can be embedded in HTML document or
 Why is this bad? placed into separate .css file
Internet Programming I CSS Internet Programming I CSS

1
 13-Jan-20

CSS Syntax and Selectors CSS Syntax and Selectors

5 6

 A CSS rule-set consists of a selector and a declaration  Each declaration includes a CSS property name
block: and a value, separated by a colon.
 A CSS declaration always ends with a semicolon,
and declaration blocks are surrounded by curly
braces.
 The selector points to the HTML element you want to style.  A CSS file consists of one or more rules
 The declaration block contains one or more declarations
separated by semicolons.

Internet Programming I CSS Internet Programming I CSS

Basic CSS rule syntax CSS comments /*…*/

7 8

selector { /* This is a comment.

property: value; It can span many lines in the CSS file. */
property: value; p {
... color: red; background-color: aqua;
property: value; } CSS
} CSS
p {
font-family: sans-serif;  CSS (like HTML) is usually not commented as rigorously as
color: red;
} CSS
programming languages such as Java
 The // single-line comment style is NOT supported in CSS
 Each rule starts with a selector
 The <!-- ... --> HTML comment style is also NOT supported in
 A selector specifies an HTML element(s) and then applies style CSS
properties to them
 a selector of * selects all elements
Internet Programming I CSS Internet Programming I CSS

2
 13-Jan-20

CSS Combinatory Descendant Selector

9 10

 A combinatory is something that explains the
relationship between the selectors.
 A CSS selector can contain more than one simple
selector. Between the simple selectors, we can include a
combinatory.
 The descendant selector matches all elements that
are descendants of a specified element.
 The following example selects all <p> elements
inside <div> elements:
 Example

 There are four different combinatory in CSS3: div p {

 descendant selector (space) background-color: yellow;
 child selector (>)

 adjacent sibling selector (+)

 general sibling selector (~)

Internet Programming I CSS Internet Programming I CSS

Child Selector Adjacent Sibling Selector

11 12

 The child selector selects all elements that are the  The adjacent sibling selector selects all elements that
immediate children of a specified element. are the adjacent siblings of a specified element.
 The following example selects all <p> elements that  Sibling elements must have the same parent element,

are immediate children of a <div> element: and "adjacent" means "immediately following".
 Example  The following example selects all <p> elements that

div > p { are placed immediately after <div> elements:

background-color: yellow;  Example

} div + p {
background-color: yellow;
Internet Programming I CSS
} Internet Programming I CSS

3
 13-Jan-20

General Sibling Selector CSS selector

13 14

Selector Example Example description CSS

 The general sibling selector selects all elements that .class .intro Selects all elements with class="intro" 1
are siblings of a specified element. #id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
 The following example selects all <p> elements that
element p Selects all <p> elements 1
are siblings of <div> elements: element,element div, p Selects all <div> elements and all <p> elements 1

 Example
element element div p Selects all <p> elements inside <div> elements 1

div ~ p { element>element div > p Selects all <p> elements where the parent is a <div> 2
background-color: yellow; element
element+element div + p Selects all <p> elements that are placed immediately 2
} after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> 3
element

Internet Programming I CSS Internet Programming I CSS

CSS selector Style Properties

15 16

[attribute] [target] Selects all elements with a target attribute 2  Setting the style of an HTML element, can be done with
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2 the style attribute.
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing 2
the word "flower"  The HTML style attribute has the following syntax:
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value 2
starting with "en" style="property:value;"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute 3
value begins with "https"  Use the style attribute for styling HTML elements
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute 3
value ends with ".pdf"  Use background-color for background color
[attribute*=value] a[href*="w3scho Selects every <a> element whose href attribute 3  Use color for text colors
ols"] value contains the substring "w3schools"
:active a:active Selects the active link 1  Use font-family for text fonts
::after p::after Insert something after the content of each <p> 2  Use font-size for text sizes
element
::before p::before Insert something before the content of each <p> 2  Use text-align for text alignment
Internet Programming I CSS element Internet Programming I CSS

4
 13-Jan-20

CSS properties for colors Specifying colors

17 18

p { p { color: red; }
color: red; h2 { color: rgb(128, 0, 196); }
background-color: yellow; h4 { color: #FF8800; }
} CSS
CSS
This paragraph uses the first style above
This paragraph uses the style above output
This h2 uses the second style above.
property description
This h4 uses the third style above.
color color of the element's text output
color that will appear behind the
background-color  color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
element
navy, olive, purple, red, silver, teal, white (white), yellow
 RGB codes: red, green, and blue values from 0 (none) to 255 (full)
Internet Programming I CSS Internet Programming I CSS
 hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

Grouping styles CSS properties for fonts

19 20

p, h1, h2 {
color: green; property description
} font-family which font will be used
h2 {
background-color: yellow; font-size how large the letters will be drawn
} CSS font-style used to enable/disable italic style
font-weight used to enable/disable bold style
This paragraph uses the above style.
This h2 uses the above styles.
output Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)

 A style can select multiple elements separated by commas

 The individual elements can also have their own styles

Internet Programming I CSS Internet Programming I CSS

5
 13-Jan-20

font-family More about font-family

21 22

p { p {
font-family: Georgia; font-family: Garamond, "Times New Roman", serif;
} } CSS
h2 {
font-family: "Courier New"; This paragraph uses the above style.
} CSS output

This paragraph uses the first style above.  We can specify multiple fonts from highest to lowest priority
 Generic font names:
This h2 uses the second style above.  serif, sans-serif, cursive, fantasy, monospace
output
 If the first font is not found on the user's computer, the
 Enclose multi-word font names in quotes next is tried
 Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
Internet Programming I CSS Internet Programming I CSS

font-size font-size
23 24

p { p {
font-size: 24pt; font-size: 24pt;
} CSS } CSS

This paragraph uses the style above. This paragraph uses the style above.
output output
 units: pixels (px) vs. point (pt) vs. m-size (em)  pt specifies number of point, where a point is 1/72 of an inch
16px, 16pt, 1.16em onscreen
 px specifies a number of pixels on the screen
 vague font sizes: ,
xx-small ,
x-small , medium, large, x-large, xx-large,
small
 em specifies number of m-widths, where 1 em is equal to the
smaller, larger font's current size
 percentage font sizes, e.g.: 90%, 120%
Internet Programming I CSS Internet Programming I CSS

6
 13-Jan-20

font-weight, font-style CSS properties for text

25 26

p {
font-weight: bold; property description
font-style: italic;
text-align alignment of text within its element
} CSS
text-decoration decorations such as underlining
This paragraph uses the style above. line-height,
output gaps between the various portions of
word-spacing,
the text
letter-spacing
 Either of the above can be set to normal to turn them off (e.g. indents the first letter of each
headings) text-indent
paragraph

Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)

Internet Programming I CSS Internet Programming I CSS

text-align text-decoration
27 28

blockquote { text-align: justify; } p {

h2 { text-align: center; } text-decoration: underline;
CSS } CSS

The Gollum’s Quote This paragraph uses the style above.

output
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!  can also be overline, line-through, blink, or
output none
 text-align can be left, right, center, or  effects can be combined:
justify text-decoration: overline underline;

Internet Programming I CSS Internet Programming I CSS

7
 13-Jan-20

The list-style-type property CSS properties for backgrounds

29 30

ol { list-style-type: lower-roman; } property description

CSS
background-color color to fill background
 Possible values: background-image image to place in background
i. none : No marker background-position placement of bg image within element
ii. disc (default), circle, square whether/how bg image should be
background-repeat
iii. Decimal: 1, 2, 3, etc. repeated
iv. decimal-leading-zero: 01, 02, 03, etc. background-attachment whether bg image scrolls with page
v. lower-roman: i, ii, iii, iv, v, etc. shorthand to set all background
background
vi. upper-roman: I, II, III, IV, V, etc. properties
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
Internet Programming I CSS Internet Programming I CSS
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…

background-image background-repeat
31 32

body { body {
background-image: url("images/draft.jpg"); background-image: url("images/draft.jpg");
} background-repeat: repeat-x;
CSS }
CSS

 background image/color fills the element's content area  can be repeat (default), repeat-x, repeat-y, or no-repeat

Internet Programming I CSS Internet Programming I CSS

8
 13-Jan-20

background-position Aside: Favorites icon ("favicon")

33 34

body { <link href="filename" type="MIME type" rel="shortcut icon"

background-image: url("images/draft.jpg"); /> HTML
background-repeat: no-repeat;
background-position: 370px 20px; <link href="yahoo.gif" type="image/gif" rel="shortcut
} CSS icon" />
HTML

 value consists of two tokens, each of which can be top, left,

right, bottom, center, a percentage, or a length value in px, pt,
etc.
 value can be negative to shift left/up by a given amount
Internet Programming I CSS
 The link tag, placed in the HTML page's head section, can
specify an icon
 this icon will be placed in the browser title bar and bookmark/favorite
Internet Programming I CSS

Layout and Positioning

Body styles
35
Properties
36

body {
font-size: 16px;
The CSS Box Model
}  All HTML elements can be considered as boxes.
CSS
 In CSS, the term "box model" is used when talking about design
and layout.
 Applies a style to the entire body of your page  The CSS box model is essentially a box that wraps around every
 Saves you from manually applying a style to each element HTML element.
 It consists of: margins, borders, padding, and the actual content.
 The box model allows us to add a border around elements, and
to define space between elements.
 The image below illustrates the box model:

Internet Programming I CSS Internet Programming I CSS

9
 13-Jan-20

Layout and Positioning Layout and Positioning

37
Properties 38
Properties
 Explanation of the different parts:
 Content - The content of the box, where text and images
appear
 Padding - Clears an area around the content.
 The padding is transparent
 Border - A border that goes around the padding and
content
 Margin - Clears an area outside the border. The margin
is transparent

Internet Programming I CSS Internet Programming I CSS

Example CSS Outline Style

39 40

 div {  The outline-style property The effect depends on the outline-

width: 320px; specifies the style of the outline.
padding: 10px;
border: 5px solid gray;  The outline-style property can have
one of the following values:
margin: 0;
}  dotted - Defines a dotted outline
 Assume we want to style a <div> element to have a total width of 350px:  dashed - Defines a dashed outline
 Total element width = width + left padding + right padding + left border  solid - Defines a solid outline
+ right border + left margin + right margin  double - Defines a double outline
 Total element height = height + top padding + bottom padding + top  groove - Defines a 3D grooved
border + bottom border + top margin + bottom margin outline. The effect depends on the
outline-color value
 ridge - Defines a 3D ridged outline.
color value
 inset - Defines a 3D inset outline. The
effect depends on the outline-color
value
 outset - Defines a 3D outset outline.
The effect depends on the outline-
color value
 none - Defines no outline
 hidden - Defines a hidden outline

Internet Programming I CSS Internet Programming I CSS

10
 13-Jan-20

All CSS Outline Properties CSS Layout - The display Property

41 42

Property Description
 The display property specifies if/how an element is
outline Sets all the outline properties in one declaration
displayed.
outline-color Sets the color of an outline
 Every HTML element has a default display value
depending on what type of element it is.
outline-offset Specifies the space between an outline and the edge or border of an
element  The default display value for most elements
outline-style Sets the style of an outline is block or inline.
outline-width Sets the width of an outline Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible

Internet Programming I CSS Internet Programming I CSS

CSS Layout - width and max-width CSS Layout - The position Property
43 44

 Example  The position property specifies the type of positioning method used for an element (static,
relative, fixed or absolute).
div.ex1 {
width: 500px;  Example position: absolute;
margin: auto; div.relative { top: 80px;
border: 3px solid #73AD21; position: relative; right: 0;
} width: 400px; width: 200px;
height: 200px; height: 100px;
div.ex2 { border: 3px solid #73AD21; border: 3px solid #73AD21;
max-width: 500px; } }
margin: auto;
border: 3px solid #73AD21; div.absolute {
}
Internet Programming I CSS Internet Programming I CSS

11
 13-Jan-20

CSS Navigation Bar Example

45 46

 Navigation Bar = List of Links  ul { padding: 8px 0 8px

A navigation bar needs standard HTML as a base.

list-style-type: none; 16px;
 In our examples we will build the navigation bar from a standard HTML list.
margin: 0; text-decoration: none;
 A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense: padding: 0; }
 Example width: 200px; /* Change the link color
 <ul> background- on hover */
<li><a href="default.html">Home</a></li> color: #f1f1f1; li a:hover {
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li> } background-
<li><a href="about.html">About</a></li> li a { color: #555;
</ul>
display: block; color: white;
color: #000; }
Internet Programming I CSS Internet Programming I CSS

Active/Current Navigation Link Horizontal Navigation Bar Examples

47 48

Create a basic horizontal navigation bar }

 Add an "active" class to the current link to let the 

with a dark background color and

user know which page he/she is on: change the background color of the links li a {
when the user moves the mouse over display: block;
them: color: white;
 Example text-align: center;
padding: 14px 16px;
 ul { text-decoration: none;
list-style-type: none; }
margin: 0;
padding: 0; /* Change the link color to #111 (black)
overflow: hidden; on hover */
background-color: #333; li a:hover {
} background-color: #111;
}
li {
float: left;
Internet Programming I CSS Internet Programming I CSS

12
 13-Jan-20

CSS Dropdowns Dropdown Menu

49 50

 Create a dropdown box that appears when the user moves the mouse over an  Create a dropdown menu that allows the user to
element.
 Example z-index: 1; choose an option from a list:
 <style> }
.dropdown { .dropdown:hover .dropdown-content {
position: relative; display: block;
display: inline-block; }
} </style>
.dropdown-content {
display: none; <div class="dropdown">
position: absolute; <span>Mouse over me</span>
background-color: #f9f9f9; <div class="dropdown-content">
min-width: 160px; <p>Hello World!</p>
box-shadow: 0px 8px 16px 0px </div>
rgba(0,0,0,0.2); </div>
padding: 12px 16px;
Internet Programming I CSS Internet Programming I CSS


Example
<style> position: absolute; display: block;
Three Ways to Insert CSS
/* Style The Dropdown Button background-color: #f9f9f9; }
51 52
*/ min-width: 160px;
.dropbtn { box-shadow: 0px 8px /* Change the background
background- 16px 0px rgba(0,0,0,0.2); color of the dropdown button  There are three ways of inserting a style sheet:
color: #4CAF50; } when the dropdown content is
color: white; /* Links inside the dropdown shown */  External style sheet
padding: 16px; */ .dropdown:hover .dropbtn {
font-size: 16px;
border: none;
.dropdown-content a {
color: black;
background-
color: #3e8e41;
 Internal style sheet
cursor: pointer; padding: 12px 16px; }
} text-decoration: none; </style>  Inline style
/* The container <div> - display: block; <div class="dropdown">
needed to position the } <button class="dropbtn">Dr
dropdown content */ opdown</button>
.dropdown { /* Change color of dropdown <div class="dropdown-
position: relative; links on hover */ content">
display: inline-block; .dropdown-content <a href="#">Link 1</a>
} a:hover {background- <a href="#">Link 2</a>
color: #f1f1f1} <a href="#">Link 3</a>
/* Dropdown Content (Hidden /* Show the dropdown menu </div>
by Default) */ on hover */ </div>
.dropdown-content { I CSS
Internet Programming .dropdown:hover .dropdown- Internet Programming I CSS
display: none; content {

13
 13-Jan-20

Attaching a CSS file <link> Embedding style sheets: <style>

53 54

<head>
... <head>
<link href="filename" type="text/css" rel="stylesheet" /> <style type="text/css">
... p { font-family: sans-serif; color: red; }
</head> HTML h2 { background-color: yellow; }
</style>
</head>
<link href="style.css" type="text/css" rel="stylesheet" /> HTML
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
 CSS code can be embedded within the head of an HTML page
 A page can link to multiple style sheet files
 In case of a conflict (two sheets define a style for the same HTML  Bad style and should be avoided when possible (why?)
element), the latter sheet's properties will be used

Internet Programming I CSS Internet Programming I CSS

Inline styles: the style attribute Cascading Style Sheets

55 56

<p style="font-family: sans-serif; color: red;">  Properties of an element cascade together in this
This is a paragraph</p> order:
HTML  browser's default styles
This is a paragraph  external style sheet files (in a <link> tag)

output  internal style sheets (inside a <style> tag in the page's

header)
 inline style (the style attribute of the HTML element)
 Higher precedence than embedded or linked styles
 Used for one-time overrides and styling a particular element
 Bad style and should be avoided when possible (why?)

Internet Programming I CSS Internet Programming I CSS

14
 13-Jan-20

Inheriting styles Styles that conflict

57 58

body { font-family: sans-serif; background-color: yellow; p, h1, h2 { color: blue; font-style: italic; }
} h2 { color: red; background-color: yellow; }
p { color: red; background-color: aqua; } CSS
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; } This paragraph uses the first style above.
CSS
This heading uses both styles above.
This is a heading output
A styled paragraph. Previous slides are available on the website.

• A bulleted list output  when two styles set conflicting values for the same property,
the latter style takes precedence
 when multiple styles apply to an element, they are inherited
 a more tightly matching rule can override a more general o not all properties are inherited (notice link's color above)
inherited rule
Internet Programming I CSS Internet Programming I CSS

W3C CSS Validator

59

<p>
<a href="http://jigsaw.w3.org/css-
validator/check/referer">
60 Question???
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS Practice:
Lab Exercise # 1,2 and3

output

 jigsaw.w3.org/css-validator/
 checks your CSS to make sure it meets the official CSS
specifications
Internet Programming I CSS Internet Programming I CSS

15