Scribd
Upload
23 views

Chapter 2 Cascade Style Sheet CSS AAU Sem II 2014

Uploaded by

abdullahtate3
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
23 views

Chapter 2 Cascade Style Sheet CSS AAU Sem II 2014

Uploaded by

abdullahtate3
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 168

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)


 CSS stands for Cascading Style Sheets
 An extension (addition) to HTML which allows us to style
our web pages
 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
 Provides more detailed attributes to elements than the
ones defined in standard HTML
 It can control the layout of multiple web pages all at once
 Styles are defined once and used any number of times
and in several contexts
 Clearly separate content from its presentation
Saves a lot of work
 Especially in website maintenance and upgrading

2
Cascading Style Sheets (CSS):
 is a simple mechanism for adding style (e.g. fonts,
colors, layouts) to Web documents.
 Styles provide powerful control over the
presentation of web pages.

 CSS Solved a Big Problem


 HTML was NEVER intended to contain tags for
formatting a web page!
 HTML was created to describe the content of a web
page, like:
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 CSS removed the style formatting from the HTML page!
3 Web Programming
Why Use CSS?

 CSS is used to define styles for your web


pages, including the design, layout and
variations in display for different devices and
screen sizes.

 CSS Saves a Lot of Work!


 The style definitions are normally saved in
external .css files.
 With an external stylesheet file, you can
change the look of an entire website by
changing just one file!

4 Web Programming
CSS (cont’d)
 CSS styles can be specified:
 Inside a single HTML element (inline)
 Inside the <head> element of an HTML document
(internal)
 In an external CSS file (external)

 Rules of precedence application:


 Inline styles
 Internal styles (Embedded)
 External styles
 Browser default
 From highest to lowest
5 Web Programming
CSS Syntax
A style sheet consists of a set of rules.
Each rule consists of one or more selectors
and a declaration block.
A declaration block consists of a list of
declarations in curly braces ({}).
Each declaration consists of a property, a
colon (:), a value, then a semi-colon (;).

CSS Syntax
selector {property: value;}

6 Web Programming
CSS Syntax …
 Parts of a style rule (or statement)
CSS Syntax …
 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.
 A CSS declaration always ends with a
semicolon, and declaration blocks are
surrounded by curly braces.

8 Web Programming
 The selector is normally the HTML element you
want to style.
p {color:red;text-align:center;}
 all <p> elements will be center-aligned, with a
red text color
 To make the CSS more readable, you can put one
declaration on each line, like this:
p
{
color:red;
text-align:center;
Example Explained
p is}a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

9 Web Programming
 CSS Selectors
 A CSS selector selects the HTML element(s) you want
to style.
 CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class,
attribute
 Types of selectors
 HTML tag names (or element Selector )
 Class selectors
 Id selectors
 Descendant Selector
 Child Selector
 pseudo-class Selector
 Attribute Selectors

10 Web Programming
HTML tag names as selectors(or The
element Selector )
 The element selector selects elements based on the
element name.
 You can select all <p> elements on a page like this (in
this case, all <p> elements will be center-aligned, with
a red text color):
p {
text-align: center;
color: red;
}
 used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}
11
Grouping Selectors
 Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
 If you have elements with the same style definitions,
like this:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

12 Web Programming
Grouping Selectors …
 In the example below we have grouped the
selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}

13 Web Programming
The class selector
 define generic styles that can be applied to
different HTML elements
 applied to the class attribute of HTML elements
 The class selector is used to specify a style for
a group of elements. Unlike the id selector, the
class selector is most often used on several
elements.
 This allows you to set a particular style for
many HTML elements with the same class.
 The class selector uses the HTML class
attribute, and is defined with a "."

14 Web Programming
Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green }
 <p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
 <div class=“color”>some text</div>
<table class=“color”>…</table>

15 Web Programming
 In the example below, all HTML elements with
class="center" will be center-aligned:
 .center {text-align:center;}
 You can also specify that only specific HTML
elements should be affected by a class.
 In the example below, all p elements with
class="center" will be center-aligned:
 p.center {text-align:center;}

16 Web Programming
CSS (cont’d)
 The Id selector
 unlike the class selector, the Id selector always
applies to only one element
 The id selector is used to specify a style for a
single, unique element.
 The id selector uses the id attribute of the
HTML element, and is defined with a "#".

17 Web Programming
Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
 <p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
 <div id=“color”>some text</div>
<table id=“color”>…</table>
possible ???

18 Web Programming
 CSS Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the
more transparent:

img {
opacity: 0.5;
}

Transparent Hover Effect

The opacity property is often used together with the :hover selector to
change the opacity on mouse-over: img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
19 } Web Programming
 Transparency using RGBA
