Scribd
Upload
2 views

CSS

Uploaded by

shivamkapoor9876034115
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS

Uploaded by

shivamkapoor9876034115
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

IT2.

2
Web Concepts
05. CSS 2/2 Mohammed
AbuJarour
29.10.24
* SUBJECT TO CHANGE

Plan

# Date Topic # Date Topic

1 08.10.24 Introduction to Web Technologies 7 19.11.24 Prototyping (static)


HTML 1/2
8 26.11.24 Prototyping (dynamic)
2 15.10.24 HTML 2/2
9 03.12.24 Design Thinking
3 22.10.24 CSS 1/2
10 10.12.24 WordPress 1/2
4 29.10.24 CSS 2/2
11 17.12.24 WordPress 2/2
5 05.11.24 JavaScript 1/2

6 12.11.24 JavaScript 2/2 12 07.01.25 Introduction to DevOps

Mohammed AbuJarour – CSS 2/2 29.10.24 2


CSS Layout
CSS Layout – The display property

• The display property specifies if and how an element is displayed.


• Every HTML element has a default display value depending on what type of
element it is: block or inline
• A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
• An inline element does not start on a new line and only takes up as much width as necessary.

Mohammed AbuJarour – CSS 2/2 29.10.24 4


CSS Layout – The display property

• Examples of block-level elements: <div>, • Changing an inline element to a block


<h1> - <h6>, <p>, <form>, <header>, element, or vice versa, can be useful
<footer>, <section> for making the page look a specific
• Examples of inline elements: <span>, way, and still follow the web
<a>, <img> standards.

Mohammed AbuJarour – CSS 2/2 29.10.24 5


CSS Layout – The display property
<head>
<style>
li.menu {
display: inline;
}
.nav {
padding: 0;
}
</style>
</head>

<body>
<ul class="nav">
<li class="menu"><a href="html.html">HTML</a></li> |
<li class="menu"><a href="css.html">CSS</a></li> |
<li class="menu"><a href="js.html">JavaScript</a></li>
</ul>
<p> In this tutorial, we will discuss:
<ul>
<li>Basics</li>
<li>Examples</li>
<li>Best practices</li>
</ul>
</p>

Mohammed AbuJarour – CSS 2/2 29.10.24 6


CSS Layout – Hiding an element

• Hiding an element can be done by • Also, visibility:hidden; hides an


setting the display property to none. element.
• The element will be hidden, and the • The element will still take up the
page will be displayed as if the same space as before.
element is not there The element will be hidden, but still
affect the layout

Mohammed AbuJarour – CSS 2/2 29.10.24 7


CSS Layout – Hiding an element
<!-- ... -->
<p> Your results:
<ol>
<li>Points: 96</li>
<li>Grade: 1.0</li>
<li>Result: successful</li>
<li>Note: congratulations!</li>
</ol>
</p>
<hr>
<p> Your results:
<button onclick="showResult();">Show result </button>
<ol>
<li>Points: 96</li>
<li style="display: none;">Grade: 1.0</li>
<li style="visibility: hidden;">Result: successful</li>
<li>Note: congratulations!</li>
</ol>
</p>

Mohammed AbuJarour – CSS 2/2 29.10.24 8


CSS Layout – The position property

• The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
• Elements are then positioned using the top, bottom, left, and right properties.
• These properties will not work unless the position property is set first.
• They also work differently depending on the position value.
• HTML elements are positioned static by default.

Mohammed AbuJarour – CSS 2/2 29.10.24 9


CSS Layout – The position property

• An element with position: relative; is positioned relative to its normal position.


• An element with position: fixed; is positioned relative to the viewport, which means
it always stays in the same place even if the page is scrolled.
• An element with position: absolute; is positioned relative to the nearest positioned
ancestor
(instead of positioned relative to the viewport, like fixed).

Mohammed AbuJarour – CSS 2/2 29.10.24 10


CSS Layout – The position property
<html> </style>
<head> </head>
<style> <body>
p{ <p class="relative">
border: 1px solid navy; This is how relative position works.<br/>
} With multi-line as well
.relative { </p>
position: relative;
<p class="fixed">
left: 3em;
This is how fixed position works<br/>
color: blue;
} With multi-line as well.
.fixed { <img src="li-icon.png" class="absolute"/>
position: fixed; </p>
bottom: 0;
<p class="absolute">
right: 0;
This is how absolute position works<br/>
color: crimson;
} With multi-line as well
</p>
.absolute {
position: absolute;
</body>
right: 10px;
</html>
color: green;
}

