Better Web/App Presentation With CSS

Introduction

 

Sorry! I was a little busy, I hope My HTML and JavaScript blogs were helpful for you. Now let's start with CSS. A fact of Web/App development:

 

 

When any developer builds a Website then these three layers work like a given flow:

1. They start by producing the content in HTML format. This is the base layer, that any visitor using any kind of browser should be able to view.
2. With that done, we can focus on making the site look better, by adding a layer of presentation information using CSS. The site will now look good to users able to display CSS styles.
3. Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behavior, that will make the site easier to use in browsers equipped with JavaScript.

So if we keep the HTML, CSS, and JavaScript code separate, we'll find it much easier to ensure that the content layer remains readable in browsing environments where the presentation and/or behavior layers are unable to operate.

 

This "start at the bottom" approach to web design is known in the trade as progressive enhancement.

 

Not let's try to understand the Middle layer or Heart of this flow, CSS makes the presentation for the developer and visitor.

 

Wikipedia Says: "Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG, and XUL."

 

Books and the Internet say that CSS was introduced in Late 1996 on the recommendation of the World Wide Web Consortium (W3C).

 

Nine different Style Sheet Languages were proposed to the W3C to control the style sheet of a web page. Out of nine proposals, two languages: Cascading HTML Style Sheet (CHSS) and stream-based Style Sheet Proposals (SSP), were selected to be markup languages and there is much history behind this style. You can Google that.

 

The main point here is: there are three parts of CSS, CSS1, CSS2, and CSS3. All versions have the same features as in the following

 

CSS1

• It provides margin, border, padding, and positioning of elements.
• Provides Font Properties, Such as Emphasis.
• It provides color to text.
• It provides a background to elements.
• It provides alignment to text, image, and other elements.

CSS2

• It provides absolute, relative, and fixed positioning of elements.
• It provides style for various media types, such as screen, tv, and print.
• It provides font properties, such as shadows.
• Supports the bidirectional text, that represents a text that can be displayed in both right-to-left and left-to-right directions
• CSS2.1 version contains the improved features of CSS2

CSS3

• Provides custom fonts, attribute selectors, CSS selectors, RGBA colors.
• It provides opacity to set the transparency of the box, Images, or text.
• Displays shadow with the text.
• Allows multi-column text without using a table.
• Allows multiple backgrounds on a webpage.
• Supports more color a wider range of color definitions, such as RED, Green, Blue, Alpha (RGBA) and a hue Saturation lightness (HSL).

So this was a little bit of theory about CSS, now let's understand how it works.

 

General Syntax of CSS

 

The CSS syntax is divided into two parts: Selectors and Declarators.

 

A Selector defines an HTML element to which the CSS style is applied and the declaration contains the CSS properties as well as the value of these properties.

 

The given code shows the syntax of CSS:

Selector {
    1st Property: value;
    2nd Property: value;
    3rd Property: value;
    … Nth Property: value;
}

This code shows the selector and CSS properties with their values. The selector is the name of the element to which you want to apply CSS properties. For more see the next description

Span
{
    background: #000;
    padding: 0 3x 0 0;
    float: left;
    position: absolute;
    text-decoration: none;
}
ol
{
    list-style: lower-roman;
    margin: 1.sem 0 1em 5%;
    padding: 0;
    background: #000;
    float: left;
    display: block;
    width: 95%;
}
a
{
    padding: 0 0 0 3px;
    right: 0;
}
li
{
    clear: left;
    border-bottom: dashed 1px #aaa;
    height: 1.05em;
    margin-top: 10px;
    position: relative;
}

In this code, span, ol, a and il are the four selectors of the CSS file. The span selector has the properties: background, padding, float position and text-decoration. Each property has assigned some value. Similarly with other selectors.