Internet Programming I Chapter Three – CSS Basics

College of Engineering, Technology and Computational Sciences

Department of Computer Science

Course Title: Internet Programming I (COSC 2071)

Topic: CSS Basics

Topic Contents

3. CSS Basics
3.1 Cascading Style Sheet and Its Advantages
3.2 Types of Cascading Style Sheet and CSS – Inclusion
3.3 Types of Selectors
3.4 CSS Units
3.5 CSS Properties and values
3.6 CSS Layout

Objectives
After studying this chapter, you should be able to:
 Discuss about the basic concepts of CSS and types of CSS
 List and describe selector types
 Describe properties and values of CSS
 Design an attractive layout using CSS
 Style every HTML element in a way that most websites are styled

Compiled By: Ephrem Tesfaye Tsidu 1

Internet Programming I Chapter Three – CSS Basics

3.1 Cascading Style Sheet and Its Advantages

CSS defines rules specifying styles that should be applied to HTML elements or groups of
elements. With CSS, you can control the color, font, and the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or background colors
are to be used, different displays for different devices and screen sizes, and much more. Simply
speaking, CSS is a set of instructions telling the browser what to do with the HTML elements.
Example
 What the color of an element should be
 Where exactly an element should be placed on the browser
 How wide or tall an element should be
 As the name indicates, the styling in general
Note: CSS is useless without the HTML elements to apply the instructions on
Why CSS?
1. HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>this is a heading</h1>
<p>this is a paragraph</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information
were added to every single page, became a long and expensive process. To solve this problem, the
World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the
HTML page!
2. CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files. With an external stylesheet file, you
can change the look of an entire website by changing just one file!
Advantages of CSS
a) Faster Page Speed
More code means slower page speed. And CSS enables you to use less code. CSS allows you to
use one CSS rule and apply it to all occurrences of a certain tag within an HTML document.

Compiled By: Ephrem Tesfaye Tsidu 2

Internet Programming I Chapter Three – CSS Basics

b) Better User Experience

CSS not only makes web pages easy on the eye, it also allows for user-friendly formatting. When
buttons and text are in logical places and well organized, user experience improves.
c) Quicker Development Time
With CSS, you can apply specific formatting rules and styles to multiple pages with one string of
code. One cascading style sheet can be replicated across several website pages. If, for instance,
you have product pages that should all have the same formatting, look, and feel, writing CSS rules
for one page will suffice for all pages of that same type.
d) Easy Formatting Changes
If you need to change the format of a specific set of pages, it’s easy to do so with CSS. There’s no
need to fix every individual page. Just edit the corresponding CSS stylesheet and you’ll see
changes applied to all the pages that are using that style sheet.
e) Compatibility across Devices
Responsive web design matters. In today’s day and age, web pages must be fully visible and easily
navigable on all devices. Whether mobile or tablet, desktop, or even smart TV, CSS combines with
HTML to make responsive design possible.
CSS Versions
CSS3 is the official latest version of CSS. CSS3 is developed on top of the main principles of the
previous versions. It just made things simpler and added a couple of additional features. We just
focus on CSS3 as everything from the previous versions is included in it.

If you want to know more about the differences between versions, refer to this link

https://hackr.io/blog/difference-between-css-css2-and-css3

How CSS Works?

Your job is to make the browser understand what you are trying to accomplish. Your browser is
the builder. You are only allowed to send instructions on how it should build it, or technically
speaking, render it. If you follow the standard way of telling the browser what to do with your
HTML elements, it translates it to the right way and renders it in the way you want it.
You use the combination of HTML and CSS to send instructions to the browser. It is like sending
a written instruction to someone who is supposed to rearrange your house in a way you want it

Compiled By: Ephrem Tesfaye Tsidu 3

Internet Programming I Chapter Three – CSS Basics

without showing them pictures or videos, just written instruction. Let's say the person rearranging
your house only speaks English. You don't have to know or use every single English word to
effectively communicate with this person. You just use the words you know effectively. In this
case, you are directly communicating with the browser. Same concept when using CSS to instruct
the browser to style our HTML. You just use the CSS rules you know to instruct the browser.
A CSS rule consists of a selector and a declaration block.
CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.

Out
put

Compiled By: Ephrem Tesfaye Tsidu 4

Internet Programming I Chapter Three – CSS Basics

Here on the above example

 P is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

Compiled By: Ephrem Tesfaye Tsidu 5

Internet Programming I Chapter Three – CSS Basics

