Scribd
Upload
6 views

FEWD Topic 3 - Introduction to CSS

This document provides an introduction to CSS, covering its definition, syntax, classes, stylesheets, background properties, and the box model. It outlines learning outcomes for students, including the ability to describe CSS's role in web development and differentiate between stylesheets. Additionally, it details methods for inserting CSS into HTML documents and includes quizzes to assess understanding.

Uploaded by

xebulem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

FEWD Topic 3 - Introduction to CSS

This document provides an introduction to CSS, covering its definition, syntax, classes, stylesheets, background properties, and the box model. It outlines learning outcomes for students, including the ability to describe CSS's role in web development and differentiate between stylesheets. Additionally, it details methods for inserting CSS into HTML documents and includes quizzes to assess understanding.

Uploaded by

xebulem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

Front End Web Development

Topic 3:
Introduction to CSS

© NCC Education Limited


Introduction to CSS Topic 3 - 3.2

Scope and Coverage


This topic will cover:
• CSS Definition
• CSS Syntax
• CSS Class
• CSS Style Sheets
• CSS Background
• CSS Box model
Introduction to CSS Topic 3 - 3.3

Learning Outcomes

By the end of this topic students will be able to:


• Describe the role of CSS in front end web development
• Understand the syntax used in CSS coding
• Explain concepts of CSS Class
• Differentiate between CSS stylesheets
• Identify the box structure of CSS
Introduction to CSS Topic 3 - 3.4

Unit Roadmap
Week Topic Week Topic
Overview of Web JavaScript - II
1 Application Architecture 7

2 Introduction to HTML5 8 jQuery

Introduction to CSS Responsive CSS Framework:


3 9
Bootstrap I
HTML and CSS Responsive CSS Framework:
4 10
Bootstrap II
CSS Flexbox and Grid Code Review and Testing. and
5 11
Layout Collaboration
6 JavaScript - I 12 Unit Summary
Introduction to CSS Topic 3 - 3.5

CSS BASICS
Introduction to CSS Topic 3 - 3.6

Cascading Style Sheets (CSS)

• A key tool in web design.


• CSS is the sister technology to HTML.
• Helps to style web pages.
• Control the style and layout of multiple Web pages simultaneously.
• CSS defines HOW HTML elements are to be displayed.
• Styles are normally saved in external .css files.
Introduction to CSS Topic 3 - 3.7

CSS Syntax

A CSS rule has two main parts:


• a selector
• one or more declarations
Introduction to CSS Topic 3 - 3.8

CSS Syntax

• A CSS declaration always ends with a semicolon.


• Declaration groups are surrounded by curly brackets.

p{
color:red;
text-align:center;
}
Introduction to CSS Topic 3 - 3.9

CSS Comment
• Comments are used to explain the code.
• Comments are ignored by browsers.
• A CSS comment begins with /* and ends with */, for example:
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Introduction to CSS Topic 3 - 3.10

CSS id and class


• 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 "#".
• The style rule below will be applied to the element with id="para1":

#para1
{
text-align:center; color:red;
}
Introduction to CSS Topic 3 - 3.11

Class Selector
• Specifies a style for a group of elements.
• It is used on several elements.
• A particular style can be set for multiple HTML elements with the same
class.
• Class selector uses the HTML class attribute, and is defined with a "."
Example 1: all HTML elements with class="center“ will be center-aligned:
.center {text-align:center;}
• A specific set of HTML elements should be affected by a class.
Example 2: all p elements with class="center" will be center-aligned:
p.center {text-align:center;}
Introduction to CSS Topic 3 - 3.12

Quiz - 1
1. What does CSS stand for?
A) Computer Style Sheets
B) Creative Style System
C) Cascading Style Sheets
D) Coding Style Sheets

2. How is a CSS style defined for an HTML element?


A) By using the style attribute inside the HTML element
B) By specifying the element name, followed by curly brackets {} containing the style properties and values
C) By including the element's ID or class in the HTML content
D) All of the above

3. Which of the following is the correct syntax for setting the background color of an element in CSS?
A) background-color: blue;
B) bgcolor: blue;
C) color-background: blue;
D) set-background: blue;
Introduction to CSS Topic 3 - 3.13

WAYS TO INSERT
STYLE SHEETS
Introduction to CSS Topic 3 - 3.14

