MIS-6112 / Introduction to the World Wide Web
1
[Week 13: Introduction to Basic Web Designing]
Module 013: Introduction to Basic Web
Designing
In this module, we are going to discuss the fundamentals and concept CSS
After completing this chapter you will be able to:
1. To define CSS
2. To outline the different types of CSS Attributes and Tags
3. To create a simple CSS Document
4. To describe the different usage CSS Selectors
5. To construct an HTML with CSS designing
What is CSS?
“It is a simple design language intended to simplify the process of making web
pages presentable.”
Cascading Style Sheets, fondly referred to as CSS, works with HTML and other Markup
Languages (such as XHTML and XML) to control the way the content is presented.
CSS is a language that describes the style of an HTML document. CSS handles the
look and feel part of a web page.
Figure 1. CSS Logo
Course Module
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
• CSS allows you to apply styles to web pages. More importantly, CSS enables
you to do this independent of the HTML that makes up each web page.
• Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background
images or colors are used, as well as a variety of other effects.
Figure 3. HTML + CSS = Beautiful Website
Image grab from: https://animebeast127.neocities.org/animebeast127htmltutorial.html
Image grab from: https://itnext.io/css-architecture-with-sass-smacss-and-bem-
cc618392c148?gi=a236f511a6a5
Image grab from: https://colorlib.com/wp/best-wordpress-business-themes/
MIS-6112 / Introduction to the World Wide Web
3
[Week 13: Introduction to Basic Web Designing]
Advantage of CSS
• CSS saves time - You can write CSS once and then reuse the same sheet in
multiple HTML pages. You can define a style for each HTML element and apply
it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
• Easy maintenance - To make a global change, simply change the style, and all
the elements in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cellphones or for printing.
• Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all the
HTML pages to make them compatible with future browsers.
What's the "Cascade" part of CSS?
The cascade part of CSS means that more than one stylesheet can be
attached to a document, and all of them can influence the presentation.
Example:
A web designer can have a global stylesheet for the whole site, but a local one
for say, controlling the link color and background of a specific page. Or, a user
can use her own stylesheet if she has problems seeing the page, or if she just
prefers a certain look. We'll talk about cascading and hierarchy of styles in a
later lesson in this module.
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>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development
of large websites, where fonts and color information were added to
every single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS. CSS removed the style formatting from the HTML page!
Course Module
To view the capabilities of the CSS, please visit the link below
(CSS Demo - One HTML Page - Multiple Styles) :
https://www.w3schools.com/css/css_intro.asp
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated by a
colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
The table is a selector and border is a property and the given value 1px solid
#C00 is the value of that property. You can define selectors in various simple
ways based on your comfort.
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made of
three parts:
MIS-6112 / Introduction to the World Wide Web
5
[Week 13: Introduction to Basic Web Designing]
• Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could be
color, border, etc.
• Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.
Example:
In this example all <p> elements will be center-aligned, with a red text
color:
p {
color: red;
text-align: center;
}
HTML Body
Output(Browser)
Course Module
CSS Inclusion
When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet.
Three Ways to Insert CSS
• Inline CSS – The style attribute
You can use style attribute of any HTML element to define style
rules. These rules will be applied to that element only. Here is
the generic syntax:
Example: Following is the example of inline CSS based on the
above syntax:
It will produce the following result: (Browser Output)
HTML Document
Output(Browser)
• Internal CSS - Embedding Style Sheet Example
An internal style sheet may be used if one single HTML page has
a unique style. Style sheets can be embedded into the <head>
element of HTML documents. Quite simply, the stylesheet itself
is placed inside a <style> tag like this:
MIS-6112 / Introduction to the World Wide Web
7
[Week 13: Introduction to Basic Web Designing]
The head of the HTML document would look something like
this:
It's easiest for CSS beginners to start by putting CSS rules in the
<head> section of the web page.
This way, you can make changes, preview the page in the
browser, and see immediate results.
Within the <head> </head> section of your HTML page, put
these tags:
HTML Document
Course Module
Output(Browser)
• External CSS – The <link> Element
The <link> element can be used to include an external stylesheet
file in your HTML document.
An external style sheet is a separate text file with .css extension.
You define all the Style rules within this text file and then you
can include this file in any HTML document using <link>
element.
With an external style sheet, you can change the look of an entire
website by changing just one file. Each HTML page must include
a reference to the external style sheet file inside the <link>
element, inside the head section.
MIS-6112 / Introduction to the World Wide Web
9
[Week 13: Introduction to Basic Web Designing]
External CSS Example
HTML Document
CSS File
Output(Browser)
Course Module
CSS Selectors
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)
1. CSS Element selector
The element selector selects HTML elements based on the element name.
HTML Document
p{
text-align: center;
color: red;
}
Output(Browser)
2. CSS ID selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• 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.
• Note: An id name cannot start with a number.
MIS-6112 / Introduction to the World Wide Web
11
[Week 13: Introduction to Basic Web Designing]
HTML Document
Output(Browser)
3. CSS Class selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
• Note: An id name cannot start with a number.
4. CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• The CSS rule below will affect every HTML element on the page:
HTML Document
Course Module
Output(Browser)
CSS Measurement Units
CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages and
em units. You need these values while specifying various measurements in your Style
rules e.g. border = "1px solid red".
CSS Colors
CSS uses color values to specify a color. Typically, these are used to set a color either
for the foreground of an element (i.e., its text) or else for the background of the
element. They can also be used to affect the color of borders and other decorative
effects.
MIS-6112 / Introduction to the World Wide Web
13
[Week 13: Introduction to Basic Web Designing]
You can specify your color values in various formats. Following table lists all the
possible formats −
CSS Backgrounds
You can set the following background properties of an element −
• The background-color property is used to set the background color of an
element.
• The background-image property is used to set the background image of an
element.
• The background-repeat property is used to control the repetition of an
image in the background.
• The background-position property is used to control the position of an
image in the background.
• The background-attachment property is used to control the scrolling of an
image in the background.
• The background property is used as a shorthand to specify a number of
other background properties.
To learn the detailed and advanced functionality of the CSS Background
property please refer to this link:
https://www.w3schools.com/css/css_background.asp
Course Module
CSS Margins
• The CSS margin properties are used to create space around elements, outside of
any defined borders.
• With CSS, you have full control over the margins. There are properties for setting
the margin for each side of an element (top, right, bottom, and left).
Margin Individual styles
CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
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
Example:
Set different margins for all four sides of a <p> element:
MIS-6112 / Introduction to the World Wide Web
15
[Week 13: Introduction to Basic Web Designing]
HTML Document
Output(Browser)
To shorten the code, it is possible to specify all the margin properties in
one property.
If the margin property has four values:
• margin: 25px 50px 75px 100px;
▪ top margin is 25px
▪ right margin is 50px
▪ bottom margin is 75px
▪ left margin is 100px
If the margin property has three values:
• margin: 25px 50px 75px 100px;
▪ top margin is 25px
▪ right and left margins are 50px
▪ bottom margin is 75px
Course Module
If the margin property has two values:
• margin: 25px 50px;
▪ top and bottom margins are 25px
▪ right and left margins are 50px
If the margin property has one value:
• margin: 25px;
▪ all four margins are 25px
To learn the detailed and advanced functionality of the CSS Margin please refer
to this link: https://www.w3schools.com/css/css_margin.asp
CSS Padding
• The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
• With CSS, you have full control over the padding. There are properties for setting
the padding for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
All the margin 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
MIS-6112 / Introduction to the World Wide Web
17
[Week 13: Introduction to Basic Web Designing]
• inherit - specifies that the padding should be inherited from the parent
element
HTML Document
Set different margins for all four sides of a <p> element:
Output(Browser)
CSS Padding syntax and usage are similar to the CSS Margin, it can be used in
individual sides or shorthand property.
To learn the detailed and advanced functionality of the CSS Padding please refer to
this link: https://www.w3schools.com/css/css_padding.asp
CSS Text
The following are the properties to manipulate the text using CSS.
• The color property is used to set the color of a text.
• The direction property is used to set the text direction.
Course Module
• The letter-spacing property is used to add or subtract space between the letters
that make up a word.
• The word-spacing property is used to add or subtract space between the words
of a sentence.
• The text-indent property is used to indent the text of a paragraph.
• The text-align property is used to align the text of a document.
• The text-decoration property is used to underline, overline, and strikethrough
text.
• The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
• The white-space property is used to control the flow and formatting of text.
• The text-shadow property is used to set the text shadow around a text.
To learn the detailed and advanced functionality of the CSS Text please refer to
this link: https://www.tutorialspoint.com/css/css_text.htm
To learn the whole functions of CSS, visit the link below:
hhttps://www.w3schools.com/css/default.asp
References and Supplementary Materials
Online Supplementary Reading Materials
1. CSS Tutorial
https://www.tutorialspoint.com/css/index.htm
Date accessed: December 2019
2. CSS Tutorial
https://www.w3schools.com/css/default.asp
Date accessed: December 2019
Online Instructional Videos
1. What is CSS?
https://www.youtube.com/watch?v=R95j4RwIrZs
2. CSS Crash Course for Absolute Beginners
https://www.youtube.com/watch?v=yfoY53QXEnI