Mohammed AbuJarour – CSS 2/2 29.10.24 11


CSS Layout – The position property
<style>
p{
border: 1px solid navy;
}

.relative {
position: relative;
left: 3em;
color: blue;
}

.fixed {
position: fixed;
bottom: 0;
right: 0;
color: crimson;
}

.absolute {
position: absolute;
right: 10px;
color: green;
}
</style>

Mohammed AbuJarour – CSS 2/2 29.10.24 12


CSS Layout – float

• The CSS float property specifies how an


element should float.

• The float property is used for positioning


and formatting content, e.g., let an image
float left to the text in a container.

Mohammed AbuJarour – CSS 2/2 29.10.24 13


CSS Layout – float

• The float property can have one of the following values:

1.left - The element floats to the left of its container

2.right - The element floats to the right of its container

3.none - The element does not float (will be displayed just where it occurs in the
text). This is default

4.inherit - The element inherits the float value of its parent

Mohammed AbuJarour – CSS 2/2 29.10.24 14


CSS Layout – default float

<p>
<img src="logo.png">
The demand for digitization ...
</p>

Mohammed AbuJarour – CSS 2/2 29.10.24 15


CSS Layout – set float

img {
float: right;
}

Mohammed AbuJarour – CSS 2/2 29.10.24 16


CSS Layout - Horizontal & Vertical Align

• To horizontally center a block element (like <div> ), use margin: auto; and set the
width of the element to prevent it from stretching out to the edges of its container.

• To just center the text inside an element, use text-align: center;

• To center an image, set left and right margin to auto and make it into
a block element

Mohammed AbuJarour – CSS 2/2 29.10.24 17


CSS Layout - Horizontal & Vertical Align
<style>
p{
border: 1px solid orangered;
}
.centered {
margin: auto;
width: 50%;
}
.centered-text {
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p class="centered">This is a centered paragraph</p>
<p class="centered-text">The text in this paragraph is centered</p>
<p>A centered image <img src="li-icon.png"></p>
</body>
</html>

Mohammed AbuJarour – CSS 2/2 29.10.24 18


HTML Layout Elements
HTML Layout Elements
• HTML offers several semantic elements that define the
different parts of a web page:
<header>
• <header> defines a header for a document or a section
<nav>
• <nav> defines a container for navigation links
• <section> defines a section in a document
• <article> defines an independent self-contained article <section>

• <aside> defines content aside from the content (like a sidebar) <aside>
• <footer> defines a footer for a document or a section
• <details> defines additional details <article>

• <summary> defines a heading for the <details> element


<footer>

Mohammed AbuJarour – CSS 2/2 29.10.24 20


Semantic elements in HTML
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Mohammed AbuJarour – CSS 2/2 29.10.24 21


HTML layout elements – example
<body>
<header>
<h1>Web Tutorials</h1>
</header>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
</ul>
</nav>

<section>
<article>
<h2>HTML</h2>
<p><!-- ... --></p>
<p><!-- ... --></p>
</article>
<aside>Google Ads come here!</aside>
</section>
<footer>
<p> All rights reserved. &copy;
MDH University Berlin, 2024</p>
</footer>
</body>

Mohammed AbuJarour – CSS 2/2 29.10.24 22


HTML layout elements – example
Without
CSS

Mohammed AbuJarour – CSS 2/2 29.10.24 23


HTML layout elements – example
header { /* Style the menu’s list */ }
background-color: #313131; nav ul { /* Clear floats after the columns */
padding: 10px; list-style-type: none; section:after {
text-align: center; padding: 0; content: "";
font-size: 35px; } display: table;
color: white; article { clear: both;
} float: left; }
/* Create three columns/boxes that floats next to padding: 20px; /* Style the footer */
each other */ width: 70%; footer {
nav { background-color: #f1f1f1; background-color: #777;
float: left; height: 300px; padding: 10px;
width: 15%; } text-align: center;
height: 300px; aside{ color: white;
background: #00D8A3; float: right; font-size: small;
padding: 20px; width: 15%; }
} height: 300px;
background: #ccc;
padding: 20px;