3.2 Types of Cascading Style Sheet and CSS – Inclusion

There are three ways of adding CSS instructions into your HTML. We will discuss those ways
below.
1. Inline
An inline style may be used to apply a unique style for a single element. To use inline styles, add
the style attribute to the relevant element. The style attribute can contain any CSS property.

2. Internal (adding CSS instructions on the HTML file/ on-file)

An internal CSS is defined in the <head> section of an HTML page, within a <style> element. An
internal style sheet may be used if one single HTML page has a unique style.

Out
put

Compiled By: Ephrem Tesfaye Tsidu 6

Internet Programming I Chapter Three – CSS Basics

3. External CSS file

This is the recommended way of including your CSS instructions on your HTML file. The main
concept is to create a separate CSS file containing all the CSS instructions and to link this CSS file
to the HTML file. We add a <link> tag in the <head> section to link our CSS file to our HTML
file. With an external style sheet, you can change the look of an entire website by changing just
one file. Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section. An external style sheet can be written in any text editor, and must
be saved with a .css extension. The external .css file should not contain any HTML tags.
Link tag usage
<link rel="stylesheet" href="mystyle.css">

Mystyle.css
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where
number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.

Compiled By: Ephrem Tesfaye Tsidu 7

Internet Programming I Chapter Three – CSS Basics

3.3 Types of Selectors

Thinking in terms of containers
The concept of wrapping elements in containers is key in mastering CSS. Note that the wrappers
or containers are HTML elements. The styling is mostly applied on them. Commonly used HTML
containers are <header>, <section>, <div> and <footer>. Before you even start writing a single
CSS instruction, make sure to focus on organizing your HTML elements. Organizing your HTML
means bundling related elements together with in a container. Try to think of the best way to group
your elements together
Naming containers and elements using id and class
One way of styling specific elements in CSS is to name your HTML elements. Naming is applied
on the HTML elements. When you name, make sure to name every container in a way that is
uniquely identifiable. It is these names we later use to specifically identify the element we want to
style. We use classes and ids for naming elements. Classes and ids are always placed in the opening
HTML tag. Please note that you can give any name you think is appropriate.
Naming elements with classes
We use the class attribute to style multiple elements on our web page. Classes are like family
names. Each element can have more than one class attribute value
Ex. <div class="text-container" >Hello</div>
Naming elements with Ids
Ids are like unique names. Use the id attribute to style one specific element on your web page.
Each element can have only one id attribute value, and the attribute value must appear only once
within the HTML file. Please remember that:
 You shouldn't have similar id names in a single page
 No element can have more than one id attribute value
Ex. <div id="text-wrapper" >Hello</div>
Selecting elements
Class selector
This is a way of selecting an HTML element using their class name. We use the dot (.) identifier
for that

Compiled By: Ephrem Tesfaye Tsidu 8

Internet Programming I Chapter Three – CSS Basics

.className {
/* Instruction goes in here */
}
ID selector
This is a way of selecting an HTML element using their id. We use the hashtag (#) identifier for
that
#id {
/* Instruction goes in here */
}
Type selector (element type selector)
A type selector (sometimes referred to as an element type selector) matches elements with the
corresponding element name, such as <p>, <span>, and <div> tags. Type selectors are generally
used to make “broad stroke” changes to the style of a site.
Example, if we want all the links on our website to be of color red, we use the following selection
and styling
a{
color: red;
}
The star/wild/universal selector
The * selector selects all elements. This is when we want to apply a certain instruction on every
single HTML element. Example, if we don't want any of the HTML elements to have a margin
(margin is just the space outside of an element's boarder), we use the * selector to make the margin
bordering ALL elements 0 like below:
*{
margin: 0;
}
Descendant selector
The next most common selector is the descendant selector. Just use space between the first and
second element. When you need to be more specific with your selectors, you use these. For

Compiled By: Ephrem Tesfaye Tsidu 9

Internet Programming I Chapter Three – CSS Basics

example, what if, rather than targeting all anchor tags, you only need to target the anchors which
are within an unordered list? This is specifically when you'd use a descendant selector.
li a {
text-decoration: none;
}
Adjacent selector
This is referred to as an adjacent selector. It will select only the element that is immediately
preceded by the former element. In this case, only the first paragraph after each ul will have red
text.
ul + p {
color: red;
}
Child Selector
The difference between the standard descendant selector (X Y) and child selector (X > Y) is that
the latter will only select direct children.
#container > ul {
border: 1px solid black;
}
Attribute Selectors
X[title]
This will only select the anchor tags that have a title attribute. Anchor tags which do not will not
receive this particular styling.
a[title] {
color: green;
}
X[href="foo"]
The snippet below will style all anchor tags which link to https://google.com; they'll receive our
branded green color. All other anchor tags will remain unaffected.
a[href="https://google.com"] {
color: #83b348; /* Envato green */}

Compiled By: Ephrem Tesfaye Tsidu 10

Internet Programming I Chapter Three – CSS Basics

X[href*="foo"]
The star designates that the proceeding value must appear somewhere in the attribute's value. That
way, style on the next example covers unitypark.et, unity.com, and even uniquesite.com
a[href*="uni"] {
color: #83b348; /* Envato green */
}
X[href^="http"]
When you need to be more specific, use ^ and $, to reference the beginning and end of a string,
respectively.
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Ever wonder how some websites are able to display a little icon next to the links which are
external? I'm sure you've seen these before; they're nice reminders that the link will direct you to
an entirely different website.
This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate
the beginning of a string. If we want to target all anchor tags that have an href which begins with
http, we could use a selector similar to the snippet shown above.
a[href$=".jpg"] {
color: red;
}
Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're
searching for all anchors which link to an image—or at least a URL that ends with .jpg. Keep in
mind that this won't capture GIF and PNG images.
Pseudo Selectors – Pseudo Classes
X:visited and X:link
We use the :link pseudo-class to target all anchor tags which have yet to be clicked on.
Alternatively, we also have the :visited pseudo class, which, as you'd expect, allows us to apply
specific styling to only the anchor tags on the page which have been clicked on, or "visited".

Compiled By: Ephrem Tesfaye Tsidu 11

Internet Programming I Chapter Three – CSS Basics

a:link { color: red; }

a:visited { color: purple; }
X:checked
This pseudo class will only target a user interface element that has been checked—like a radio
button or checkbox. It's as simple as that.
input[type=radio]:checked {
border: 1px solid black;
}
X:hover
The official term for this is "user action pseudo class". It sounds confusing, but it really isn't. Want
to apply specific styling when a user hovers over an element? This will get the job done!
div:hover {
background: #e3e3e3;
}
You'll most often use this selector when applying, for example, a border-bottom to anchor tags,
when hovered over.
a:hover {
border-bottom: 1px solid black;
}
X:not(selector)
The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the
one which has an id of container. The snippet below will handle that task perfectly.
div:not(#container) {
color: blue;
}
Pseudo Selectors – Pseudo Elements
X::pseudoElement
We can use pseudo elements (designated by ::) to style fragments of an element, such as the first
line or the first letter. Keep in mind that these must be applied to block-level elements in order to
take effect.

Compiled By: Ephrem Tesfaye Tsidu 12

Internet Programming I Chapter Three – CSS Basics

p::first-line {
font-weight: bold;
font-size: 1.2em;
}
p::first-letter {
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
p::first-line {
font-weight: bold;
font-size: 1.2em;
}

Compiled By: Ephrem Tesfaye Tsidu 13

Internet Programming I Chapter Three – CSS Basics

3.4 CSS Units

Having a clear understanding of the measuring units is the bases for any design and styling job.
There are a couple of commonly used measurement units in CSS. The most common one is the
pixel (px). It is the size of 1/96th of an inch (0.26mm). You must train your brain to think in terms
of pixels from now on.
Other commonly used units include:
 Percentage %: this is when you want to describe your element in relation with other
elements, usually the containing elements
 em and rem: these are usually used to define font sizes, and both are scalable units of size.
The em unit is relative to the font size of its parent element. In the example below, the child
will have a font-size of 36px (2 * 18px = 36px)
.parent { font-size: 18px;}
.child {font-size: 2em;}
 The rem unit, short for root em, is a relative unit that’ll always be based upon the font-
size value of the root element, which is the <html> element. And if the <html> element
doesn’t have a specified font-size, the browser default of 16px is used. So that means that,
by using the rem unit, the values of parent elements are ignored, and only the value of the
root is taken into consideration. If look at the following example, the child will have a font
size of 32px (2 * 16px = 32px)
.html {font-size: 16px;}
.parent {font-size: 15px;}
.child-rem {font-size: 2rem;}

Compiled By: Ephrem Tesfaye Tsidu 14

Internet Programming I Chapter Three – CSS Basics

3.5 CSS Properties and values

We have seen that a CSS rule consists of a selector and a declaration block. In the example below,
h1 is the selector, everything within the curly braces is the declaration block, color is the property
and blue is the value.
h1 {
color: blue;
}
The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties
specifies what to style of the targeted HTML elements. Be aware that any syntax error in a rule
definition invalidates the entire rule. Invalid rules are ignored by the browser.
CSS properties are like words in a language. You don't have to know every single word in the
dictionary to form a sentence and communicate. The more words you know the better. But the key
is in effectively using the ones you know. The most important CSS properties include display,
width, height, margin, padding, color, background and font.
Color
The color property allows you to specify the color of text inside an element. You can specify any
color in CSS in one of three ways:
 rgb values
These express colors in terms of how much red, green and blue are used to make it up.
For example: rgb(100,100,90)
 hex codes
These are six-digit codes that represent the amount of red, green and blue in a color, preceded by
a pound or hash # sign.
For example: #ee3e80
 color names
There are 147 predefined color names that are recognized by browsers.
For example: DarkCyan

Compiled By: Ephrem Tesfaye Tsidu 15

Internet Programming I Chapter Three – CSS Basics

Background
The background property is used to set the background of an HTML element. Please note that, the
background of an element can be an image or color. The background property can be a shorthand
property for the following sub-properties:
 background-color (specifies the background color to be used)
 background-image (specifies ONE or MORE background images to be used)
 background-position (specifies the position of the background images)
 background-size (specifies the size of the background images)
Example on how to set different background properties in one declaration
body {
background: green url("img_tree.gif") center cover;
}
Display property
The display CSS property determines how an element is going to be displayed on a browser. The
property sets whether an element is treated as a block or inline element. By default, the block mode
is assumed. Below are the most common values for display property:
 block (this causes an inline element to act like block-level element. It makes an inline
element start on a new line and take up take up as much horizontal space as it can
Example: span {display: block} makes all spans to start on a new line and take up take up
as much horizontal space as they can
 inline (this causes a block-level element to act like an inline element)
Example: p{display: inline} causes all your paragraphs to display on the same line
 inline-block (this causes the block-level element to act like an inline element, but inline-
block allows for additional width and height properties to be applied to the element)
 none (this causes the element to be completely removed)
 Flex (a flex container expands items under it to fill available free space or shrinks them to
prevent overflow. The width of flex items automatically adjusts to fit inside the container.)

Compiled By: Ephrem Tesfaye Tsidu 16

Internet Programming I Chapter Three – CSS Basics

Compiled By: Ephrem Tesfaye Tsidu 17

Internet Programming I Chapter Three – CSS Basics

Position property

The position CSS property sets how an element is positioned in a document. Elements are then
positioned using the top, bottom, left, and right properties. Note: top, bottom, left and right
properties will not work unless the position property is first set. The most common types of
positioning in CSS are:

 static: this is the default value, meaning, is not positioned in any special way; it is always
positioned according to the normal flow of the page.
 fixed: the element is positioned related to the to the viewport or browser window. This
means that, it always stays in the same place even if the page is scrolled. The top, right,
bottom, and left properties are used to position the element.
 relative: the element is positioned relative to its normal position. Setting the top, right,
bottom, and left properties of a relatively positioned element will cause it to be adjusted
away from its normal position
 absolute: positioned relative to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed position)

Width and Height

Width and height properties are used closely with display:block and display:inline to set the width
and height of HTML elements while creating a website. Common units units for Width and Height
are:

px - Pixels.

em - A unit of measurement, where 1 em = current font size.

rem - Root em. Same measurement as em, but makes life much easier without the inheritance
problem

% - Percentages.

Compiled By: Ephrem Tesfaye Tsidu 18

Internet Programming I Chapter Three – CSS Basics

max-width vs width

max-width: it sets the maximum width an element can have. When the width of the browser
window/viewport is smaller than the specified width of an element, the browser adds a horizontal
scroll bar to allow us to view the element by scrolling to the side. In such cases, it is better to use
max-width to set the width of the element not to be above the width of the browser/viewport.

width: if an element has a width less than the browser’s/viewport’s width, the width property will
be used as opposed to the max-width property.

Font

The CSS font property is used to change the face of the font of a text. The font property can be a
shorthand property for the following sub-properties:

 font-style: the font-style CSS property sets whether a font should be styled with a normal,
italic, or oblique face from its font-family
 font-weight: the font-weight CSS property sets the weight (or boldness) of the font. The
weights available depend on the font-family that is currently set.
 font-size: the font-size CSS property sets the size of the font. Changing the font size also
updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.
 font-family: the font-family CSS descriptor allows authors to specify the font family for
the font specified in an @font-face rule.
 The @font-face: the CSS at-rule specifies a custom font with which to display text; the
font can be loaded from either a remote server or a locally installed font on the user's own
computer. See the example below:

@font-face {

font-family: "Open Sans";

src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),

url("/fonts/OpenSans-Regular-webfont.woff") format("woff");

Compiled By: Ephrem Tesfaye Tsidu 19

Internet Programming I Chapter Three – CSS Basics

Text

The text-transform property is used to change the case of text giving it one of the followingvalues:

 Uppercase: This causes the text to appear uppercase.

 Lowercase: This causes the text to appear lowercase.
 Capitalize: This causes the first letter of each word to appear capitalized.

The text-decoration property allows you to specify the following values:

 None: This removes any decoration already applied to the text.

 Underline: This adds a line underneath the text.
 Overline: This adds a line over the top of the text.
 Line-through: This adds a line through words.
 Blink: This animates the text to make it flash on and off (however this is generally frowned
upon, as it is considered rather annoying).

The text-align property allows you to control the alignment of text. The property can take one of
four values:

 Left: This indicates that the text should be left-aligned.

 Right: This indicates that the text should be right-aligned.
 Center: This allows you to center text.

Border

The border-width property is used to control the width of a border. The value of this property can
either be given in pixels or using one of the following values:

 thin
 medium
 thick
 pixels

Compiled By: Ephrem Tesfaye Tsidu 20

Internet Programming I Chapter Three – CSS Basics

You can control the style of a border using the border-style property. This property can take the
following values:

1. solid a single solid line

2. dotted a series of square dots (if your border is 2px wide, then the dots are 2px squared
with a 2px gap between each dot)
3. dashed a series of short lines
4. double two solid lines (the value of the border-width property creates the sum of the two
lines)
5. groove appears to be carved into the page
6. ridge appears to stick out from the page
7. inset appears embedded into the page
8. outset looks like it is coming out of the screen
9. hidden / none no border is shown

Margin and Padding

The padding property allows you to specify how much space should appear between the content
of an element and its border.

You can specify different values for each side of a box using:

 padding-top
 padding-right
 padding-bottom
 padding-left

Or you can use a shorthand (where the values are in clockwise order: top, right, bottom, left):
padding: 10px 5px 3px 1px;

The margin property controls the gap between boxes. Its value is commonly given in pixels. You
can specify values for each side of a box using:

 margin-top
 margin-right

Compiled By: Ephrem Tesfaye Tsidu 21

Internet Programming I Chapter Three – CSS Basics

 margin-bottom
 margin-left

You can also use the shorthand (where the values are in clockwise order: top, right, bottom, left):

margin: 1px 2px 3px 4px;

Sometimes you might see the following, which means that the left and right margins should be 10
pixels and the top and bottom margins should be 20 pixels:

margin: 10px 20px;

(This same shorthand shown above can also be applied to padding.)

Compiled By: Ephrem Tesfaye Tsidu 22

Internet Programming I Chapter Three – CSS Basics

3.5 CSS Layout

Multicolumn Layouts Using Floats

Floats are the primary tool for creating columns on web pages.

The strategy

Set widths on both column elements and float them to the left. Clear the footer to keep it at the
bottom of the page. The underlying structure and resulting layout is shown in the next Figure.

The markup

<div id="header">Masthead and headline</div>

<div id="main">Main article</div>
<div id="extras">List of links and news</div>
<div id="footer">Copyright information</div>

The styles

#main {
float: left;
width: 60%/650px;
margin: 0 5%;
}
#extras {
float: left;
width: 25%/250px;
margin: 0 5% 0 0;
}
#footer {
clear: left;
}

