Start Your Developer Journey Building Your Portfolio - CSS (contd)
PART IV - CSS continued
This is the fourth of a series of lessons to help you on your journey to being a developer without a computer science degree. Start here for an understanding of how we got here.
In this lesson, we will be continuing the basics of CSS.
Font Properties
- Font Family: Defines the typeface for text, e.g: Montserrat or Times New Roman. It's recommended to provide a fallback font family in case the preferred one is not available.
- Font stacks are lists of fonts defined in order of preference. If the browser doesn't support the first font, it moves on to the next one in the stack.
body {
font-family: Arial, Helvetica, sans-serif;
}
- **Web safe fonts** are fonts that are commonly available across different operating systems and devices. They include
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive).
If a user's system doesn't have the specified font, it falls back to a similar font (in parenthesis).
To use a custom font, get the link to the font library and insert it within your head tags before declaring your styles or linking your style document
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
-
Font Size: Determines the size of the text. Common units for font size include pixels (
px), ems (em), and percentages(%). -
Font Weight: Controls the thickness of the text. Common values are
normal,bold,lighter, and numeric values. -
Font Style: Specifies the style of the font, such as
normal,italic, oroblique.
Line Height and Letter Spacing
-
Line Height: Specifies the space between lines of text. It helps improve readability and aesthetics.
-
Letter Spacing: Adjusts the space between individual characters.
Positioning
-
Static Positioning: Default positioning where elements are rendered in their normal order in the document flow. Elements are renderedv in the order they are in the html document.
-
Relative Positioning: Allows elements position to be relative to their normal position.
-
Absolute Positioning: Takes an element out of the normal document flow and positions it relative to its nearest positioned ancestor or the containing block. This implies that the position of the element depends on its closest ancestor that has position of relative. If its parent or ancestor is not positioned relative, its position will be relative to the body tag(which is the first ancestor
-
Fixed Positioning: Positions an element relative to the browser window. It stays in the same positon even when scrolling.
-
Sticky Positioning: Combines elements of both
relativeandfixedpositioning. It behaves likerelativeuntil the element reaches a certain scroll point, then it becomesfixed.
element {
position: static;
}
Floating Elements and Clearing Floats
Floating elements are removed from the normal flow and positioned to the left or right within their parent element. They're often used for wrapping text around images.
Floating elements can lead to layout issues. To prevent these issues, using clear on the floats is important. You can use the clear property to prevent elements from floating next to a floated element.
Display Property and Values
The display property controls how an element is rendered or shows on the page.
- block: Elements take up the full width and stack vertically, like paragraphs, headings, and divs. They do not sit next to other elements, a line break is introduced.
- inline: Elements only take up the space they need and don't cause line breaks, like spans and links; they stay side-by-side neighbouring elements.
- inline-block: Elements are inline but can have width and height properties applied.
- none: Elements are not displayed at all, they are hidden.
- flex: Elements within the element are flexible and adjust to fit in the parent element.
element {
display: inline-block;
}
Flexbox Layout Model
Flexbox is a powerful layout model designed for creating flexible and efficient layouts.
- Flex Container is the parent element that contains flex items. This is usually a
divelement. - Flex Items are the children of the flex container. They are arranged in a row or column.
Flexbox properties include flex-direction, justify-content, align-items, and more. It simplifies complex layouts and handles alignment, distribution, and order of flex items. To use it, you give the flex-container a display of flex.
flex_container_div {
display: flex;
flex-direction: row;
}
CSS Grid Layout Model
CSS Grid is a two-dimensional layout system that allows you to create grid-based layouts with rows and columns.
- Grid Container: The parent element that becomes a grid layout.
- Grid Items: The children of the grid container that fit into the grid cells.
Properties like grid-template-columns, grid-template-rows, and grid-gap help define the layout. CSS Grid is particularly useful for designing complex, responsive layouts.
.grid-container {
height: 100px;
display: grid;
grid-template-rows: repeat(2, 70px);
grid-auto-flow: column;
grid-gap: 20px;
}
.grid-item {
background-color: #927253;
border: 1px solid red;
}
The above grid-container is styled to have 2 rows and each row is to have a height of 70px grid-template-rows: repeat(2, 70px);. The grid container is to be filled up by as many grid items as available into new coulms grid-auto-flow: column;. The space between each row and each column should be 20px grid-gap: 20px;
NOW FOR THE FUN PART!!
In our index.html file let's add to our CSS styles.
We want
- main_wrap class to have a width of 70% and not fill the entire screen width, a 15% margin to the left and right to move the elemnt to the center, and a flex property.
- info_wrap class to have a width of 50% so it takes only half of the main_wrap width
- title_text class to have it text aligned to the center, a font-size of 24px
<style>
* {
box-sizing: border-box;
margin: 0
}
.main_wrap {
width: 70%;
margin-left: 15%;
margin-right: 15%;
margin-top: 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.info_wrap {
width: 50%;
}
.title_text {
background-color: purple;
color: white;
text-align: center;
font-size: 24px;
margin-bottom: 18px;
text-transform: uppercase;
padding: 3px;
max-width: fit-content;
border-radius: 3px;
}
.passionate_text {
color: black;
font-weight: thin;
}
.passions {
color: purple;
margin-bottom: 30px;
}
a {
text-decoration: none;
}
.resume_link {
color: white;
background-color: blue;
padding: 10px;
border-radius: 4px;
}
.project_link {
color: blue;
background-color: white;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: blue;
border-radius: 4px;
}
.img_div_wrap {
width: 50%;
}
</style>
You should be loving how your creation is coming in the preview tab opened
UPDATING THE REPO
We will be updating our repository with the task we have completed so far.
Save the index.html document
In our terminal, run the following
git add index.html
git commit -m 'added more styles'
git push
ADIEU!
Our portfolio is now coming up! Feel free to experiment with the colors and styles you will like to have in your portfolio 😉. In the next lesson, we will continue CSS. Until then, have fun!
FURTHER READING AND REFERENCES
my_portfolio
W3Schools
mozilla
RELATED POSTS
PREV <--------------------------------------------------------> NEXT
