CSS
Cascading Style
Sheet
F27WD Web Design and Databases
Dr Md Azher Uddin
2024-25
Part 1/2
CSS Fundamentals
• What is CSS?
• CSS is a language to design and create a great-looking web pages.
• With CSS you can define how HTML elements are displayed.
• CSS is implemented using styles.
• A style is a rule that describes how to format a specific part of an
HTML document.
• A style sheet is a set of style rules.
• Language ≠ Programming language
CSS Fundamentals
• You can create a style and apply it to many elements based on a
selector.
• You use a selector to locate and select elements based on tag name,
class name, ID, and more.
• You can create a style that works with images, and you can create a
style that works only with hyperlinks etc.
• You can also create a named style that you can
apply to any element.
• The reusability of CSS is powerful.
Applying Style Sheets
• Inline style sheet within a tag.
• Applies only to that particular occurrence of that tag.
• Embedded (also called Internal) style sheet
• Defined within the head section of a page.
• Applies to that page only.
• External style sheet
• defined in a separate, hence external, file.
Inline Style
<p style="font-size:14px;">…</ p >
Pros Cons
Highly specific to the element on Hard to maintain: it is bad for
which it is defined. reusability because you will need
to copy this style to each HTML
You don’t need a selector. document you want to style.
It is handy to override styles that HTML/CSS coupled: it violates the
are defined elsewhere. primary goal of separation
between structure and
presentation.
Embedded Style
<style>
p { font-size:14px; }
</style>
Pros Cons
Affects all matched elements HTML/CSS coupled: Still,
it does not provide file
Useful when you want to have a single, separation.
stand-alone webpage that contains It only provides reuse
everything needed to render. within the one file it
It can be located within the <head> or contains it.
the <body> elements.
You need to use
*Better in <head>. SELECTORS
External Style
separate CSS file
p{
font-size:14px;
}
mystyle.css
Pros Cons
Easy to maintain: Write It can become
once for whole site harder to manage
HTML & CSS decoupled:
You need to use
Themes !!! SELECTORS
External Style
separate CSS file
p{
font-size:14px;
}
mystyle.css
Pros Cons
Easy to maintain: Write It can become
once for whole site harder to manage
HTML & CSS decoupled:
You need to use
Themes !!! SELECTORS
What is in a webpage
3 images
1 external JS:
main.min.20181002.js
3 embedded JS
2 external CSS:
non-critical.min.20180912.css
legacy.min.20180604.css
1 embedded CSS
5 inline CSS (2 embedded JSON)
CSS fundamentals - selectors
• A selector connects the style rule to your HTML.
selector {
propert y : value ;
propert y : value ;
…
}
CSS fundamentals - selectors
selector {
element-type: (div)
propert y :
id (#name)
v a lue;
class (.name)
propert y :
} v a lue;
…
CSS fundamentals – Element-type selectors
• An element type selector is based on the name of the tag.
• In this example, the tag name (button) is the selector and the style will be applied to
every button in your HTML document.
button {
background-color: white;
color: red;
}
• If your HTML document contains 50 buttons, the style of all 50 buttons
would be set.
• This is desirable in some scenarios, but if you want to set the style on a
single button or a subset of buttons, you should use the ID or the CLASS
selectors.
CSS fundamentals – Element-type selectors
• An id selector is based on the id of the element.
• For example, to set the style on a single button, you can assign an id to the button and
then specify the id as the selector, prefixed with the hash (#) symbol.
HTML CSS
<button id='btnSave'>Save</button> #btnSave {
background-color: white;
color: red;
}
• In this example, it doesn’t matter which type of element is being accessed; all
that matters is that the id is btnSave.
• The id must be unique across an HTML document.
• You cannot have two elements with the same id.
CSS fundamentals – Element-type selectors
• A class selector is a style with a class name of your choice,
prefixed with the period (.) symbol.
HTML CSS
<button class='myStyle'>OK</button> .myStyle {
<button class='myStyle'>Cancel</button> background-color: black;
color: orange;
}
• Class styles promote reuse because they can be used on any
element as needed.
CSS fundamentals – Using an External style
body {
background-color: gray;
color: red;
}
test.html
…
<link rel='stylesheet' type='text/css' href='default.css' />
…
CSS Fundamentals –
Selectors
HTML element CSS rule
<p> p {
font-size: 14px;
}
<p class=“bp”> .bp {
color: gray;
}
<p id=“headline”> #headline { font-
size:20px;
}
CSS Backgrounds
CSS Text Color
The CSS id Selector
The CSS class Selector
CSS Fundamentals –
Box model
top
left right
bottom
CSS Fundamentals –
Box model
• The margin is the space outside the border,
between the border and the next element.
• The padding is the space inside the border,
between the border and the content.
• If the border is being displayed, the margin and padding settings will
have distinct effects.
• If the border is not being displayed, it can be difficult to differentiate
margin and padding settings.
CSS Fundamentals –
Box model
main {
margin: 15px;
border: 10px;
padding: 25px;
background-color: yellow;
border-style: solid;
border-color: green;
}
CSS Fundamentals –
Box model
main {
margin-top: 0px;
margin-right: 5px; top
clockwise
margin-bottom: 10px;
margin-left: 1px;
padding: 1px 2px 3px 4px;
left right
border: 15px;
background-color: yellow;
padding-top: 1px;
padding-right: 2px; border-style: solid;
padding-bottom: 3px; border-color: green; bottom
padding-left: 4px;
}
Creating layouts with <div>
• The div tag defines a division or a section in an HTML document.
• Can be used to group block- elements and format them with CSS.
• Hence, div represents a rectangular block of content.
Creating layouts with <div>
defaultDiv.css File
<!DOCTYPE html>
<html> div {
background-color: green;
<link rel="stylesheet" type="text/css" href="defaultDiv.css"> height: 100px;
width: 100px;
<title>Div Demo</title>
}
<body>
<div></div>
</body>
</html>
defaultDiv.css File
Creating layouts with <div>
.div-1 {
background-color: blue;
height: 50px;
<!DOCTYPE html>
width: 50px;
<html> }
<link rel="stylesheet" type="text/css" href="defaultDiv.css"> .div-2 {
<title>Div Demo</title> background-color: red;
height: 100px;
<body> width: 100px;
<div class="div-1"></div> }
<div class="div-2"></div> .div-3 {
background-color: yellow;
<div class="div-3"></div>
height: 200px;
</body> width: 200px;
}
</html>
CSS Fundamentals –
Properties
Typography Colors Positioning
font-size color background-color position
font-weight background-image width
font-family border-color Height
line-height margin
text-align padding
border
http://htmldog.com/reference/cssproperties/
view all http://www.w3schools.com/cssref/
Alternative properties to <div>
• You can create complex and sophisticated layouts with div
• However, web layouts don’t need to be done using only <div>.
• CSS offers two other elements and properties for styling web pages.
• Flexbox: a layout module that was designed to create mobile pages
• webpages that display well on small devices such as smartphones.
• Grid Layout: a layout module created to manipulate HTML pages as
grids.
• Both, Flexbox and Grid make easier the design web pages without
having to use floats and positioning.
Alternative properties to <div>
• Flexbox is made for one dimensional layouts and
• Grid is made for two dimensional layouts
Flexbox
HTML example: <header>
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</header>
Before we turned it into a Flexbox layout these div’s are stacked on top of each other
like this:
Flexbox
When we give it a CSS display: flex; the items will be places nicely on a
line.
header {
display: flex;
}
To move the logout button to the far right side, we’ll simply target that element and
give it a margin:
header > div:nth-child(3) {
margin-left: auto;
}
Which results in the following:
More on Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid Layout
• The Grid Layout offers a grid-based layout system.
• This layout has both rows and columns
• This makes it easier to design web pages without having to use floats and
positioning.
Grid Layout
• A grid layout consists of a parent element, with one or more child
elements.
• An HTML element becomes a grid container when its display
property is set to grid or inline-grid.
• All direct children of the grid container automatically become grid
items.
Grid Layout
Grid Layout
