Scribd
Upload
1 views

css advanced and basic

The document provides an overview of applying CSS to HTML, detailing three methods: inline styles, internal stylesheets, and external stylesheets, each serving different purposes. It also covers CSS selectors, common properties, the Box Model, positioning techniques, float and clear properties, and an introduction to Flexbox for layout management. Understanding these concepts enables developers to create visually appealing and well-structured web pages.

Uploaded by

gmnetwork21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

css advanced and basic

The document provides an overview of applying CSS to HTML, detailing three methods: inline styles, internal stylesheets, and external stylesheets, each serving different purposes. It also covers CSS selectors, common properties, the Box Model, positioning techniques, float and clear properties, and an introduction to Flexbox for layout management. Understanding these concepts enables developers to create visually appealing and well-structured web pages.

Uploaded by

gmnetwork21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

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 |

You might also like