Start Your Developer Journey Building Your Portfolio - CSS BASICS
PART III - CSS BASICS
This is the third 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 covering the basics of CSS.
CSS stands for Cascading Style Sheets. It is a language that is used to control the HTML elements on a web page look like. With CSS, you can define how elements should be presented, for instance, the colors, fonts, spacing, layout, etc. It is used to give your web page a user-friendly appearance
STRUCTURE WITH HTML
You can use CSS in your HTML document in the following ways:
- INLINE: This way, your CSS code is written as attributes to your HTML elements.
In the code below,style="font-size:18px;color:purple;"means that the paragraph element should be given a font size of 18px and a color of purple.
<p style="font-size:18px;color:purple;"></p>
- INTERNAL: This way, your CSS code is written within the head tags of your HTML document inside style tags(<style></style>
h1 {
color: green;
}
.short_paragraphs {
font-size:18px;
color:purple;
}
The code snippet above also means that the element with the h1 tag should have a color of green and the element with a class (.) of short_paragraphs should be given a font size of 18px and a color of purple.
<!DOCTYPE html>
<html>
<head>
<title>My CSS Example</title>
<style>
h1 {
color: green;
}
.short_paragraphs {
font-size:18px;
color:purple;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p class="short_paragraphs">This is a paragraph with some text.</p>
</body>
</html>
- EXTERNAL: In this case, you create a new document with the extension .css and place your styles in the document like you have it within style tags then you place a link to the document inside your HTML document. This way, the HTML document knows where to get the styles from.
If, for instance, you create a file called my_design.css in the same folder where you have your HTML file, within your head tags, you will link your style as:<link rel="stylesheet" type="text/css" href="my_design.css">. Then inside my_design.css you place your CSS codes
#main_head {
color: green;
}
p {
font-size:18px;
color:purple;
}
The above code snippet also means that the element with an id (#) of main_head should be given a color of green and the paragraph element should be given a font size of 18px and a color of purple.
<!DOCTYPE html>
<html>
<head>
<title>My CSS Example</title>
<link rel="stylesheet" type="text/css" href="my_design.css">
</head>
<body>
<h1 id="main_head">Hello, CSS!</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
CSS Selectors and Declarations
CSS uses selectors and declarations. Selectors are used to target HTML elements e.g: .short_paragraphs, p, h1, #main_head. declaration blocks {} contain one or more declarations and they define how those elements should be styled. Each declaration consists of a property and a value, separated by a colon and terminated with a semicolon.
selector {
property: value;
}
- **Element Selectors** target elements by their HTML tag name (e.g. `p`, `h1`, `div`).
- **Class Selectors** target elements by their class attribute (e.g. short_paragraphs). You can have multiple elements with the same class name and so using class selectors allow you style multiple elements with the same styling. You identify classes in css with a dot before the class name (**.short_paragraphs**)
- **ID Selectors** target a specific element by its unique ID attribute. IDs **MUST** be unique within the HTML document. You identify IDs in css with a hash sign before the ID (**#main_head**)
- **Attribute Selectors** target elements based on their attributes. For instance, selecting all links with a specific class or target. **Pseudo-class Selectors** target elements based on a certain state or behavior, such as `:hover`, `:active`, `:focus`. **Pseudo-element Selectors** target specific parts of an element, like the first line (`::first-line`) or the first letter (`::first-letter`) of text.
Cascade
When you give an element different style declarations where the same property have different values, the one declared later in the stylesheet or inline will override the earlier one.
p {
color: green;
}
.short_para {
color: purple;
}
With the above style for <p class="short_para">This is my paragragh</p>, the paragraph element will be purple. With the above style for <p class="short_para" style="color:red;">This is my paragragh</p>, the paragraph element will be red.
- The !important exception: If declarations conflict the property value with the !important flag set is applied.
The Box Model
- Content is the actual content area, where an element/elements is/are displayed.
- Padding is the space between the content and the border. p{padding:3px;} puts space of 3px between the paragraph element and its border.
- Border is a line surrounding the padding and content. p{boder:3px solid red;} puts a solid red line of 3px thickness around the paragraph element.
- Margin is the space between the border of an element and surrounding elements. p{margin:3px;} puts space of 3px between the paragraph element and its surrounding elements.
Border-box** VS Content-box
border-box includes the element's padding size and border-size in its width and height, this way, the element's width and height will be the specified width and height. The paragraph element in the code below will have a total width of 100px.
p {
box-sizing: border-box;
padding: 4px;
border: 3px solid green;
width: 100px;
}
content-box adds the element's padding size and border-size in its width and height, this way, the element's width and height will be the specified width and height plus padding size and border-size. The paragraph element in the code below will have a total width of 114px. That is the specified width(100px) + the padding-left(4px) + the border-left(3px) + the padding-right(4px) + the **border-right(3px)
p {
box-sizing: content-box;
padding: 4px;
border: 3px solid green;
width: 100px;
}
Try it here
Text Properties
-
Color: Sets the color of the text. It can be defined using keywords (e.g.,
red), hexadecimal values (e.g.,#FF0000), RGB, or HSL values. -
Text Alignment: Aligns text within its containing element. Common values are
left,right,center, andjustify. -
Text Decoration: Adds decoration to text, such as
underline,overline,line-through, ornone. -
Text Spacing: Includes properties like
letter-spacing(space between characters) andword-spacing(space between words).
SET UP PREVIEW
In your onestitch folder on your PC, open the my_portfolio folder with VSCode using the "open with ..." command in your file manager.
Click on the cogwheel to open settings and select Extensions
In the searchbar type Live preview and click install beside it to install the Live Preview extension.
This helps us see the effects of changes to our webpage.
Right-click on the index.html file and select show preview.
A tab is opened to right showing our porfolio page. As we update our index.html, we see the effect in the preview tab.
NOW FOR THE FUN PART!!
In our index.html file between the head tags, after our title let's insert our CSS styles.
We want
- every element (indicated with '*' to have border-box box-sizing so we can predict what the width will always be
- title_text class to have a background of purple and a color of white
- passionate_text class to have a color of black
- passions class to have a color of purple
- resume_link class to have a background of blue and a color of white
- project_link class to have a background of white and a color of blue and a thin blue border.
There a style that could achieve the above is:
* {
box-sizing: border-box;
}
.title_text {
background-color: purple;
color: white;
}
.passionate_text {
color: black;
}
.passions {
color: purple;
}
.resume_link {
color: white;
background-color: blue;
padding: 10px;
}
.project_link {
color: blue;
background-color: white;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
This gives us the code below
<!DOCTYPE html>
<html>
<head>
<title>Olaide</title>
<style>
* {
box-sizing: border-box;
}
.title_text {
background-color: purple;
color: white;
}
.passionate_text {
color: black;
}
.passions {
color: purple;
}
.resume_link {
color: white;
background-color: blue;
padding: 10px;
}
.project_link {
color: blue;
background-color: white;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<div class="main_wrap">
<div>
<div class="title_text">Software Developer</div>
<div class="passionate_text">PASSIONATE ABOUT</div>
<h1 class="passions">LEARNING AND DELIVERY</h1>
<div class="btn_links_wrap">
<a class="resume_link" href="#">Resume</a>
<a class="project_link href=" #">Projects</a>
</div>
</div>
<div class="img_div_wrap">
<div class="img_div">
<img src="olaide.png" />
</div>
</div>
</div>
</body>
</html>
You should see 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 styles'
git push
git add index.html tells git to save the index.html document
git commit -m 'added styles' gives a summary task that was completed
git push saves these changes to the repository online
ADIEU!
Our portfolio is now coming up! Feel free to experiment with the colors you will like to have in your portfolio 😉. In the next lesson, we will continue CSS Basics. Until then, have fun!
FURTHER READING AND REFERENCES
my_portfolio
W3Schools
mozilla
RELATED POSTS
PREV <--------------------------------------------------------> NEXT