Compiled By: Ephrem Tesfaye Tsidu 23

Internet Programming I Chapter Three – CSS Basics

Note

 The source document has been divided into four divs, one each for the header, main
content, extras, and footer. The markup shows the order in which they appear in the source.
 Both #main and #extras have been floated to the left. Because they are floats, widths were
specified for each. You can make your columns as wide as you like.
 The #main element has a 5% margin applied on the left and right sides.
 The #extras element only needs a margin on the right. The margins on the top have been
set to zero so they vertically align.
 The #footer is cleared so it starts below the floated content.

Grid Layout

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in
rows and columns. It has many features that make building complex layouts straightforward. A
grid is a collection of horizontal and vertical lines creating a pattern against which we can line up
our design elements. A grid will typically have columns, rows, and then gaps between each row
and column. The gaps are commonly referred to as gutters.

 To define a grid we use the grid value of the display property.

.container {
display: grid;
}
 To see something that looks more grid-like, we'll need to add some columns to the grid.
Let's add three 200-pixel columns. You can use any length unit or percentage to create
these column tracks.

.container {

display: grid;

grid-template-columns: 200px 200px 200px;

Compiled By: Ephrem Tesfaye Tsidu 24

Internet Programming I Chapter Three – CSS Basics

 Flexible grids with the fr (fraction) unit. In addition to creating grids using lengths and
percentages, we can use fr. The fr unit represents one fraction of the available space in the
grid container to flexibly size grid rows and columns. Change your track listing to the
following definition, creating three 1fr tracks:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
 You now have flexible tracks. The fr unit distributes space proportionally. You can specify
different positive values for your tracks like so:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
The first track gets 2fr of the available space and the other two tracks get 1fr, making the
first track larger.
 You can mix fr units with fixed length units. In this case, the space needed for the fixed
tracks is used up first before the remaining space is distributed to the other tracks.
 To create gaps between tracks, we use the properties:
 column-gap for gaps between columns
 row-gap for gaps between rows
 gap as a shorthand for both

.container {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

gap: 20px;

Compiled By: Ephrem Tesfaye Tsidu 25

Internet Programming I Chapter Three – CSS Basics

 You can repeat all or merely a section of your track listing using the CSS repeat() function.
Change your track listing to the following:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

You'll now get three 1fr tracks just as before. The first value passed to the repeat() function
specifies the number of times you want the listing to repeat, while the second value is a track
listing, which may be one or more tracks that you want to repeat.

 We now move on from creating a grid to placing things on the grid. Our grid always has
lines — these are numbered beginning with 1. For example, column line 1 (written left-to-
right) would be on the left-hand side of the grid and row line 1 at the top.
 We can arrange things in accordance with these lines by specifying the start and end line.
We do this using the following properties:
 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end
 These properties can all have a line number as their value. You can also use the shorthand
properties:
 grid-column
 grid-row
 These let you specify the start and end lines at once, separated by a forward slash /.

header {
grid-column: 1 / 3;
grid-row: 1;
}

Compiled By: Ephrem Tesfaye Tsidu 26

Internet Programming I Chapter Three – CSS Basics

article {
grid-column: 2;
grid-row: 2;
}

aside {
grid-column: 1;
grid-row: 2;
}

footer {
grid-column: 1 / 3;
grid-row: 3;
}
 The grid-area property can be used as a shorthand property for the grid-row-start, grid-
column-start, grid-row-end and the grid-column-end properties.
Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column
line 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}

Flex Layout

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
without using float or positioning.

 To start using the Flexbox model, you need to first define a flex container. The element
below represents a flex container with three flex items

Compiled By: Ephrem Tesfaye Tsidu 27

Internet Programming I Chapter Three – CSS Basics

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

 The flex container becomes flexible by setting the display property to flex:
.flex-container {
display: flex;
}
 The flex container properties are:
 flex-direction : Values (column, column-reverse, row, row-reverse)
 flex-wrap : Values (wrap, no-wrap, wrap-reverse)
 flex-flow : The flex-flow property is a shorthand property for setting both the flex-
direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
 justify-content : Values(center, flex-start, flex-end, space-around, space-between)
 align-items : Values(center, flex-start, flex-end, stretch)
 align-content : Values(center, flex-start, flex-end, space-around, space-between)

NB: Set both the justify-content and align-items properties to center, and the flex item will be
perfectly centered:

Compiled By: Ephrem Tesfaye Tsidu 28

Internet Programming I Chapter Three – CSS Basics

Reference Materials
 CSS Versions

https://hackr.io/blog/difference-between-css-css2-and-css3

 CSS Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

 CSS Units

https://www.freecodecamp.org/news/css-unit-guide/

https://www.w3schools.com/cssref/css_units.php

 CSS Properties and Values

https://www.w3schools.com/cssref/index.php

https://zellwk.com/blog/9-important-css-properties-you-must-know/

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://www.w3schools.com/css/css_positioning.asp

 CSS Colors

https://www.w3.org/wiki/CSS/Properties/color/keywords

_______________The End!_______________

Compiled By: Ephrem Tesfaye Tsidu 29