Best Introduction to CSS: Dear students, welcome to your fourth class on CSS; if you are new to this whole thing, kindly follow me to avoid missing subsequent courses.
Big congratulations to you for seeing this tweet. It’s another big Monday programming class where I teach web developments using twitter thread.
Ok, come on, kindly retweet and let’s break this down to simplest pieces 😉👇🏽
— Àgbà Akin (@Kynsofficial) November 22, 2021
Meaning of CSS
Creating CSS file and Linking it to HTML
CSS Selections and
Multiple CSS selections
Today we are going to talk about
(THE BOX MODEL) Best Introduction to CSS
Your browser renders every HTML element as a rectangular box according to the standard CSS box model.
Relative Vs Absolute Measurements
Best Introduction to CSS: Manipulating the box model
1. height and width
- padding-right, and
These properties accept a single value in either relative or absolute units of length:
Like 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 HERE.
The color can be any valid color value. We will go into more detail on color values in a later lesson, but for right now, we will use shorthand CSS color values to specify the color property.
The border property can be expanded into more finely tuned properties such as border-style, border-color, and border-width. These properties can be further expanded to target a specific side, e.g. border-top-width, border-left-style, and so on.
4. 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 (/).
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.
In the above example, the space between the green and black borders represents the margin between the <span> elements and their <div> containers. margin can also be broken out into more fine-grained properties to target a specific side, including
See you around