div {
background: rgba(76, 175, 80, 0.3) /* Green
background with 30% opacity */
}

20 Web Programming
CSS (cont’d)
 CSS comments
 Format:
/* comment text */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

21 Web Programming
 Three Ways to Insert CSS
 There are three ways of inserting a style
sheet:
 External style sheet
 Internal style sheet
 Inline style

22 Web Programming
Inline Styles

 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
 style information is directly attached to the HTML elements they
affect
 higher cascade precedence than the other specification
methods
 declaring an individual element’s format:
 Attribute style
 CSS (style) property
<tag_name style=“property:value; property:
 Followed by a colon and a value
value;”> … </tag_name>

Ex. <table style=“background-color: yellow”>…


</table>
<p style="color:sienna;margin-left:20px">This is a
23 Web Programming
paragraph.</p>
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

24 Web Programming
Internal or Embedded Style Sheets
 this method can only specify style information for the
current document:
 1:1 relationship
 However, the same document may have other style definitions
applied to it
 1:M relationship
 embedded style sheet rule will have higher precedence
than external style sheet rule, if there is a conflict
between styles
embedded style sheet rule will have lower precedence
than an inline style sheet rule
Internal / Embedded Style Sheets
 Embed an entire CSS document in an XHTML
document’s head section inside a style element
 Attribute type
 Multipurpose Internet Mail Extensions (MIME) type
 describes the type of the document’s content
 text/css is the type for CSS document

 Style properties are defined for:


 Existing defined elements, such as p (paragraph), h3
(header), li (Iist) or any other
 Style class that can be applied to either:
 Any existing type of element in the body of the document or
 One specific element in the document
Internal or Embedded Style Sheets
 An internal style sheet should be used when a single document has
a unique style. You define internal styles in the head section of an
HTML page, by using the <style> tag, like this:
defined in the <head> element
<style type=“text/css”>
{property:value; ...}
</style>
Eg:

27 Web Programming
 Eg:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body
{background-image:url("images/back40.
gif");}
</style>
</head>

28 Web Programming
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

29 Web Programming
External Style Sheet

 An external style sheet is ideal when the style is


applied to many pages. With an external style
sheet, you can change the look of an entire Web
site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link>
tag goes inside the head section:
 defined in a separate CSS file
 linked to an HTML document using the <link> tag
<link rel=“stylesheet” type=“text/css”
href=“url”>
 changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in
which the style is attached
30 Web Programming
CSS (cont’d)
 An external style sheet can be written in any text
editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension. An example of a style sheet file is
shown below:
 hr {color:sienna;}
p {margin-left:20px;}
body
{background-image:url("images/back40.gif");}

 Do not add a space between the property value


and the unit (such as margin-left:20 px). The
correct way is: margin-left:20px
31 Web Programming
 /* An external style sheet * styles.css/

a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
color:red;
background-color:#ccffcc;
}

32 Web Programming
"mystyle.css"

body {
<!DOCTYPE html> background-color: lightblue;
<html> }
<head>
<link rel="stylesheet" href="mystyle.css"> h1 {
</head> color: navy;
<body> margin-left: 20px;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

33 Web Programming
Cascading Order
What style will be used when there is more than one style
specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the
highest priority:

1.Inline style (inside an HTML element)


2.External and internal style sheets (in the head section)
3.Browser default

So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.

34 Web Programming
Some common CSS properties

Background
 CSS background properties are used to define the
background effects of an element
 CSS properties used for background effects:
 background-color: color
 background-image: url(url)
 Sets the background image for an element

 background-repeat: repeat_type {repeat,


repeat-x, repeat-y, no-repeat}
 background-attachment: attachment_type {scroll,
fixed}
 Sets whether a background image is fixed or

scrolls with the rest of the page (default: scroll)


35 Web Programming
Background Color
 The background-color property specifies the
background color of an element.
 The background color of a page is defined in
the body selector:
 body {background-color:#b0c4de;}
 With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

36 Web Programming
Background Image
 The background-image property specifies an
image to use as the background of an element.
 By default, the image is repeated so it covers the
entire element.
 The background image for a page can be set like
this:
body {background-
image:url('paper.gif');}
 Background Image - Repeat Horizontally or
Vertically
 By default, the background-image property repeats
an image both horizontally and vertically.
37 Web Programming
Example:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Tip: To repeat an image vertically,


set background-repeat: repeat-y;
Tip: If you want the image not to repeat in
both directions you write:
background-repeat: no-repeat;
38 Web Programming
Background Image - Set position and
no-repeat
 The position of the image is specified by the background-
position property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top ;
}

39 Web Programming
 The background-position property sets the
starting position of a background image.
 Values of background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
40 Web Programming
Background Image - Fixed position

 To specify that the background image should


be fixed (will not scroll with the rest of the
page), use the background-
attachment property:

body {
background-
image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
41 Web Programming
Background - Shorthand property
 To shorten the code, it is also possible to specify all the
properties in one single property. This is called a
shorthand property.
 The shorthand property for background is simply
"background":

42 Web Programming
body {
background:#ffffff url('img_tree.png') no-repeat right
top;
}
 When using the shorthand property the order of
the property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is
missing, as long as the ones that are present are
in this order.
43 Web Programming
Text

 color: color
 The color property is used to set the color of the text.
 The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

 The default color for a page is defined in the


body selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

44 Web Programming
The text-decoration property
 Specifies the decoration added to text.
 text-decoration: decoration {none, underline, overline, line-
through, blink}
 Note: The color of the decoration should be set by the
"color" property.
 The value text-decoration: none; is often used to remove
underlines from links:
a{
text-decoration: none;
}
 Set the text decoration for h1, h2, h3, and h4 elements:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

45 Web Programming
 direction: direction {ltr, rtl} browser
issue??
 (writing direction)
 letter-spacing: value in pixels(+ve or –
ve)
 text-align: alignment {left, right, center,
justify}
 white-space: Sets how white space
inside an element is handled
normal
pre
nowrap

46 Web Programming
Text Shadow

 The text-shadow property adds shadow to


text.
 The following example specifies the position
of the horizontal shadow (3px), the position of
the vertical shadow (2px) and the color of the
shadow (red):

h1 {
text-shadow: 3px 2px red;
}

47 Web Programming
text-indent: value

 The text-indent property specifies the


indentation of the first line in a text-block.
 Note: Negative values are allowed. The first
line will be indented to the left if the value is
negative.
 Value: Defines a fixed indentation in px, pt,
cm, em, etc.

 (16px=1em).
48 Web Programming
 text-transform: transform {none, capitalize,
uppercase, lowercase}
 The text-transform property controls the
capitalization of text.
 Capitalize: Transforms the first character of
each word to uppercase
 Uppercase: Transforms all characters to uppercase
 lowercase :Transforms all characters to lowercase
Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
49 Web Programming
word-spacing: value
 The word-spacing property increases or
decreases the white space between words.
 Note: Negative values are allowed.
 Example
 Specify that the space between words in
paragraphs should be 30 pixels:
p
{
word-spacing:30px;
}

50 Web Programming
Line Height

 The line-height property is used to specify the


space between lines:

 p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

51 Web Programming
CSS Font

 CSS font properties define the font family,


boldness, size, and the style of a text.
Font Family
 The font family of a text is set with the
font-family property.
 Note: If the name of a font family is more
than one word, it must be in quotation
marks, like font-family: "Times New
Roman".
 More than one font family is specified in a
comma-separated list:
52 Web Programming
• Times New Roman
Georgia
• Arial
Verdana
• Courier New
Lucida Console
• Monospace
• Sans-serif
Eg:
p{font-family:"Times New Roman", Times,
serif;}
53 Web Programming
Font Style

 The font-style property is mostly used to


specify italic text.
 This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is
very similar to italic, but less supported)
 p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

54 Web Programming
Font Size
 The font-size property sets the size of the
text.
 Setting the text size with pixels, gives you full
control over the text size:
Eg:
h1{font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

(16px=1em)
55 Web Programming
 An em is equal to the current font-size, for
instance, if the font-size of the document is 12pt,
1em is equal to 12pt.
 Ems are scalable in nature, so 2em would equal
24pt, .5em would equal 6pt
56 Web Programming
 Pixels (px): Pixels are fixed-size units that
are used in screen media (i.e. to be read on
the computer screen). One pixel is equal to
one dot on the computer screen (the smallest
division of your screen’s resolution). Many
web designers use pixel units in web
documents in order to produce a pixel-perfect
representation of their site as it is rendered in
the browser. One problem with the pixel unit
is that it does not scale upward for visually-
impaired readers or downward to fit mobile
devices.
57 Web Programming
 Points (pt): Points are traditionally used in
print media (anything that is to be printed on
paper, etc.). One point is equal to 1/72 of an
inch. Points are much like pixels, in that they
are fixed-size units and cannot scale in size

58 Web Programming
So, What’s the Difference?
 It’s easy to understand the difference
between font-size units when you see them in
action. Generally,1em = 12pt = 16px =
100%. When using these font-sizes, let’s see
what happens when you increase the base
font size (using the body CSS selector) from
100% to 120%.

59 Web Programming
 As you can see, both the em and percent units
get larger as the base font-size increases, but
pixels and points do not. It can be easy to set
an absolute size for your text, but it’s much
easier on your visitors to use scalable text
that can display on any device or any
machine. For this reason, the em and percent
units are preferred for web document text.

60 Web Programming
 font-style: style {normal, italic, oblique}
 font-weight: weight {normal, bold, bolder,
lighter, 100, 200, …}
 font-size: size
 font-family: font_list (in order of precedence,
separated by comma)

61 Web Programming
Font Variant

 The font-variant property specifies whether or not


a text should be displayed in a small-caps font.
 In a small-caps font, all lowercase letters are
converted to uppercase letters. However, the
converted uppercase letters appears in a smaller
font size than the original uppercase letters in the
text.
 p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}
62 Web Programming
Borders
 Box model
 The CSS box model is essentially a box that
wraps around every HTML element. It consists
of: margins, borders, padding, and the
actual content. The image below illustrates
the box model:

63 Web Programming
 Margin - Clears an area around the border.
The margin does not have a background color,
it is completely transparent
 Border - A border that goes around the
padding and content. The border is affected
by the background color of the box
 Padding - Clears an area around the content.
The padding is affected by the background
color of the box
 Content - The content of the box, where text
and images appear

64 Web Programming
 Width and Height of an Element
 Important: When you set the width and
height properties of an element with CSS, you
just set the width and height of the content
area. To calculate the full size of an element,
you must also add the padding, borders and
margins.

65 Web Programming
 The total width of the element in the example
below is 300px
 width:250px;
padding:10px;
border:5px solid gray;
margin:10
 The total width of an element should be calculated like this:
 Total element width = width + left padding + right padding
+ left border + right border + left margin + right margin
 The total height of an element should be calculated like this:
 Total element height = height + top padding + bottom
padding + top border + bottom border + top margin +
bottom margin
66 Web Programming
 Margin properties:
 margin-top
 margin-right
 margin-bottom
 margin-left
 margin
 These properties set the top, right, bottom,
and left margin of a box.
 Eg: H1 { margin-top: 2em }

67 Web Programming
 The margin property is a shorthand property for
setting margin-top, margin-right, margin-
bottom and margin-left at the same place in the
style sheet.
 (top->right->bottom->left)
 If there is only one value, it applies to all sides.
 If there are two values, the top and bottom margins
are set to the first value and the right and left
margins are set to the second.
 If there are three values, the top is set to
the first value, the left and right are set to
the second, and the bottom is set to the
third.
68 Web Programming
 If there are four values, they apply to the top,
right, bottom, and left, respectively.
Eg:
1)body { margin: 2em }
/* all margins set to 2em */
2) body { margin: 1em 2em }
/* top & bottom = 1em, right & left =
2em */
3) body { margin: 1em 2em 3em }
/* top=1em, right=2em, bottom=3em,
left=2em */
69 Web Programming
 The last rule of the example above is
equivalent to the example below:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side
(right) */
}

70 Web Programming
 Border properties
 border-top-width
={thin,thick,medium,length}
 border-right-width
 border-bottom-width
 border-left-width
 border-width
 These properties set the width of the top,
right, bottom, and left border of a box

71 Web Programming
The border's thickness has an explicit value. Explicit
border widths cannot be negative
Eg:
H1 { border-width: thin } /* thin thin
thin thin */
H1 { border-width: thin thick } /* thin
thick thin thick */
H1 { border-width: thin thick medium }

72 Web Programming
 border-top-color
 border-right-color
 border-bottom-color
 border-left-color
 border-color

73 Web Programming
 border-style
 The border-style property specifies what kind of
border to display
 None of the border properties will have ANY effect
unless the border-style property is set!
 border-style values:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border
 solid: Defines a solid border
 double: Defines two borders. The width of the two
borders are the same as the border-width value
74 Web Programming
 groove: Defines a 3D grooved border. The
effect depends on the border-color value
 ridge: Defines a 3D ridged border. The effect
depends on the border-color value
 inset: Defines a 3D inset border. The effect
depends on the border-color value
 outset: Defines a 3D outset border. The effect
depends on the border-color value

75 Web Programming
76 Web Programming
Border - Individual sides
 In CSS it is possible to specify different
borders for different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

77
The example above can also be set with a
single property:
Example
border-style:dotted solid;

78
 The border-style property can have from
one to four values.
 border-style:dotted solid double
dashed;
 top border is dotted
 right border is solid
 bottom border is double
 left border is dashed
 border-style:dotted solid double;
 top border is dotted
 right and left borders are solid
 bottom border is double

79
 border-style:dotted solid;
 top and bottom borders are dotted
 right and left borders are solid
 border-style:dotted;
 all four borders are dotted
 The border-style property is used in the example
above. However, it also works with border-width
and border-color.

80
Border - Shorthand property
 To shorten the code, it is also possible to
specify all the individual border properties in
one property. This is called a shorthand
property.
 The border property is a shorthand for the
following individual border properties:
border:<border-width>|<border-style>|<color>
The 'border' property is a shorthand property for
setting the same width, color, and style for all
four borders of a box.
border-width
border-style (required)
border-color
Example
border:5px solid red;
81 Web Programming
 Unlike the shorthand 'margin' and 'padding'
properties, the 'border' property cannot set
different values on the four borders. To do so, one
or more of the other border properties must be
used.
 For example, the first rule below is equivalent to
the set of four rules shown after it:
P { border: solid red }
P{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

82 Web Programming
 border-bottom Property
The border-bottom property is a shorthand
property for (in the following order):

border-bottom-width
border-bottom-style
h1 {border-bottom-color
border-bottom: 5px solid red;
}

h2 {
border-bottom: 4px dotted blue;
}

div {
border-bottom: double;
}

83 Web Programming
border-bottom-color Property

div {border-bottom-color: coral;}


div {border-bottom-color: rgb(201, 76, 76);}

84 Web Programming
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

p{
border: 2px solid red;
border-radius: 5px;
}
An outline is a line drawn outside the
element's border.

85 Web Programming
CSS Outline

An outline is a line drawn outside the element's border.

p{
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}

86 Web Programming
CSS has the following outline properties:

outline-style
outline-color
outline-width
outline-offset
outline

CSS Outline Width


The outline-width property specifies the
width of the outline, and can have one of
the following values:

thin (typically 1px)


medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

87 Web Programming
CSS Outline Offset
The outline-offset property adds space
between an outline and the edge/border of
an element. The space between an
element and its outline is transparent.

p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

88 Web Programming
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following
individual outline properties:

outline-width
outline-style (required)
outline-color
The outline property is specified as one, two, or three values from the
list above. The order of the values does not matter.

p.ex1 {outline: dashed;}


p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

89 Web Programming
Other Selectors
Descendant 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>
<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>

90
 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> element:
div > p {
background-color: yellow;
}
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
<p>Paragraph 4 in the div.</p>
</div>

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


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

91
Pseudo-class Selector
What are Pseudo-classes?
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
Pseudo-classes are keywords that start with a colon:

Syntax
The syntax of pseudo-classes:
:pseudo-class-name
selector:pseudo-class {
property: value;
}

92
Anchor Pseudo-classes
Links can be displayed in different ways:
 /* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

93 Web Programming
 Pseudo-classes and CSS Classes
 Pseudo-classes can be combined with CSS classes:
 When you hover over the link in the example, it
will change color:
a.highlight:hover {
color: #ff0000;
}

Hover on <div>
An example of using the :hover pseudo-class on a <div> element:

div:hover {
background-color: blue;
}

94 Web Programming
:focus
The :focus CSS pseudo-class represents an element (such as a form input) that
has received focus. It is generally triggered when the user clicks or taps on an
element or selects it with the keyboard's Tab key.

/* Selects any <input> when focused */


input:focus {
color: red;
}
<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

.red-input:focus {
background: yellow;
color: red;
}

.blue-input:focus {
background: yellow;
95
color: blue;
 The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child
of another element.

Match the first <p> element


In the following example, the selector matches any <p> element that is the first child
of any element:

p:first-child {
color: blue;
}

<p>This is some text.</p>


<p>This is some text.</p>

96 Web Programming
:last-child
p:last-child Selects every <p> elements that is the last child of its
parent

p:last-child {
background: #ff0000;
}

<p>The first paragraph.</p>


<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

97 Web Programming
Pseudo-elements
What are Pseudo-Elements?
 A CSS pseudo-element is used to style specified
parts of an element.
 For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an
element
Syntax

The syntax of pseudo-elements:


selector::pseudo-element {
property: value;
}

98 Web Programming
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of
a text.

The following example formats the first line of the text in all <p> elements:

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

99 Web Programming
Note: The ::first-line pseudo-element can only be applied to block-level
elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

100 Web Programming


The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.

The following example formats the first letter of the text in all <p> elements:

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

101 Web Programming


Note: The ::first-letter pseudo-element can only be applied to block-level
elements.

The following properties apply to the ::first-letter pseudo- element:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

102 Web Programming


The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before
the content of an element.

The following example inserts an image before the content of each <h1>
element:

h1::before {
content: url(smiley.gif);
}

Insert some text before the content of each <p> element:

p::before {
content: "Read this: ";
}

The ::after Pseudo-element


The ::after pseudo-element can be used to insert some content after the content
of an element.
103 Web Programming
CSS - The ::marker Pseudo-element
The ::marker pseudo-element selects the markers of list items.

The following example styles the markers of list items:

::marker {
color: red;
font-size: 23px;
}
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
104
</ol> Web Programming
The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is
selected by a user.

The following example makes the selected text red on a yellow background:

Example
::selection {
color: red;
background: yellow;
}

105 Web Programming


[attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

a[target] {
background-color: yellow;
}

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

106 Web Programming


a[target=_blank] {
background-color: yellow;
}

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com"
target="_blank">disney.com</a>
<a href="http://www.wikipedia.org"
target="_top">wikipedia.org</a>

107 Web Programming


Styling Forms <form name="input"
The attribute selectors can be useful for action="" method="get">
styling forms without class or ID: Firstname:<input
type="text" name="Name"
value="Peter" size="20">
input[type="text"] {
Lastname:<input
width: 150px;
type="text" name="Name"
display: block;
value="Griffin" size="20">
margin-bottom: 10px;
<input type="button"
background-color: yellow;
value="Example Button">
}
</form>
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
108 Web Programming
All CSS Attribute Selectors
Selector Example Example description
[attribute] [target] Selects all elements with a
target attribute
[attribute= [target=_blank] Selects all elements with
value] target="_blank"
[attribute~= [title~=flower] Selects all elements with a
value] title attribute containing the
word "flower"
[attribute|= [lang|=en] Selects all elements with a
value] lang attribute value starting
with "en"
[attribute^= a[href^="https"] Selects every <a> element
value] whose href attribute value
begins with "https"
[attribute$= a[href$=".pdf"] Selects every <a> element
value] whose href attribute value
109 Webends with ".pdf"
Programming
CSS Layout - The display Property

display property
 The display property defines how a certain
HTML element should be displayed.
 Every HTML element has a default display
value depending on what type of element it is.
The default display value for most elements
is block or inline.

110 Web Programming


Block-level Elements

 A block-level element always starts on a new


line and takes up the full width available
(stretches out to the left and right as far as it
can)
 Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
111 Web Programming
Inline Elements

 An inline element does not start on a new line


and only takes up as much width as
necessary.
 This is an inline <span> element inside a
paragraph.
 Examples of inline elements:
 <span>
 <a>
 <img>

112 Web Programming


Override The Default Display
Value

 Changing an inline element to a block


element, or vice versa, can be useful for
making the page look a specific way, and still
follow the web standards.
 A common example is making
inline <li> elements for horizontal menus:

li {
display: inline;
}

113 Web Programming


 The following example displays <span>
elements as block elements:
span {
display: block;
}

114 Web Programming


Hiding an element
 Hiding an element can be done by setting
the display property to none. The element will
be hidden, and the page will be displayed as if
the element is not there:

h1.hidden {
display: none;
}

115 Web Programming


Values of the display property

None The element will not be displayed at all

block The element is displayed as a block-level element


(like paragraphs and headers)
inline This is default. The element is displayed as an
inline-level element (like span)

Inline-block allows to set a width and height on the element.

list-item The element is displayed as a list-item, which


means that it has a bullet in front of it
table The element is displayed as a table
116 Web Programming
The display: inline-block Value
•Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the
element.

•Also, with display: inline-block, the top and bottom


margins/paddings are respected, but with display: inline they
are not.

•Compared to display: block, the major difference is that


display: inline-block does not add a line-break after the
element, so the element can sit next to other elements.

117 Web Programming


span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block;
width: 100px;
height: 100px;
118 Web Programming
padding: 5px;
Using inline-block to Create Navigation Links
•One common use for display: inline-block is to display list items
horizontally instead of vertically. The following example creates
horizontal navigation links:

.nav {
background-color: yellow; <ul class="nav">
list-style-type: none; <li><a href="#home">Home</a></li>
text-align: center; <li><a href="#about">About
padding: 0; Us</a></li>
margin: 0; <li><a href="#clients">Our
} Clients</a></li>
<li><a href="#contact">Contact
.nav li { Us</a></li>
display: inline-block; </ul>
font-size: 20px;
padding: 20px;
}

119 Web Programming


<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>
<p>These two paragraphs generates inline
boxes, and it results in</p>
<p>no distance between the two elements.</p>
</body>
</html>

120 Web Programming


Positioning

 The CSS positioning properties allow you to


position an element
 There are four different positioning methods.
 position:static
 Postion:relative
 Postion:absolut
 Postion:fixed
 Position:sticky

121 Web Programming


position:static
 HTML elements are positioned static by default.
 which means the element is not positioned and
occurs where it normally would in the document.
 Static positioned elements are not affected by
the top, bottom, left, and right properties.

• An element with position: static; is not positioned in any


special way; it is always positioned according to the
normal flow of the page:
 Normally you wouldn't specify this unless you
needed to override a positioning that had been
previously set.
Eg:
122 Web Programming
.static { position: static; }
<div class="static">static is the default value. An element with position:
static; is not positioned in any special way. A static element is said to
be not positioned and an element with its position set to anything else is
said to be positioned.
</div>

123 Web Programming


position:relative
• An element with position: relative; is positioned relative to its normal
position.
 If you specify position:relative, then you can use
top or bottom, and left or right to move the
element relative to where it would normally occur
in the document.
 Let's move div down 20 pixels, and to the left 40
pixels:
#div { position:relative; top:20px; left:-40px; }

Eg:
.relative1 {
position: relative;
}
.relative2 { position: relative; top: -20px; left: 20px;
background-color: white; width: 500px;
124 Web Programming
}
<div class="relative1">relative behaves the same as static unless you
add some extra properties.
</div>
<div class="relative2">Setting the top, right, bottom, and left properties
of a relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into any gap
left by the element.
</div>

125 Web Programming


position:absolute

•An element with position: absolute; is positioned relative


to the nearest positioned ancestor

 However; if an absolute positioned element


has no positioned ancestors, it uses the
document body, and moves along with page
scrolling.
 When you specify position:absolute, the
element is removed from the document and
placed exactly where you tell it to go.
Eg: Let's move div a to the top right of the
#div { position:absolute; top:0; right:0;
page: }
width:200px;

126 Web Programming


. d1{
position: relative;
width: 600px;
height:
400px;
}
.d2 {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
127 Web Programming
<div class=“d1">
This element is relatively-positioned. If this element
was position: static; its absolutely-positioned child
would escape and would be positioned relative to the
document body.
<div class=“d2">
This element is absolutely-positioned. It's positioned
relative to its parent.
</div>
</div>

128 Web Programming


Fixed Positioning

 An element with fixed position is positioned


relative to the browser window.
 A fixed element does not leave a gap in the
page where it would normally have been
located.
p.pos_fixed
 It will not move even if the window is scrolled:
{
Example
position:fixed;
top:30px;
right:5px;
}

129 Web Programming


Positioning Text In an Image
How to position text over an image:
.container {
position: relative;
}

.center {
position: absolute;
top: 50%; <div class="container">
width: 100%; <img src="img_5terre_wide.jpg"
text-align: center; alt="Cinque Terre" width="1000"
font-size: 18px; height="300">
} <div class="center">Centered</div>
</div>
img {
width: 100%;
height: auto;
opacity: 0.3;
}

130 Web Programming


Overlapping Elements

 When elements are positioned outside the normal flow, they


can overlap with other elements.
 The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the
others)
 An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

131 Web Programming


<!DOCTYPE html>
<html>
<head>
<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be
placed behind the text.</p>
</body>
</html>
132 Web Programming
CSS Overflow
The overflow property specifies whether to clip the content or to
add scrollbars when the content of an element is too big to fit in the
specified area.
The overflow property has the following values:
•visible - Default. The overflow is not clipped. The content renders
outside the element's box
•hidden - The overflow is clipped, and the rest of the content will be
invisible
•scroll - The overflow is clipped, and a scrollbar is added to see the
rest of the content
•auto - Similar to scroll, but it adds scrollbars only when necessary

Note: The overflow property only works for block elements with a specified height.

133 Web Programming


overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to
change the overflow of content just horizontally or vertically (or
both):
overflow-x specifies what to do with the left/right edges of the
content.
overflow-y specifies what to do with the top/bottom edges of the
content.

div {
overflow-x: hidden; /* Hide horizontal
scrollbar */
overflow-y: scroll; /* Add vertical
scrollbar */
}

134 Web Programming


The float Property
The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.

The float property can have one of the following values:

left - The element floats to the left of its container


right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the
text). This is default
inherit - The element inherits the float value of its parent

135 Web Programming


CSS Box Sizing
The CSS box-sizing property allows us to include the padding and
border in an element's total width and height.

box-sizing: border-box;

136 Web Programming


CSS Lists

 The CSS list properties allow you to:


 Set different list item markers for ordered lists
 Set different list item markers for unordered
lists
 Set an image as the list item marker
List
 In HTML, there are two types of lists:
 unordered lists - the list items are marked
with bullets
 ordered lists - the list items are marked with
numbers or letters
 With CSS, lists can be styled further, and
images can be used as the list item marker.
137 Web Programming
 Different List Item Markers
 The type of list item marker is specified
with the list-style-type property:
Example

ul.a {list-style-type: circle;}


ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

138 Web Programming


An Image as The List Item Marker
To specify an image as the list item marker,
use the list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}

139 Web Programming


CSS list-style-position Property

 The list-style-position property specifies if the


list-item markers should appear inside or
outside the content flow.
 The list-style-position property specifies if the
list-item markers should appear inside or
ul1{
outside the content flow.
list-style-type:circle;
list-style-position:inside;

}
Ul2{

list-style-type:circle;
list-style-position:outside;
}140 Web Programming
Indents the marker
and the text. The
side
bullets appear inside
the content flow

Keeps the marker to


the left of the text.
outside The bullets appears
outside the content
flow. This is default

141 Web Programming


 Example:

142 Web Programming


 CSS Navigation Bar
 CSS Vertical Navigation Bar
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
} 143 Web Programming
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
144 Web Programming
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}

145 Web Programming


<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

146 Web Programming


 Full-height Fixed Vertical Navbar
 Create a full-height, "sticky" side navigation:

147 Web Programming


body {
margin: 0;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
148 Web Programming
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
li a:hover:not(.active) {
background-color: #555;
color: white;
}
149 Web Programming
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

150 Web Programming


 <div style="margin-left:25%;padding:1px
16px;height:1000px;">
 <h2>Fixed Full-height Side Nav</h2>
 <h3>Try to scroll this area, and see how the
sidenav sticks to the page</h3>
 <p>Notice that this div element has a left margin
of 25%. This is because the side navigation is set to
25% width. If you remove the margin, the sidenav
will overlay/sit on top of this div.</p>
 <p>Also notice that we have set overflow:auto to
sidenav. This will add a scrollbar when the sidenav
is too long (for example if it has over 50 links inside
of it).</p>
151 Web Programming
 CSS Horizontal Navigation Ba
 There are two ways to create a horizontal navigation
bar. Using inline or floating list items.
li {
display: inline;
}
Or
li {
float: left;
}

a{
display: block;
padding: 8px;
background-color: #dddddd;
}
152 Web Programming
Example explained:

float: left; - use float to get block elements to slide next to each other
display: block; - Allows us to specify padding (and height, width, margins,
etc. if you want)
padding: 8px; - Since block elements take up the full width available, they
cannot float next to each other. Therefore, specify some padding to make
them look good
background-color: #dddddd; - Add a gray background-color to each a
element

153 Web Programming


ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}
154 Web Programming
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
155 Web Programming
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

156 Web Programming


 CSS Website Layout
 A website is often divided into headers,
menus, content and a footer:

157 Web Programming


 Header
 A header is usually located at the top of the website
(or right below a top navigation menu). It often
contains a logo or the website name:
<style>
body {
margin: 0;
}

/* Style the header */


.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}

158 Web Programming


<body>

<div class="header">
<h1>Header</h1>
</div>

</body>

159 Web Programming


 Navigation Bar
 A navigation bar contains a list of links to help
visitors navigating through your website:
<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
}

160 Web Programming


/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */


.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

161 Web Programming


/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>

162 Web Programming


 Content
 The layout in this section, often depends on
the target users. The most common layout is
one (or combining them) of the following:
 1-column (often used for mobile browsers)
 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)

163 Web Programming


 3-column layout (only used for desktops)
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}

/* Clear floats after the columns */


.row:after {
content: "";
display: table;
clear: both;
}

164 Web Programming


/* Responsive layout - makes the three columns
stack on top of each other instead of next to
each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}

165 Web Programming


<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget
elementum magna tristique. Quisque vehicula,
risus eget aliquam placerat, purus leo tincidunt
eros, eget luctus quam orci in velit. Praesent
scelerisque tortor sed accumsan convallis.</p>
</div>

166 Web Programming


<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies,
eget elementum magna tristique. Quisque
vehicula, risus eget aliquam placerat, purus leo
tincidunt eros, eget luctus quam orci in velit.
Praesent scelerisque tortor sed accumsan
convallis.</p>
</div>

167 Web Programming


<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget
elementum magna tristique. Quisque vehicula,
risus eget aliquam placerat, purus leo tincidunt
eros, eget luctus quam orci in velit. Praesent
scelerisque tortor sed accumsan convallis.</p>
</div>
</div>

168 Web Programming

You might also like