Session3 module5 6 intro CSS and color layout properties

Session 3
Module 5: Introduction to CSS
Module 6: CSS Color and Layout Properties


Session 3 – Objectives (1)







Explain the CSS (Cascading Style Sheets)
Explain CSS syntax
Explain Selectors
Explain the ways to insert CSS
Explain the Text Properties
Explain the Font Properties

Introduction to CSS & CSS Color and Layout Properties – Slide 2 / 50


Session 3 – Objectives (2)








Explain the Color properties
Explain the Background properties
Explain the Box model
Explain the Border properties
Explain the Margin properties
Explain the Padding properties
Explain the Table properties

Introduction to CSS & CSS Color and Layout Properties – Slide 3 / 50


What is CSS?







CSS stands for Cascading Style Sheets
A style sheet is the place where we manage and
control styles.
The style sheet describes the appearance and
presentation of an HTML document as it will be
presented on screen, or even in print.
We can also precisely specify the location and
appearance of elements on a page and create
special effects.
Introduction to CSS & CSS Color and Layout Properties – Slide 4 / 50

Evolution of CSS






CSS1: Released in 1996
CSS Positioning (CSS-P): Next version released
after CSS1
CSS2: Released in 1998
CSS3: This version was drafted in 2009 and now
is still under development

Introduction to CSS & CSS Color and Layout Properties – Slide 5 / 50


CSS Syntax


A CSS rule has two main parts: a selector, and
one or more declarations.

Introduction to CSS & CSS Color and Layout Properties – Slide 6 / 50


CSS Comments




Comments are used to explain your code, and
may help you when you edit the source code at
a later date.
CSS comments example:
/*This is a comment*/
p
{
text-align: center;
/*This is another comment*/
color: black;
font-family: Arial;
}
Introduction to CSS & CSS Color and Layout Properties – Slide 7 / 50


Selectors




A selector is a string that identifies what
elements the corresponding rule applies to.
There are three types of selectors:
o
o
o

HTML element selectors
Class selectors
ID selectors

Introduction to CSS & CSS Color and Layout Properties – Slide 8 / 50


HTML Element Selectors




These selectors use the names of HTML
elements.
The only difference is that we remove the
brackets. So, the HTML

tag become p.
p
{
color: red;
text-align: center;
}

Introduction to CSS & CSS Color and Layout Properties – Slide 9 / 50


HTML Element Selectors Demo
/*CSS*/
p {color:red; text-align:center;}
h1 {color:blue; background:pink;}
<!--HTML-->

Hello World!

This paragraph is styled with CSS.

Output

Introduction to CSS & CSS Color and Layout Properties – Slide 10 / 50


ID Selectors






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="elementid":
o

o

CSS:
#elementid {color: red; text-align: center;}
HTML:

ID selector

Introduction to CSS & CSS Color and Layout Properties – Slide 11 / 50

ID Selectors Demo
/*CSS*/
#para1
{
text-align:center;
color:red;
background:lavender;
}
<!--HTML-->

Hello World!

This paragraph is not affected by the style.

Output

Introduction to CSS & CSS Color and Layout Properties – Slide 12 / 50


Class Selectors (1)






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 any
HTML elements with the same class.
The class selector uses the HTML class
attribute, and is defined with a "."(dot).

Introduction to CSS & CSS Color and Layout Properties – Slide 13 / 50


Class Selectors (2)


In the example below, all HTML elements with
class="center" will be center-aligned:
o

o

CSS:
.center {text-align: center;}
HTML:

Class selector

This paragraph is center-aligned

Introduction to CSS & CSS Color and Layout Properties – Slide 14 / 50


Class Selectors (3)




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:
o

o

CSS:
p.center {text-align: center;}
HTML:

This paragraph is centeraligned

This paragraph will not be affected

Introduction to CSS & CSS Color and Layout Properties – Slide 15 / 50


Class Selectors Demo
/*CSS*/
.center
{
text-align:center;
background:lavender;
}
<!--HTML-->

Center-aligned heading

Center-aligned paragraph.

Output

Introduction to CSS & CSS Color and Layout Properties – Slide 16 / 50


Ways to Insert CSS (1)


Inline style

This is a paragraph.



Internal style sheet
<head>
<style type="text/css">
p {color: green;}
body {background-image: url("images/pink.gif");}
</style>
</head>

Introduction to CSS & CSS Color and Layout Properties – Slide 17 / 50


Ways to Insert CSS (2)


External style sheet
o

Use link element
<head>

href="mystyle.css"/>
</head>

o

Use @import
<style type="text/css">
@import "mystyle.css";
</style>

Introduction to CSS & CSS Color and Layout Properties – Slide 18 / 50


Inheritance in CSS


Styles can be inherited from a parent

Introduction to CSS & CSS Color and Layout Properties – Slide 18 / 50


CSS Unit


For width, height, margin, padding, border property:

Introduction to CSS & CSS Color and Layout Properties – Slide 19 / 50

CSS Color


For color, background property:

Introduction to CSS & CSS Color and Layout Properties – Slide 21 / 50


Text Properties (1)



Browser support:
Text color
o

The color property is used to set the color of the text.






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

Text alignment
o
o

Text-align property is used to set the horizontal
alignment of a text.
Text can be centered, or aligned to the left or right, or
justified.



h1 {text-align: center;}
p {text-align: left;}
Introduction to CSS & CSS Color and Layout Properties – Slide 22 / 50


Text Properties (2)


Text decoration
o
o

Text-decoration property is used to set or remove
decorations from text.
Text-decoration property is mostly used to remove
underlines from links for design purposes:




a {text-decoration: none;}

Text indentation
o

Text-indentation property is used to specify the
indentation of the first line of a text.


p {text-indent: 50px;}

Introduction to CSS & CSS Color and Layout Properties – Slide 22 / 50


Text Properties (2)


Text Transformation
o

The text-transform property is used to specify
uppercase and lowercase letters in a text.




p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Introduction to CSS & CSS Color and Layout Properties – Slide 24 / 50

Text Properties Demo
/*CSS*/
a {text-decoration:none;}
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}

Output

<!--HTML-->

Link to: <a href="">FPT Aptech</a>

This is some text.

This is some text.

Introduction to CSS & CSS Color and Layout Properties – Slide 25 / 50