Congratulations you are seeing the tweet. Your journey to learning web development has been somewhat amazing. Get in less round off CSS
Course Title: HTML, CSS & JAVASCRIPT
Topic: CSS
I'll teach you programming today like its ABC, Kindly retweet for others, and let's begin
First, I will commend your resilience for staying true to yourself since we started this journey together last Monday.
We completed HTML, and today we will complete CSS too.
If you are finding this for the first time, follow me and join us using my pinned tweet from Scratch
CSS BOX MODEL
Your browser renders every HTML element as a rectangular box according to the standard CSS box model.
Each HTML element on your web page consists of a content area, padding, a border, and a margin.
The primary thing to understand in CSS is how to Manipulate them.
Relative Vs Absolute Measurements
Oftentimes, you will want to specify the length of the content area, padding, margins, etc.
But how do we specify these lengths? The most common units used are percentages, %, and the number of pixels, px.
Exp 1
More details about using * in our CSS and every other thing you need to know about this class can be found in the Link.
You're expected to return to this Tweet when you are done reviewing the thread to visit the Link for an easy copy of the codes.
akinolaakeem.com/best-introduct…
Manipulating the BOX MODEL
1. height and width
Use the height and width CSS properties to change the height and width of an element’s content area.
2. padding
Use the padding property to create spacing between an element’s content area and border. Example
3 CSS BORDER
As its name implies, the border CSS property sets the border of an element. The width can be given in absolute or relative units. The style can include things like dotted, groove, double, and solid. A full list of border styles can be found developer.mozilla.org/en-US/docs/Web…
CSS BORDER RADIUS
If you want to create borders that have rounded corners, use the border-radius property. You can also create elliptical corners by providing two values to border-radius, separated by a slash (/).
CSS MARGIN
The margin property is very similar to the padding property, except it allows you to define the spacing around the outside of an HTML element past the border.
Like padding, it allows you to define single or multiple values.
CSS COLORS
RGB values refer to using red, green, and blue parameters to define a color.
You can specify a color by indicating the intensity of each color attribute from a range of 0 to 255.
Hex values (CSS COLORS)
The most common numbering system uses a base of ten.
with one digit, ten possible values can be represented (0–9)
with two digits, one hundred (ten times ten) possible values can be defined (0–99)
To help you generate Color Code easier, I created a simple JavaScript script which you will find from the link above.
When you drag the line in the picture, the color changes, and the color code is generated
LASTLY ( CSS FONT STYLE )
You can change the font of your text using the font-family property.
TEXT ALIGN
Use the text-align property to change the alignment of text within an element.
center: center the text
left: align the text to the left
right: align the text to the right
justify: the text will spread out to fill out the full width of its container
CSS TEXT SIZING
The size of your text can be changed using the font-size property. The font-size takes both absolute and relative values. The most common absolute value is px, and the most common relative values are ems and rems
Congratulations, we've come to the end of CSS.
Note: CSS is a broad language and mostly, what you need to understand is the concept.
It is used for design, and new design concepts pop up every day. Being good in CSS is determined by how well you can manipulate this concept.
Big shout out to my team at @SwiftspeedT for resources review. Thank me by giving them a follow
Class exercise. Study the class, understand the concepts, copy the code to your IDE, Manipulate it a bit and quote the main tweet with a screenshot of your result.
See you next week.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.