KAL MicroMusings

CSS box model discussion today.

In the center, you have the content you want to present, and that space will be defined by width and height.

Next, you have padding, which is the space between the content area and the border.

Colors can be represented in a few ways in CSS. You can use the named color, like "red". You can declare the color with a hexadecimal code, like #ff0000. Alternatively, you can declare the color with the red, green, blue values (RGB) like rgb(255, 0, 0) or you can declare the color using the hue, saturation, and lightness values (HSL) like hsl(0, 100%, 50%). All of these will render the color "red."

So why use one over the other? Well, there are only 140 named colors. That's pretty limiting. Hexadecimal values only provide for base 16 values which is much greater, and will work in most instances, but what if you want an even more nuanced color?

Using RGB or HSL will give you that option. Both also have the capacity to set the opacity value as well which gives your code even more flexibility.

Here are some examples.

/* This sets the background color of the body element using a named color */

body { background-color: red; }

/* This sets the background color of the body element using hexadecimal values */

body { background-color: #ff0000; }

/* This sets the background color of the body element using rgb values */

body { background-color: rgb(255, 0, 0); }

/* This sets the background color of the body element using hsl values */

body { background-color: hsl(0, 100%, 50%); }

And if you want to use opacity, or otherwise known as setting the alpha level, hence the "a" at the end, the notation would look like the following for rgb and hsl values.

/* This sets the background color of the body element using rgba values where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all) */

body { background-color: rgba(255, 0, 0, 0.75); }

/* This sets the background color of the body element using hsla values where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all) */

Hey Tumblr community! It's been a long time and so much has happened. But I'm getting back to the micro-musings and learning.

They say learning something gets ingrained if you have to turn around and teach it to someone else.

So what am I learning now? Well, Information Technology Service Management (ITSM), ITIL (used to stand for IT Infrastructure Library, but doesn't really anymore), ServiceNow, UI/UX, and full-stack development. A lot on my plate? Yes, but if you think of it in terms of school, it's really only five classes, right?

Who am I learning from, you ask? Well, Coursera, Skillcrush, ServiceNow, PeopleCert, and Codecademy.

Level 1 (base) - Strategy or why and who you are designing for, the problem Level 2 Scope - What features the design needs to include Level 3 Structure - How does one interact with the solution, what methodology Level 4 Skeleton - How much info to present Level 5 Surface - Visual look and feel of the design

So the TCP/IP network model breaks down into 4 or 5 layers and the OSI breaks down into 7 layers. 

From the bottom to the top: TCP/IP (transmission control protocol/internet protocol model)

Layer 1 - Physical Layer Layer 2 - Data Layer Layer 3 - Network Layer Layer 4 - Transport Layer Layer 5 - Application Layer (which sometimes is combined into the transport layer as well for the four layer model).

For the OSI model (Open Systems Interconnection Model), the layers from bottom to top are: