1
CHAPTER THREE
Basics of client side script
CSS
Mulugeta G..
2
Contents
Cascading Style Sheet (CSS)
CSS Syntax
CSS Insertion
CSS Comments
CSS Properties
3
Cascading Style Sheets (CSS)
• CSS stands for Cascading Style Sheets
• Allows us to style our web pages
• CSS describes how HTML elements are to be displayed on
screen, or in other media
• It can control the layout of multiple web pages all at once
• supported by all browsers today.
• External stylesheets are stored in CSS files
4
Cascading Style Sheets (CSS)
• Provides more detailed attributes to elements than the ones
defined in standard HTML
• Styles are defined once and used any number of times and
in several contexts
• Clearly separates content from its presentation
• Saves a lot of work - especially in website maintenance
and upgrading
5
Cascading Style Sheets (CSS)
• Difference between CSS and HTML
HTML
• designed to specify the content and structure of web
pages
CSS
• CSS defines how HTML elements are to be displayed
• used to specify the presentation or styling of elements
on a web page (e.g., fonts, spacing, sizes, colors,
positioning).
6
Cascading Style Sheets (CSS)
• Benefits
• Web sites designed in CSS are faster to change and
update.
• speeds the time it takes to develop and update site
layouts.
• Typography and page layout can be better controlled
• Style is separable & stored from structure
• document are potentially smaller
• this makes site maintenance easier.
7
Cascading Style Sheets Syntax
• CSS Syntax
• Consists of :
• Selector
• Property
• Value
• Format: selector { property : value }
8
Cascading Style Sheets Syntax
• CSS Syntax
• Format: selector { property : value }
• selector – tells the browser which part of the document is
affected (HTML element)
• property – specifies what aspect of layout is being set
• value – which gives the value for the style property
• Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
• CSS declaration always ends with a semicolon
9
Cascading Style Sheets Selectors
• The selector is used to target elements and apply CSS
• Three types of selectors
• HTML tag names or Element name selectors
• Class selectors
• Id selectors
10
Cascading Style Sheets Selectors
• HTML tag names or Element name as selectors
• selects elements based on the element name.
• used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline;
}
11
• The class selector(.)
• define generic styles that can be applied to different HTML
elements
• applied to the class attribute of HTML elements
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>
12
• The Id selector (#)
• unlike the class selector, the Id selector always applies to only one
element and defined with “#”
• uses the id attribute of an HTML element to select a specific
element.
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 ???
13
Cascading Style Sheets
Grouping Selectors
• If you have elements with the same style definitions, like this:
h1 {
text-align: center; • It will be better to group the selectors, to
color: red;
} minimize the code.
h2 { • To group selectors, separate each
text-align: center;
color: red; selector with a comma.
}
p{ h1, h2, p {
text-align: center; text-align: center;
color: red;
} color: red;
}
14
Inserting CSS into HTML
• There are 3 ways to write CSS in our HTML file
• Inside a single HTML element (inline CSS)
• Inside the <head> element of an HTML (internal CSS)
• In an external CSS file (external CSS)
• Priority order
• Inline > Internal > External
15
Inserting CSS into HTML
• Inserting CSS:
Can be done in three ways:
1. Inline
• used to apply a unique style for a single element.
• using a style attribute in HTML element
• Format:
<tag_name style=“property:value; property: value;”> …
</tag_name>
• Example:
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<table style=“background-color: yellow”>… </table>
16
Inserting CSS into HTML
2. Internal
• using <style> element defined in the <head> element
• Format: Example:
<head>
<style type=“text/css”>
property:value; ...
</style>
</head>
17
Inserting CSS into HTML
3. External
• defined in a separate CSS file
• linked to an HTML document using the <link> tag :
<head>
<link rel=“stylesheet” type=“text/css” href=“url”>
</head>
• changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which
the style is attached
18
Cascading Style Sheets Comments
CSS comments
• are used to explain the code, and may help when you edit the
source code at a later date.
• Comments are ignored by browsers.
• Format:
/* comment text */
• Example:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
19
Example 1:
20
Cascading Style Sheets Properties
• CSS Colors : are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
• background-color: color
• You can set the background color for HTML elements
• Example: <h1 style="background-color:DodgerBlue;">Hello
World</h1>
• color: color
• You can set the color of text
• Example: <h1 style="color:Tomato;">Hello World</h1>
21
Cascading Style Sheets Properties
• CSS Backgrounds: are used to add background effects for elements.
• background-color: color
• background-image: url(url)
• specifies an image to use as the background of an element.
• Example: body {
background-image: url("bgdesert.jpg");
}
• background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-repeat}
• Sets how a background image will be repeated vertically or horizontally
• background-position: right, top, left, bottom
• used to specify the position of the background image.
• background-attachment: attachment_type {scroll, fixed}
• Specify that the background image is fixed or scroll with the rest of the page
22
Cascading Style Sheets Properties
• CSS Borders: allow you to specify the style, width, and color of an element's
border.
• border-style: dotted, dashed, solid, double, grove
• specifies what kind of border to display
• Example: p.dotted {border-style: dotted;}
• border-width: width {thin, medium, thick or in px, pt, cm, em}
• Border-color: color
• used to set the color of the four borders
• border-radius: pixels : used to add rounded borders to an element
• border: is a shorthand property for the following individual border properties:
• border-width border-style (required) border-color
p {
border: 5px solid red;
}
23
Cascading Style Sheets Properties
• CSS Text
• color: color
• text-align: {left, right, center, justify}
• text-decoration:{none, underline, overline, line-through,
blink}
• text-transform: {uppercase, lowercase, none, capitalize}
• letter-spacing: {value in px, cm} space between letters
• direction: direction {ltr, rtl} borwser issue??
• text-indent: value
• text-shadow: property adds shadow to text.
24
Cascading Style Sheets Properties
• CSS Fonts: adds value to your text
• font-family: font_list (in order of precedence, separated by
comma) {serif, sans-serif, monospace, cursive, arial,
times}
• font-style: style {normal, italic, oblique}
• font-weight: weight {normal, bold, bolder, lighter, 100, 200,
…}
• font-size: { size in px, %}
25
Cascading Style Sheets Properties
• CSS Margins: used to create space around elements, outside of any
defined borders.
• margin-top: { size in px, %}
• margin-right: { size in px, %}
• margin-bottom: { size in px, %}
• margin-left: { size in px, %}
• All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent
element
• Tip: Negative values are allowed.
26
Cascading Style Sheets Properties
• CSS Padding: used to generate space around an element's content,
inside of any defined borders.
• padding-top: { size in px, %}
• padding-right: { size in px, %}
• padding-bottom: { size in px, %}
• padding-left: { size in px, %}
• All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent
element
• Note: Negative values are not allowed.
27
Cascading Style Sheets Properties
• CSS Icons: Icons can easily be added to your HTML page, by using
an icon library.
• To use the Font Awesome icons, go to fontawesome.com, sign
in, and get a code to add in the <head> section of your HTML
page:
• Example: <script
src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
28
Cascading Style Sheets Properties
• CSS Links: With CSS, links can be styled in many different ways.
• Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
• In addition, links can be styled differently depending on what state they
are in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
29
Cascading Style Sheets Properties
• Read About CSS Property from:
https://www.w3schools.com/css/default.asp
• CSS Pseudo-class:
• CSS Website Layout
• CSS Units
• Z-index property and others.
30
Examples:
Inline Example
• Add <h1> and <p> with some text to demonstrate the style attribute
Internal Example
• Add <h1>,<h1> and <p>,<p> with some text to demonstrate the
<style> element in side the <head> element using the 3 types of
selectors
• Tag-name/element name
• Class selector(.)
• Id selector(#)
External Example
• Add <h1> and <p> with some text to demonstrate with <link>
element
<link rel="stylesheet" type="text/css" href=“filename.css">
31
Example 1:
32
?
END OF CHAPTER THREE
Next: Chapter Four: Basics of JavaScript