How to Insert CSS

Three Ways to Insert CSS style sheet:


• External style sheet
• Internal style sheet
• Inline style
Introduction to CSS Topic 3 - 3.15

External Style Sheet


• An external style sheet is used when the style is to be applied to
multiple pages.
• Changes in one file reflects on multiple sheets.
• <link> tag is used to link webpages to the style sheet.

<head>
<link rel="stylesheet" type="text/css"
href=“samplestyle.css">
</head>
Introduction to CSS Topic 3 - 3.16

External Style Sheet


• Any text editor can be used e.g. Notepad++.
• No html tags allowed.
• File is saved with a .css extension.

Example: hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
Introduction to CSS Topic 3 - 3.17

Internal Style Sheet

• Required for scenarios where a single document has a unique style.


• <style> tag is used to define the styling for the page
Example :
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back.gif");}
</style>
</head>
Introduction to CSS Topic 3 - 3.18

Inline Styles
• Style property is used in-line of the HTML tag.
• Can contain any CSS property.
Example: <p style="color:sienna;margin-left:20px;">
This is a paragraph.
</p>
Introduction to CSS Topic 3 - 3.19

Cascading Order
• When multiple styles are used – HTML uses an order of priority.
• The priority order from low to high is:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
• The inline style (inside an HTML element) has the highest priority and
overrides the styles defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).
Introduction to CSS Topic 3 - 3.20

Quiz - 2
1. What is an external CSS stylesheet?
A) A CSS file embedded within an HTML document
B) A separate CSS file linked from an HTML document
C) A CSS rule defined in the head section of an HTML document
D) Inline styles applied directly to HTML elements

2. How do you link an external CSS stylesheet to an HTML document?


A) <link rel="stylesheet" type="text/css" href="style.css">
B) <css href="style.css">
C) <stylesheet>style.css</stylesheet>
D) <style src="style.css"></style>

3. Which of the following CSS rules has the highest specificity?


A) Element selector (e.g., div)
B) Class selector (e.g., .classname)
C) ID selector (e.g., #idname)
D) Inline style
Introduction to CSS Topic 3 - 3.21

CSS BACKGROUND
Introduction to CSS Topic 3 - 3.22

CSS Background

CSS properties used for background effects:

• background-color
• background-image
• background-repeat
Introduction to CSS Topic 3 - 3.23

Background Color

background-color property

• Specifies the background color of an element.


• The background color of a page is defined in the body selector.

