A Developer’s Tool: The Cascading Style Sheet(CSS).

INTRODUCTION

CSS acronym for Cascading Style Sheet is a computer language used for laying out and structuring web pages. When it comes to building websites and web applications, you can think of HTML as being the frame and structure, the building block. CSS on the other hand is the paint, wallpaper, fixtures and overall style of the CSS.

In CSS, a declaration block starts with a curly bracket and ends with a matching bracket. In between are the style declarations. When using CSS, there are five elements you need to understand. The first element are selectors. This indicate which HTML element we want to style. For example, you create a rule that uses an “p” selector to change the color of all paragraphs to blue.

In this case, “p” is the selector, color is the property and blue is the value of the property. A declaration block is made up of two properties, a property and a value.

Linking your CSS to your HTML is also very important. To link your CSS to your HTML, you use the link tag which must be assigned to attributes “rel” and “href”. The “rel” attribute is assigned to the style sheet while the “href” attribute is assigned to the name of the style sheet file.

TYPES OF SELECTORS

The combination of a selector code block and a declaration block that consists of a property and value make up a CSS rule. When styling a web page, you will make use of different types of selectors. Here are some common selectors used:

1)Element Selector: Element Selector allows developers to select HTML elements based on their element type. For example, if you use “h1” as a selector, it affects or applies to all “h1” elements on the web page.

2)ID Selector: This selector makes use of the ID attribute of an HTML element. The ID is unique within a web page and this allows the developer to make use of the ID to select a specific element for styling. ID selectors are prefixed with “#” character.

3)Class Selector: Elements can also be selected based on the class attribute give or assigned to them. Class Selectors are prefixed using “.” character.

4)Element with Class Selector: Another way to select HTML elements is by first selecting the HTML element then selecting the CSS Class or ID value.

5) Descendant Selector: They are useful when you have several containers for your web page with different content and you need to call each element in each containers for different purposes.

6)Child Selectors:They are more specific than descendants selectors. They only select elements that are immediate descendants of a selector. We make use of the “>” character.

TEXT AND COLOR IN CSS

COLOR

Color is an essential part of every website and it is used in many CSS properties. There are 5 main ways to reference a color. These are:

1)By RGB Value: This is a color model that adds the colors RED(R), BLUE(B) AND GREEN(G) to create color. Each value is defined as a number between 0 and 225, representing the intensity of the color. You make use of the character “rgb” to define an RGB value. For example, RED is RGB(255,0,0), BLACK is RGB(0,0,0) and WHITE is RGB(255,255,255).

2)RGBA: This is an extension of the RGB value with the addition of ALPHA(A) which represents the opacity or transparency of color. We use “rgba” keyword to make use of this reference.

3)HSL: Newer Color Model defined as Hue(H), Saturation(S) and Lightness(L). The aim of this model is to simplify the mental visualization of the color that the value represents. Taking the example of a rainbow that has been turned into a full circle can help us understand this concept better.

A rainbow turned into a full circle represents the concept of the HUE. The Hue value is the degree value on the circle from 0 degrees to 360 degrees. SATURATION is the distance from the center of the circle to its edge. It is represented by a percentage from 0% to 100% where 0% is its center and 100% is the edge of the circle. LIGHTNESS is the third element in the color model. Lightness is the distance from the bottom up to the top. It is represented by a percentage from 0% to 100%. 0% means the color is more bright and 100% is white. We use the keyword “hsl” to define a color with HSL.

4)Hex Value: Colors can be specified using an hexadecimal value. If you are unfamiliar with hexadecimal, they are 0, 1, 2, 3, 4, 5, 6 ,7 ,8 ,9, A, B, C, D, E and F. Colors specified using hexadecimal are prefixed with “#” followed by a RGB value in hexadecimal format.

5)Predefined Color Names: There are over 140 predefined color names that are supported by modern web browsers. They are for convenient purposes and can be mapped to equivalent Hex/RGB/HSL.

TEXT

There are a lot of ways to change how your text is displayed. Here are some of the most common manipulations in CSS:

1)Text Color: The color property “color” is used to set the color of the text as desired by the developer.

2)Text Font and Size:To sent the font used by CSS in your web page, you use the “font-family” property. It is advisable to use several fonts while doing this. This is because fonts are specified in fall back order, if the first font is not available, the second font is used, if the second is not available, the third is used, if the third is not available, the browser default text is used.

To set the font-size of the font, the “font-size” property is used.

3)Text Decoration: This is useful to apply decoration like underline or strike through.

BOX MODELING

When using HTML and CSS, the web browser has to know how to display it on the screen, to do this, it allocates a rectangle box to each element. CSS is then applied to the boxes. This process is called box modeling. Every box consists of four parts. These are the content, the padding, the border and the margin.

The content is actually the content of the element within a container. Padding extends the content size. Its size is known as the padding box width and height. The thickness is determined by padding top, padding left, padding right and padding bottom together. The border goes around the padding or content. Its size is known as border width and border box height. As a developer, you can set different types of border such as solid and dash border. The margin extends the border area to separate the element from its neighboring element. Its size is known as margin box width and margin box height. To specify the margin sides, you use margin top, margin bottom, margin left and margin right.

BLOCK VS INLINE ELEMENT

We also have what we call block and inline elements. Block elements begin on a new line and take up the full width of its page while inline elements just like the name implies are in line that is they work or stay within the flow of surrounding content rather than breaking unto their own line. It is equally an important aspect or part of CSS.

CONCLUSION

This article has done a good job at covering the important aspects to CSS. CSS can never be covered fully. It is an ever evolving program and we are yet to fully touch or grasp its full potential. Therefore, it is safe to say that this article can positively guide you on your start to making use of the Cascading Style Sheet(CSS) to better style, decorate and improve your web sites and web applications.