Best Introduction to CSS: HTML, CSS and Javascript continuation (Part 2)

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.


If you’ve already missed the previous classes or want to start from the beginning, please check my previous lessons here and all lessons in this course here.

Last lessons, we discussed the

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.

Each HTML element on your web page consists of a content area, padding, a border, and a margin.  Learning how to manipulate the CSS properties within the box model will be helpful with laying out content on your web pages.
Image
Let’s talk about

Relative Vs Absolute Measurements

Often times, 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.
Percentages are a relative measure of length. When specifying length using the % unit, the length is measured as relative to the parent element’s length:
Image
CSS
Image
IMAGE
Image
Since we used %, a relative unit of measurement, the length of the h1 elements in the second div are half that of the h1 elements in the first div even though these elements have the same CSS properties Specifying the number of pixels, on the other hand, yields an absolute measure of length.
Absolute measurements are fixed and do not rely on measurements from other HTML elements.

Best Introduction to CSS: Manipulating the box model

This section will go over many of the common CSS properties you can use to manipulate 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. The padding property applies this spacing in different ways depending on how many values you provide, as illustrated in the example below: When you specify the length as a percentage, the length is relative to the width of the parent element
Image
Image
Image
You can also apply padding to a single side of the element using more specific CSS properties. These include
  • padding-bottom,
  • padding-left,
  • padding-right, and
  • padding-top.

These properties accept a single value in either relative or absolute units of length:

Image

3. Border

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.

Image

Image

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 (/).

Image

Image

5. 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.

Image

Best Introduction to CSS

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

  • margin-top
  • margin-bottom
  • margin-right
  • margin-left.

See you around

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *