Content ITV PRO
This is Itvedant Content department
Unlocking CSS' Creative Toolbox
The Flexbox Formula
Learning Outcome
1
What is flex-box & its properties?
2
How to embed videos on a webpage?
3
How to stack elements on a webpage?
Let's Embark On A Cosmic Journey By Building A Space-Themed Website!
How Can Users Be Guided Through A Website's Different Pages?
By implementing <nav> element
What Is <nav> Element?
The `<nav>` element is a semantic tag that defines navigation links or menus on a webpage
Space
Home
Explore
Event
About
<nav>
<a href="#" class="logo">Space</a>
<ul type="none">
<li><a href="">Home</a></li>
<li><a href="">Explore</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>But we want the layout of menus in a horizontal structure
How Can CSS Improve Layout Efficiently?
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
}With the help of flexbox
What is display: flex; ?
Aligns the element from left to right
Space
Home
Explore
Event
About
Lists
The lists is now arranged using flex i.e horizontally
Lets Arrange The Elements Of Nav Using Inline-Block
nav ul li {
display: inline-block;
}Space
Home
Explore
Event
About
The lists is now arranged using inline-block
How <nav> works on our website?
The <nav> Creates Clickable Links To
Other Pages
Let's Get Started With Flex-Box
What Does display-flex; Do?
Flex container i.e parent
Flex child
It turns an element into a flex container, allowing easy layout control of its children
What Is Flexbox?
Flexbox provides an efficient and flexible way to distribute space and align elements within a container
Flex container i.e parent
Flex children
Why Flexbox?
Flexible & responsive layouts
Powerful alignment capabilities
Reorder elements without changing HTML
1
4
3
5
6
2
How Can We Align Items Using Flexbox?
Flexbox provides powerful tools for aligning items within a container along the main and cross axes
Main axis
Cross axis
Combinators are symbols used to combine selectors to create more specific targeting rules.
h2 ~ p {
font-style: italic;
}General Sibling Selectors: :Target elements that are siblings of another specified element.
<h2>Heading</h2>
<p>This is selected.</p>
<p>This is also selected.</p>CSS
HTML
Combinators are symbols used to combine selectors to create more specific targeting rules.
h2 + p {
color: red;
}Adjacent Sibling Selectors :Target an element immediately preceded by a specified element.
<h2>Heading</h2>
<p>This is selected.</p>
<p>This is not selected.</p>CSS
HTML
What is attribute selector?
The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}How Can You Make Your Data More Readable?
There could be several strategies:
Font properties
Color contrast
Padding & spacing
Header styling
Alignment
Are You Making The Most Of Your Fonts?
CSS offers a wide range of font properties that allow you to customize the appearance of text within your tables
12px
16px
24px
32px
48px
font-size
normal
bold
bold
100
100
100
300
400
700
700
700
700
700
700
font-weight
How To Import & Use External Fonts?
Using the @import rule to link to the font file or utilize the font-family property with the URL of the font in the CSS file
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Ojuju:wght@200..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Russo+One&display=swap");
Source:https://fonts.google.com/Do You Know You Can Group Multiple Selectors In CSS?
.heading , h2, h3 {
color: blue;
font-family: Arial, sans-serif;
}
Class selector
Element selectors
Separating by just using a comma
The Flexbox Formula
By Content ITV
