GM Networks
Lesson 7.1 - Applying CSS To HTML
There are three methods to apply CSS to HTML documents: Inline
styles, Internal stylesheets, and External stylesheets. Each method
serves different purposes and offers varying levels of flexibility and
scalability.
Inline Styles
Inline styles allow you to apply styles directly to HTML elements
using the style attribute. This method is suitable for applying unique
styles to individual elements.
<p style="color: blue; font-size: 20px;">This is a text.</p>
Internal Stylesheets
Internal stylesheets are defined within the <style> tag inside the
HTML document's <head> section. This method is useful for styling
a single webpage.
<!DOCTYPE html>
<html>
<head>
<title>List of Fruits</title>
<style>
GM Networks© 2016 E.c Page
GM Networks
body {
background-color: lightgrey;
h1 {
color: blue;
p{
font-size: 20px;
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph styled with an internal stylesheet.</p>
</body>
</html>
GM Networks© 2016 E.c Page
GM Networks
External Stylesheets
External stylesheets allow you to create separate CSS files. The
HTML document links to this CSS file using the <link> tag in
the <head> section. This method is ideal for styling multiple web
pages consistently and efficiently, making it suitable for large
projects.
Example of an External CSS file:
File name: styles.css
body {
background-color: lightgrey;
h1 {
color: blue;
p{
font-size: 20px;
GM Networks© 2016 E.c Page
GM Networks
Linking the External CSS file in your HTML document:
File name: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>My First Website</title>
</head>
<body>
<h1>My First Website</h1>
<p>This is a paragraph styled with an external stylesheet.</p>
</body>
</html>
Using external stylesheets helps maintain a consistent design across
multiple web pages and improves the maintainability of your project
by separating content and presentation.
6.1 Types Of CSS Selectors
CSS selectors enable you to specify which HTML elements to style. There
are different types of selectors, each serving a specific purpose:
1. Element Selector: Targets all instances of a specified HTML
element.
GM Networks© 2016 E.c Page
GM Networks
This CSS block makes all <p> (paragraph) elements display blue text.
Class Selector: Targets elements with a specific class attribute. Classes
can be reused on multiple elements.
1. Here, the. intro class applies a font size of 20 pixels to any element
that has this class.
2. ID Selector: Targets an element with a specific id attribute. IDs
should be unique within a page.
1. This CSS rule makes the element with the id mainHeader have
green text.
GM Networks© 2016 E.c Page
GM Networks
2. Universal Selector: Targets all elements on a webpage.
1. Here, * selects all elements and sets their margins and padding to
zero, with red text color.
2. Attribute Selector: Targets elements based on the presence or
value of a given attribute.
This CSS selector makes all links (<a> tags) that open in a new tab
(target="_blank") have red text.
6.2 Common CSS Properties
CSS properties define the styles you want to apply to the selected
elements. Here are some common CSS properties:
1. Color: Sets the text color of an element.
GM Networks© 2016 E.c Page
GM Networks
This will make the text in all <p> elements blue.
2. Font-size Sets the size of the text element.
This will make the text in all <p> elements 20 pixels high.
3. Background-color Sets the background color of an element.
This will make the background color of the paragraph element.
4. Margin Sets the space outside the border of an element.
GM Networks© 2016 E.c Page
GM Networks
This will add 20 pixels of space around all <h1> elements.
5. Padding Sets the space inside the border of an element.
This will add 15 pixels of space inside all <div> elements, between
the content and the border.
6. Border Sets the border around an element.
This will add a 1-pixel solid black border around all <p> elements.
7. Width and Height Sets the width and height of an element.
GM Networks© 2016 E.c Page
GM Networks
This will set the width of all <div> elements to 200 pixels and the
height to 100 pixels.
8.1 Understanding The Box Model
In CSS, every element is treated as a box. Understanding the Box
Model is essential as it defines the space an element occupies on a
webpage, encompassing its content, padding, border, and margin.
This knowledge enables precise control over layout and spacing of
elements.
Components of the Box Model:
1. Content: The innermost area of the box where text or images are
displayed.
2. Padding: Space between the content and the border. Padding adds
internal spacing within the element, around its content.
3. Border: The line that surrounds the padding and content. Borders
can have various styles, widths, and colors, defining the outer edge
of the element.
4. Margin: The space outside the border. Margins create distance
between the element and other elements on the page, contributing
to layout spacing.
Visual Representation:
GM Networks© 2016 E.c Page
GM Networks
This diagram illustrates how the Box Model components (content,
padding, border, and margin) interact to define the dimensions and
spacing of an element on a webpage. Mastery of the Box Model
empowers developers to create well-structured and visually
appealing layouts in CSS.
8.2 CSS Box Model Properties
Turn On Audio
In this lesson we will discuss some commonly used properties for
styling elements with the CSS Box Model:
1. Margin The margin property controls the space outside the border
of an element. You can set margins individually for each side or use
shorthand notation to set them all at once.
2. div {
3. margin-top: 20px;
4. margin-right: 15px;
5. margin-bottom: 20px;
GM Networks© 2016 E.c Page |
GM Networks
6. margin-left: 15px;
Shorthand notation:
div {
margin: 20px 15px 20px 15px;
7. Padding The padding property controls the space between the
content and the border of an element. Similar to margins, you can
specify padding individually for each side or use shorthand notation.
8. div {
9. padding-top: 20px;
10. padding-right: 15px;
11. padding-bottom: 20px;
12. padding-left: 15px;
Shorthand notation:
div {
padding: 20px 15px 20px 15px;
13. Border The border property allows you to define the style,
width, and color of the border around an element. You can set these
properties individually for each side or use shorthand notation.
14. div {
15. border-width: 2px;
16. border-style: solid;
GM Networks© 2016 E.c Page |
GM Networks
17. border-color: green;
Shorthand notation:
div {
border: 2px solid green;
18. Width and Height The width and height properties control
the size of the content area of an element, excluding padding,
borders, and margins.
19. div {
20. width: 200px;
21. height: 100px;
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 250px;
height: 150px;
padding: 20px;
border: 5px solid green;
margin: 30px;
background-color: lightblue;
GM Networks© 2016 E.c Page |
GM Networks
</style>
</head>
<body>
<div class="box">This is a box with padding, border, and
margin.</div>
</body>
</html>
The .box class defines a box element with specific dimensions,
padding, border, margin, and background color.
Adjustments to margin, padding, border, width, and height
properties allow for precise control over the appearance and
spacing of elements on the webpage.
Understanding and utilizing these properties effectively enables you
to create visually appealing and well-structured layouts in CSS
CSS Positioning
GM Networks© 2016 E.c Page |
GM Networks
This chapter covers various CSS positioning techniques briefly.
1. Static Positioning Static positioning is the default for all HTML
elements. Elements are positioned according to the normal flow of
the document.
Code Editor (HTML)
<style>
#mydiv {
position: static;
/* Left, top, right, and bottom properties have no effect in static
positioning */
left: 10px;
</style>
<div>First Div</div>
<div id="mydiv">Second Div</div>
<div>Third Div</div>
2. Relative Positioning Relative positioning allows you to move an
element relative to its original position in the document flow. You
GM Networks© 2016 E.c Page |
GM Networks
can use the top, right, bottom, and left properties to adjust its
position.
<style>
#mydiv {
position: relative;
top: 2px;
left: 30px;
</style>
<div>First Div</div>
<div id="mydiv">Second Div</div>
<div>Third Div</div>
In this example, the #mydiv element is moved 20 pixels down and
30 pixels to the right from its normal position.
3. Absolute Positioning Absolute positioning removes an element
from the normal document flow and positions it relative to the
nearest positioned ancestor (an element with
position: relative, absolute, or fixed). If no such ancestor exists, it is
GM Networks© 2016 E.c Page |
GM Networks
positioned relative to the initial containing block (usually
the <html> element).
<style>
#mydiv {
position: absolute;
top: 50px;
left: 100px;
</style>
<div>First Div</div>
<div id="mydiv">Second Div</div>
<div>Third Div</div>
In this example, the #mydiv element is positioned 50 pixels from
the top and 100 pixels from the left of its containing block.
4. Fixed Positioning Fixed positioning removes an element from the
normal document flow and positions it relative to the browser
window. It remains in the same position even when the page is
scrolled.
<style>
GM Networks© 2016 E.c Page |
GM Networks
#mydiv {
position: fixed;
top: 0;
right: 0;
</style>
<div>This is a DIV element</div>
In this example, the #mydiv element is positioned at the top-right
corner of the browser window and remains there even when
scrolling.
Float And Clear Properties
The float property allows you to position elements to the left or right
within their container, while the clear property ensures proper
alignment of subsequent elements.
1. Float The float property enables you to wrap text around an
element or create a column layout within its container.
<style>
div {
GM Networks© 2016 E.c Page |
GM Networks
float: right;
width: 50%;
</style>
<div>This is a DIV element floated to the right.</div>
In this example, the div element is floated to the right within its
container, taking up 50% of the container's width.
2. Clear The clear property prevents elements from wrapping around
floated elements by specifying which sides of an element need to be
clear of floats.
<style>
.left {
float: left;
width: 50%;
background-color: lightblue;
.right {
float: right;
width: 50%;
GM Networks© 2016 E.c Page |
GM Networks
background-color: lightgreen;
.clear {
clear: right;
</style>
<div class="left">This is a left-floated element.</div>
<div class="right">This is a right-floated element.</div>
<div class="clear">This paragraph appears below the floated
elements due to the clear property.</div>
Here, the .clear class ensures that the paragraph appears below
both the left-floated and right-floated elements.
10.1 Introduction To Flexbox
Flexbox is a powerful layout model in CSS that simplifies the
creation of complex web layouts. It allows you to efficiently arrange,
GM Networks© 2016 E.c Page |
GM Networks
align, and distribute space among elements within a container,
regardless of their varying sizes or content.
Imagine you have a container (flex-container) and inside it are
several elements (flex-item), like boxes on a shelf. Flexbox enables
you to control how these boxes are positioned and aligned within
the shelf.
Understanding How Flexbox Works:
To begin using Flexbox, you designate a container as a flex
container by setting its display property to flex or inline-flex. This
simple declaration activates Flexbox capabilities for that container:
<style>
.flex-container {
display: flex;
/* or */
display: inline-flex;
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
GM Networks© 2016 E.c Page |
GM Networks
<div class="flex-item">Item 3</div>
</div>
In this example:
The flex-container becomes a flex container, and any direct child
elements (flex-item) automatically become flex items.
By default, flex items flow horizontally in a row. You can change this
direction using the flex-direction property to create a vertical
column layout if needed.
<style>
.flex-container {
display: flex;
flex-direction: column; /* Arrange items vertically */
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
GM Networks© 2016 E.c Page |
GM Networks
<div class="flex-item">Item 3</div>
</div>
Key Concepts of Flexbox:
Flexbox introduces two main axes:
Main Axis: This axis runs in the primary direction defined by flex-
direction. It determines how flex items are laid out horizontally (row)
or vertically (column).
Cross Axis: Perpendicular to the main axis, the cross axis allows for
additional alignment and spacing control of flex items.
Example: Aligning Items
To align items within a flex container:
Use justify-content to align items along the main axis (horizontally
for rows, vertically for columns).
Use align-items to align items along the cross axis (vertically for
rows, horizontally for columns).
<style>
.flex-container {
height: 200px;
display: flex;
GM Networks© 2016 E.c Page |
GM Networks
justify-content: center; /* Center items along the main axis */
align-items: center; /* Center items along the cross axis */
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
Flexbox also supports wrapping of items onto new lines with flex-
wrap, allowing for responsive layouts that adjust automatically
based on available space.
Benefits of Flexbox:
Responsive Design: Easily adapts to different screen sizes and
orientations.
Simplified Layout: Reduces the need for floats and positioning
hacks.
GM Networks© 2016 E.c Page |
GM Networks
Efficient Alignment: Streamlines alignment and spacing control of
elements.
Maintainable Code: Enhances code readability and maintainability
by centralizing layout logic.
Flexbox empowers developers to create modern and responsive
web layouts efficiently, offering a robust set of tools to manage the
arrangement and appearance of elements within a container.
10.2 Advance Flexbox Styles
Mastering Advanced Flexbox Techniques
In this chapter, we delve deeper into Flexbox with advanced
examples and techniques to harness its full potential.
1. Nested Flexboxes for Complex Structures
Leverage nested flex containers to create intricate layouts and
hierarchical structures with ease:
<style>
.outer-container {
display: flex;
justify-content: space-between;
.inner-container {
display: flex;
flex-direction: column;
</style>
<div class="outer-container">
GM Networks© 2016 E.c Page |
GM Networks
<div class="inner-container">
<div class="flex-item">Subitem 1</div>
<div class="flex-item">Subitem 2</div>
</div>
<div class="inner-container">
<div class="flex-item">Subitem 3</div>
<div class="flex-item">Subitem 4</div>
</div>
</div>
2. Advanced Flex Item Customization
Flex items inherit properties from their parent container and can be
individually tailored for precise layout control:
<style>
.flex-container {
display: flex;
justify-content: space-around;
GM Networks© 2016 E.c Page |
GM Networks
align-items: center;
background-color: #f0f0f0;
padding: 20px;
.flex-item {
flex: 1 0 auto; /* Flex-grow, flex-shrink, flex-basis */
align-self: center; /* Overrides align-items for specific item */
margin: 10px;
padding: 20px;
background-color: #3498db;
color: white;
text-align: center;
.flex-item:nth-child(odd) {
background-color: #2ecc71;
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
GM Networks© 2016 E.c Page |
GM Networks
</div>
GM Networks© 2016 E.c Page |
GM Networks
GM Networks© 2016 E.c Page |
