CSS Basics
TBS/2018-2019
Introduction
2
HTML : Hyper Text Markup Language
Was NEVER intended to contain tags for formatting a web page
Describes the content of a web page
CSS: Cascading Style Sheets
Describes HOW HTML elements are to be displayed on screen, paper, or in
other media
Separates content (the data ) from (the styling)
Saves a lot of work.
It can control the layout of multiple web pages all at once.
The beauty of CSS
3
HTML (no CSS) HTML + CSS
The same page (with and without CSS) Source: www.zengarden.com
CSS versions
(developped by W3C)
4
CSS Level 1 (CSS1): 1996 CSS level 3 (CSS3):1999
font properties (e.g.: color presentation-style
of text, backgrounds), properties,
text attributes (e.g.: modularization of CSS
spacing between words, documents
letters, and lines of text).
No CSS4 standard or
CSS level 2 (CSS2): 1998
specification
page layout, but a few level 4 modules
styles for other media exist e.g.: image values,
types, backgrounds & borders, etc.,
more sophisticated builds on the functionality of
methods for selecting a preceding level 3 module.
elements for styling.
How to Insert CSS? (1/5)
5
Styling can be added to HTML elements in 3 ways:
Inside the HTML page
Inline inside of each HTML tag to style
To avoid: the worst way to do styling
Internal inside the header <head> of the HTML page
If you need to style only one page, or if you want different pages
to have different styles
Outside the HTML page
External in a separate style file
The most recommended method
How to Insert CSS? (2/5)
Inline CSS
6
One file:
page.html
Result
How to Insert CSS? (3/5)
Internal CSS
7
One file:
page.html Result
How to Insert CSS? (4/5)
External stylesheet
8
Two files: page.html style.css
Result
How to Insert CSS? (5/5)
External stylesheet
9
Advantages
Specify the style once for every instance of each class.
Example: Specify the font once for all text on the HTML page
that you’ve identified as a “header”.
All the HTML pages of the entire website can link to the same
stylesheet file: a separate file.
Can change the style of the entire site by editing only ONE
FILE: the CSS file.
Reusibilty of the same stylesheet file in several websites
CSS Syntax (1/2)
10
A simple CSS rule-set consists of:
a Selector
the HTML element (tag) it will affect
a Property
the attribute of the HTML element that will be affected
a Value
the change that will be made to that attribute
Declaration
Selector { Property : Value ; }
Declaration block
CSS Syntax (2/2)
11
A CSS declaration block can contain one or more
declarations.
Declaration blocks are surrounded by curly braces.
A CSS declaration always ends with a semicolon.
Each declaration includes a CSS property name and a value,
separated by a colon.
Declaration block
CSS comments
12
Written between /* and */
Allows you to enter notes into CSS that will not be
interpreted
Will not be visible in the browser
CSS Selectors (1/2)
13
Element Selector: selects elements based on the element name.
p { h1, h2, p {
color: red; color: red;
text-align: center; text-align: center;
} }
Id Selector: uses a unique id attribute of an HTML element to select a specific
element.
<body>
#para1 {
<p id="para1">Hello World!</p>
text-align: center;
<p>This paragraph is not affected by the
color: red;
style.</p>
</body> } CSS
HTML code
code
CSS Selectors (2/2)
14
Class Selector: selects elements with a specific class attribute.
<body>
<h1 class="center">Red and center-aligned .center {
all HTML
heading</h1> color: red;
elements with
<p class="center">Red and center-aligned text-align: center; class="center"
paragraph.</p> } will be red and
center-aligned
</body>
In the example below, only <p> elements with class="center" will be center-aligned:
p.center {
color: red;
text-align: center;
}
CSS Elements
15
CSS can control many elements of our web pages:
Backgrounds,
Borders,
Margins,
Padding,
Height/Width,
Division,
Combinators,
Font,
Text,
Lists,
Tables,
Counters,
Position,
and much more..
Color
16
Can be specified using
a color name an RGB value a HEX value
Color Name RGB HEX
red rgb(255,0,0) #FF0000
yellow rgb(255,255,0) #FFFF00
green rgb(0,255,0) #00FF00
cyan rgb(0,255,255) #00FFFF
blue rgb(0,0,255) #0000FF
Background (1/2)
17
background-color: set the background color of an element.
p, h1 { background-color: lightblue; }
background-image: set an image as the background.
body { background-image: url(flowers.jpg);
}
background-repeat: repeat a background image horizontally or vertically.
body { background-repeat: value; }
Values:
no-repeat
repeat
repeat-x
repeat-y
Background (2/2)
18
background-attachment: If you are using an image as a background. You can
set whether the background scrolls with the page or is fixed when the user
scrolls down the page with the background-attachment property.
body { background-attachment: scroll; } body { background-attachment: fixed; }
background-position:
Values:
body { background-position: value; } top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Border (1/2)
19
The CSS border properties allow you to specify the style, width, and color of an
element's border:
border-style:
Values:
border-style: value; dashed, dotted
double, groove
hidden, inset
none, outset
ridge, solid
border-color:
border-color: red green blue yellow;
border-width:
border-width: 2px 10px 4px 20px;
Border (2/2)
20
In CSS, there is properties for specifying each of the borders (top, right, bottom,
and left):
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
You can set the color, style and width of the borders around an element in one
declaration by using the shorthand property border :
p{
border: 5px solid red;
}
Margin & padding
21
Padding: inner area of an element (inside the border)
Margin: inner area of an element (outside the border)
1
margin-top
padding-Left
padding-right
padding-top
margin-right
Margin-Left
2
4
padding-bottom
margin-bottom
3
Margin
22
The margin property declares the margin between an HTML element and the
elements around it. The margin property can be set for the top, left, right and
bottom of an element.
p{ Or with the shorthand property margin
margin-top: 100px;
margin-right: 150px; p{
margin-bottom: 100px; margin: 100px 150px 100px 80px;
margin-left: 80px; }
}
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
Padding
23
Padding is the distance between the border of an HTML element and the
content within it.
p{ Or with the shorthand property padding
padding-top: 50px;
padding-right: 30px; p{
padding-bottom: 50px; padding: 50px 30px 50px 80px;
padding-left: 80px; }
}
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
Height & Width
24
The height and width can be set to auto (this is default. Means that the browser
calculates the height and width), or be specified in length values, like px, cm,
etc., or in percent (%) of the containing block:
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
You can control the minimum/maximum width or the minimum/maximum
height of an element:
div {
max-width: 70%;
min-height: 30cm;
border: 3px dashed green;
}
Division
25
Divisions are a block level HTML element used to define sections of an HTML
file. A division can contain all the parts that make up your website. Including
additional divisions, images, text and so on.
<body> <body>
<div > <div id=”container”>
Site contents go here. Site contents go here.
</div> </div>
</body> </body>
The CSS file will contain:
div { #container {
width: 70%; width: 70%;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
border: 1px solid #666; border: 1px solid #666;
} }
Combinators
26
There are four different combinators in CSS:
descendant selector (space): The following example selects all <p> elements inside
<div> elements:
div p { background-color: yellow; }
child selector (>): The following example selects all <p> elements that are immediate
children of a <div> element:
div > p { background-color: yellow; }
adjacent sibling selector (+): The following example selects all <p> elements that are
placed immediately after <div> elements:
div + p { background-color: yellow; }
general sibling selector (~): The following example selects all <p> elements that are not
in <div> elements:
div ~ p { background-color: yellow; }
Font
27
The font property can set the style, weight, variant, size, line height and font:
font-family:
p { font-family: "Times New Roman", Times, serif; }
font-style:
font-style: value; Values: normal, italic, oblique
1em is equal to the
font-size: current font size.
The default text size
in browsers is 16px.
font-size: 100%; font-size: 40px; font-size: 2.5em; So, the default size
of 1em is 16px.
font-weight:
font-weight: lighter font-weight: 300; font-weight: bold;
font-variant:
font-variant: normal; font-variant: small-caps;
Text (1/2)
28
color: you can set the color and align a text with the color and text align attributes.
h1 { color: rgb(255,0,0);
text-align: justify; }
text-decoration:
Values:
None, underline, Overline,
h1 { text-decoration: value; }
line through, blink
text-transformation:
Values:
text-transform: values;
none, capitalize, lowercase, uppercase
text-indent: specify the indentation of the first line of a text
p { text-indent: 50px;}
Text (2/2)
29
letter-spacing: specify the space between the characters in a text.
h1 { letter-spacing: 3px; }
line-height: specify the space between lines.
p.small { line-height: 0.8; }
text-direction: right to left
direction: rtl;
word-spacing: specify the space between the words in a text
h1 { word-spacing: 10px;}
Lists
30
The CSS list properties allow you to:
Set different list item markers for ordered and unordered lists:
Values:
list-style-type: value; disc, circle, square, decimal, lower-roman
upper-roman, lower-alpha, upper-alpha, none
Set an image as the list item marker:
list-style-image: url(path_to_image.gif, jpg or png);
Set the position of the list item markers: specifies whether the list-item markers should
appear inside or outside the content flow:
list-style-position: inside; list-style-position: outside;
Add background colors to lists and list items
ol { background: #ff9999; }
Tables
31
border:
table, th, td {
border: 1px solid black;
}
border-collapse: set whether the table borders should be collapsed into a single border.
table {
border-collapse: collapse;
}
height, width, color, background-color, padding, etc.
table { width: 100%; }
th { height: 50px;
background-color: #4CAF50;
color: white;
border-bottom: 1px solid #ddd;
padding: 15px;
text-align: left;
}
Counters
32
CSS counters are like "variables". The variable values can be incremented by
CSS rules (which will track how many times they are used):
counter-reset - Creates or resets a counter
counter-increment - Increments a counter value
content - Inserts generated content
counter() or counters() function - Adds the value of a counter to an element
body { counter-reset: c1 c2 c3; }
h1:before { content: counter(c1) " "; counter-increment: c1; }
h2:before { content: counter(c1) "." counter(c2) " "; counter-increment: c2; }
h3:before { content: counter(c1) "." counter(c2) "." counter(c3) " "; counter-increment: c3; }
Position
33
The position property changes how elements are positioned on your webpage.
position: value;
Values:
static: An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:
relative: places the element in the normal flow of your HTML file and then offsets it by
some amount using the properties left, right, top and bottom.
absolute: removes the element from the normal flow of your HTML file, and positions it
to the top left of its nearest parent element that has a position declared other than static.
Fixed: An element that is positioned with a fixed value, will not scroll with the
document. It will remain in its position regardless of the scroll position of the page.
When positioning elements with relative, absolute or fixed values the following
properties are used to offset the element: Top, left, right, bottom.