Mohammed AbuJarour – CSS 2/2 29.10.24 24


HTML layout elements – example

Mohammed AbuJarour – CSS 2/2 29.10.24 25


HTML layout techniques

• There are four different techniques to create multicolumn layouts.


Each way has its pros and cons:
1. CSS frameworks, e.g., Bootstrap
2. CSS float property
3. CSS flexbox
4. CSS grid

Mohammed AbuJarour – CSS 2/2 29.10.24 26


CSS website layout – Flexbox

• The Flexible Box Layout Module, • The flex container properties are:
makes it easier to design flexible 1.flex-direction
responsive layout structure without
2.flex-wrap
using float or positioning.
3.flex-flow
• To start using the Flexbox model, you
4.justify-content
need to first define a flex container.
5.align-items
• The flex container becomes flexible
by setting the display property to flex 6.align-content

Mohammed AbuJarour – CSS 2/2 29.10.24 27


Flexbox – example
<style>
.flex-container {
display: flex;
background-color: lightblue;
}
.flex-container>div {
background-color: #f1f1f1;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Mohammed AbuJarour – CSS 2/2 29.10.24 28


Flexbox – flex-direction
.flex-container-vertical {
display: flex;
background-color: lightgreen;
flex-direction: column;
/* Possible values: column-reverse row row-reverse */
}
<!-- ... -->
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<hr>
<div class="flex-container-vertical">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- ... -->

Mohammed AbuJarour – CSS 2/2 29.10.24 29


Flexbox – flex-wrap

.flex-container {
display: flex;
background-color: lightblue;
flex-wrap: wrap;
/* nowrap wrap-reverse */
}

Mohammed AbuJarour – CSS 2/2 29.10.24 30


The flex container properties

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available
space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available
space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough
room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but
instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap

Mohammed AbuJarour – CSS 2/2 29.10.24 31


Flexbox – flex items

• The direct child elements of a flex • The flex item properties are:
container automatically becomes
1.order
flexible (flex) items.
2.flex-grow
3.flex-shrink
4.flex-basis
5.flex
6.align-self

Mohammed AbuJarour – CSS 2/2 29.10.24 32


Flexbox – flex items order
<!-- ... --> order: 0

<div class="flex-container">
<div style="order: 2">1</div>
<div style="order: 1">2</div>
<div style="order: 3">3</div>
<div style="order: -1">4</div>
<div>5</div>
<div>6</div> • The order property specifies the order
<div>7</div> of the flex items.
<div>8</div> • The order value must be a number,
<div>9</div> default value is 0.
</div>

Mohammed AbuJarour – CSS 2/2 29.10.24 33


Flexbox – flex items’ flex-grow property
<div class="flex-container">
<div style="flex-grow: 1">A</div>
<div style="flex-grow: 1">B</div>
<div style="flex-grow: 8">C</div>
</div>

• The flex-grow property specifies how


much a flex item will grow relative to
the rest of the flex items.
• The value must be a number, default
value is 0.

Mohammed AbuJarour – CSS 2/2 29.10.24 34


The flex item properties
Property Description
order Specifies the order of a flexible item relative to the rest of the flex items inside
the same container
align-self Specifies the alignment for the selected item inside the flexible container.
Overrides the container’s align-items property
flex-grow The flex-grow property specifies how much a flex item will grow relative to the
rest of the flex items.
flex-shrink The flex-shrink property specifies how much a flex item will shrink relative to the
rest of the flex items.
flex-basis The flex-basis property specifies the initial length of a flex item.
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

Mohammed AbuJarour – CSS 2/2 29.10.24 35


HTML layout techniques

• There are four different techniques to create multicolumn layouts.


Each way has its pros and cons:
1. CSS frameworks, e.g., Bootstrap
2. CSS float property
3. CSS flexbox
4. CSS grid

Mohammed AbuJarour – CSS 2/2 29.10.24 36


CSS grid layout module

• The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.
• A grid layout consists of a parent element, with one or more child elements.

Mohammed AbuJarour – CSS 2/2 29.10.24 37


CSS grid layout module

• 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.

Mohammed AbuJarour – CSS 2/2 29.10.24 38


CSS grid layout – example
.grid-container {
display: grid;

.item1 {
grid-column: 1 / span 2;
grid-row: 1;
}

.item2 { <div class="grid-container">


grid-column: 3; <div class="grid-item item1">1</div>
grid-row: 1 / span 2;
<div class="grid-item item2">2</div>
}
<div class="grid-item item3">3</div>
.item5 {
<div class="grid-item item4">4</div>
grid-column: 1 / span 3;
<div class="grid-item item5">5</div>
grid-row: 3;
} </div>

Mohammed AbuJarour – CSS 2/2 29.10.24 39


Flexbox vs. Grid

Flexbox strengths Grid strengths


• Layout control in 1-dimension, • Layout control in 2-dimension,
vertically or horizontally vertically and horizontally
• Adjust justification and alignment • Organize elements anywhere inside
• Override alignment for child element grid cells
settings • Adjust positioning
• Override alignment on child element
settings

Mohammed AbuJarour – CSS 2/2 29.10.24 40


But which should I use — Flexbox or Grid?

• Grid is great if you can break your design into a grid


• Flexbox is great if your design spans either horizontally or vertically
• Grid allows for breakpoints in responsive design

• Grid and Flexbox are both excellent tools ➔ Pick the tools that best suit what
you’re trying to build

Mohammed AbuJarour – CSS 2/2 29.10.24 41


Advanced selectors
CSS Selectors – combinators*
* A combinator is something that explains the relationship between the selectors.

Combinator Selector Example Example description

Descendant Selects all <p> elements inside <div>


element element div p
selector (space) elements

Selects all <p> elements where the parent


Child selector (>) element>element div > p
is a <div> element

Adjacent sibling Selects all <p> elements that are placed


element+element div + p
selector (+) immediately after <div> elements

General sibling element1~element Selects every <ul> element that are


p ~ ul
selector (~) 2 preceded by a <p> element

Mohammed AbuJarour – CSS 2/2 29.10.24 43


CSS Pseudo-classes

• A pseudo-class is used to define a


special state of an element. selector:pseudo-class {
• For example, it can be used to: property: value;
}
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Mohammed AbuJarour – CSS 2/2 29.10.24 44


Previous
CSS links lecture

• Links can be styled with any CSS • The four links states are:
property (e.g., color, font-
1.a:link - a normal, unvisited link
family, background, etc.).
2.a:visited - a link the user has visited
• In addition, links can be styled
differently depending on 3.a:hover - a link when the user
what state they are in. mouse is over it
4.a:active - a link the moment it is
clicked

Mohammed AbuJarour – CSS 2/2 29.10.24 45


Previous
CSS links lecture

a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}

Mohammed AbuJarour – CSS 2/2 29.10.24 46


CSS Pseudo-classes
Selector Example Example description
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
Selects every <p> element that is the second child of its parent,
:nth-last-child(n) p:nth-last-child(2)
counting from the last child
Selects every <p> element that is the second <p> element of its
:nth-last-of-type(n) p:nth-last-of-type(2)
parent, counting from the last child
Selects every <p> element that is the second <p> element of its
:nth-of-type(n) p:nth-of-type(2)
parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent

Mohammed AbuJarour – CSS 2/2 29.10.24 47


References

• CSS:
https://www.w3schools.com/css/default.asp
• Learn to style HTML using CSS:
https://developer.mozilla.org/en-
US/docs/Learn/CSS

Mohammed AbuJarour – CSS 2/2 29.10.24 48


Let the game start

CSS
Mohammed AbuJarour – CSS 2/2 29.10.24 49
CSS Diner

• It’s a fun game to learn and


practice CSS selectors.
• To play, visit
flukeout.github.io or
cssdiner.com

Mohammed AbuJarour – CSS 2/2 29.10.24 50


CSS Exercises

• https://www.w3schools.com/css/exercise.asp

Mohammed AbuJarour – CSS 2/2 29.10.24 51


More exercises

• https://github.com/TheOdinProject/css-exercises

Mohammed AbuJarour – CSS 2/2 29.10.24 52


Exercise: Creating the Layout in CSS

• In your group, work on this exercise:


• http://web.simmons.edu/~grovesd/comm328/demo/css-exercises/simmons-
layout-exercise/

Mohammed AbuJarour – CSS 2/2 29.10.24 53

You might also like