Example:
body {background-color:#b0c4de;}
Introduction to CSS Topic 3 - 3.24

Background Image
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.

Example:
body {background-image:url("paper.gif");}
Introduction to CSS Topic 3 - 3.25

Background Image
• By default, a background image repeats across pages.
• To avoid repetition, use the background-repeat property:

Example:
body
{
background-image:url(“me.png");
background-repeat:no-repeat;
}
Introduction to CSS Topic 3 - 3.26

CSS BOX MODEL


Introduction to CSS Topic 3 - 3.27

CSS Box Model


• Defines the layout and spacing of HTML element on a website.
• 4 key components: margins, borders, padding, and content.

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Introduction to CSS Topic 3 - 3.28

CSS Border Style


• The border-width property specifies the width of
the four borders.
p.one {
• The width can be set as a specific size: border-style: solid;
border-width: 5px;
• px }
• pt p.two {
• cm border-style: solid;
• em border-width: medium;
}
• Three pre-defined values: thin, medium, or thick
Introduction to CSS Topic 3 - 3.29

CSS Border Style


p.one {
border-style: solid;
border-width: 5px 10px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: dotted;
border-width: medium; /* medium border-width*/
}
p.three {
border-style: solid;
border-width: 8px 10px 4px 5px; /* 8px top, 10px right, 4px bottom and 5px left */
}
Introduction to CSS Topic 3 - 3.30

CSS Border Style


• border-style property has various properties of the border display:
• dotted - a dotted border p.dotted {border-style: dotted;}
• dashed - a dashed border p.dashed {border-style: dashed;}
• solid - a solid border p.solid {border-style: solid;}
• double - a double border p.double {border-style: double;}
p.groove {border-style: groove;}
• groove - a 3D grooved border
p.ridge {border-style: ridge;}
• ridge - a 3D ridged border p.inset {border-style: inset;}
• inset - a 3D inset border p.outset {border-style: outset;}
• outset - a 3D outset border p.none {border-style: none;}
• none - no border p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
• hidden - a hidden border
• The border-style property can have from one to four values: for the top
border, right border, bottom border, and the left border.
Introduction to CSS Topic 3 - 3.31

CSS Margins
• Adds space around elements, outside of any defined borders.

• Margins are specified on each side of an element:


• E.g. •p {
margin-top: 100px; margin-bottom: 100px; margin-right: 150px;
margin-left: 80px;
}
•p {
margin: 25px 50px 75px 100px;
}
•p {
margin: 25px;
}
Introduction to CSS Topic 3 - 3.32

CSS Padding
• Creates space around an element's content, inside of any defined borders.

div {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 100px;
}
Introduction to CSS Topic 3 - 3.33

TEXT FORMATTING
IN CSS
Introduction to CSS Topic 3 - 3.34

Text Color
Text Color
Sets the color of the text.
• Specified by: color: color|initial|inherit;

body { Value Description


color: blue;
} color Specifies the text color.
h1 { initial Sets this property to its default value.
color: #00ff00;
} inherit Inherits this property from its parent
element.
Introduction to CSS Topic 3 - 3.35

Text Alignment

Sets the horizontal alignment of a text.


• Specified by: text-align:center|right|left|justify

h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Introduction to CSS Topic 3 - 3.36

Vertical-align Property

Sets the vertical alignment of an element.

• Specified by: vertical-align: baseline|length|sub|super|top|text-top|


middle|bottom|text-bottom|initial|inherit;

img {
vertical-align: text-top;
}
Introduction to CSS Topic 3 - 3.37

Vertical-align Property Values and Descriptions


Value Description
baseline Align the baseline of the element with the baseline of the parent element. This is default
length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are
allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.38

Text Decoration
Set or remove decorations from text.

• Specified by: text-decoration:none|overline|underline|line-through;

a{
text-decoration: none;
}
h1 {
text-decoration: overline;
}
Introduction to CSS Topic 3 - 3.39

Text Transformation
• Specifies the uppercase and lowercase letters in a text:

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

p.class1 {
text-transform: uppercase;
}
h1{
text-transform:lowercase;
}
Introduction to CSS Topic 3 - 3.40

Text Indentation
• Specify the indentation of the first line of a text:
text-indent: length|initial|inherit;

Value Descriptions
p{
text-indent: 50px; length Defines a fixed indentation in px, pt, cm, em, etc. Default
} value is 0.
% Defines the indentation in % of the width of the parent
element.
It may be both in
initial Sets this property to its default value.
percentage or in pixels!
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.41

Word-spacing Property
• Specify the space between words:
word-spacing: normal|length|initial|inherit;
Value Description
normal Defines normal space between words . This is the
p{ default.
word-spacing: 30px; length Defines an extra space between words in px, pt, cm, em,
etc.
}
Negative values are allowed.
initial Sets this property to its default value.

inherit Inherits this property from its parent element.


Introduction to CSS Topic 3 - 3.42

Letter-spacing Property
Is used to control the space between individual characters.
• Specified by: letter-spacing: normal|length|initial|inherit;

Value Description
h1 {
letter-spacing: 2px; normal No extra space between characters. This is the default.
} length Defines an extra space between characters (negative
values are allowed).
h2 {
letter-spacing: -3px; initial Sets this property to its default value.
} inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.43

Direction Property
Defines the direction of text within HTML elements.

• Specified by: direction: ltr|rtl|initial|inherit ;

Value Description
div { ltr The writing direction is left-to-right. This is the
direction: rtl; default.
} rtl The writing direction is right-to-left.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.44

Text-shadow Property
Is used to apply a shadow effect to text within HTML elements.
• Specified by: text-shadow: h-shadow v-shadow blur-radius
color|none|initial|inherit; Value Description

h-shadow Required. The position of the horizontal


shadow. Negative values are allowed.
h1 { v-shadow Required. The position of the vertical
text-shadow: 2px 2px #ff0000; shadow. Negative values are allowed.
} blur-radius Optional. The blur radius. Default value is 0.
color Optional. The color of the shadow.
none Default value. No shadow.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.45

CSS FONT
AND STYLING
Introduction to CSS Topic 3 - 3.46

CSS Font

Font properties collectively provide extensive control over the


appearance of text within webpages.
font: font-style font-variant font-weight font-size/line-height font-
family|caption|icon|menu|message-box|small-caption|status-
bar|initial|inherit;

p.ex1 {
font: 15px arial, sans-
serif;
}
Introduction to CSS Topic 3 - 3.47

CSS Font
Font-style p.italic {
font-style: italic
font-style: normal|italic|oblique|initial|inherit; }

Font-variant
p.small {
font-variant: normal|small-caps|initial|inherit; font-variant: small-caps;
}
Introduction to CSS Topic 3 - 3.48

CSS Font
Font-weight p.normal {
font-weight: normal;
font-weight: normal|bold|bolder|lighter|number|initial|inherit; }

Font-size h1 {
font-size:medium|xx-small|x-small|small|large|x- font-size: 250%;
}
large|xx large|smaller|larger|length|initial|inherit;
h1 {
font-size: 2.5em; /* 40px/16=2.5em
Note: */
Smaller-Sets the font-size to a smaller size than the parent element
%-Sets the font-size to a percent of the parent element's font size }

p{
font-family: Times New
Font-family Roman;
font-family: font|initial|inherit; }
Introduction to CSS Topic 3 - 3.49

Styling Links
a:link - a normal, unvisited link a:hover - a link when the user’s mouse over it
a:visited - a link the user has visited a:active - a link the moment it is clicked
/* unvisited link */ /* mouse over link */
a:link { a:hover {
color: #FF0000; color: #FF00FF;
text-decoration: none; background-color: #FF704D;
}
}
/* visited link */
a:visited { /* selected link */ a:active {
color: #00FF00; color: #0000FF;
text-decoration: underline; }
}
Notes: a:hover MUST come after a:link and a:visited and
a:active MUST come after a:hover
Introduction to CSS Topic 3 - 3.50

CSS COLORS
Introduction to CSS Topic 3 - 3.51

CSS Colors
<h1 style="color:Tomato;">Tomato Colour</h1>
Colors can be set by: <h1 style="color:DodgerBlue;">Dodger Blue Colour </h1>
<h1 style="color:MediumSeaGreen;"> Medium Sea Green Colour</h1>
• By color names
<h1 style="border:2px solid Tomato;">Hello World</h1>
• By RGB values <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
• By hex values <h1 style="border:2px solid Violet;">Hello World</h1>
• By RGBA <h1 style="background-color:rgb(255, 99,71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
• By HSL <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71,0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Introduction to CSS Topic 3 - 3.52

RGB Value
• Colour can be specified as an RGB value:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of
the color between 0 and 255.
For example:
• rgb(255, 0, 0) - displayed as red
• rgb(0,0,0) – displayed as black
• rgb(255,255,255) – displayed as white
Introduction to CSS Topic 3 - 3.53

RGBA Value

• An RGBA color value is specified with alpha (for opacity):


rgba(red, green, blue, alpha)
• Alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all).
Introduction to CSS Topic 3 - 3.54

HEX Value
• Color can be specified using a hexadecimal value in the form:
#rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its
highest value (ff) and the others are set to the lowest value (00).
Introduction to CSS Topic 3 - 3.55

References
CSS Definition:
Mozilla Developer Network (MDN). (n.d.). What is CSS? - Learn web development. Available at: https://developer.mozilla.org/en-
US/docs/Learn/CSS/First_steps/What_is_CSS
CSS Syntax:
Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Available at: https://developer.mozilla.org/en-
US/docs/Web/CSS
Wikipedia. (n.d.). CSS. Available at: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS Class:
W3Schools. (n.d.). CSS Introduction. Available at: https://www.w3schools.com/css/css_intro.asp
CSS Style Sheets:
Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Available at: https://developer.mozilla.org/en-
US/docs/Web/CSS
CSS Background:
W3Schools. (n.d.). CSS Backgrounds. Available at: https://www.w3schools.com/css/css_background.asp
CSS Box Model:
Mozilla Developer Network (MDN). (n.d.). Box model. Available at: https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Topic 3 – Introduction to CSS

Any Questions?

You might also like