A SIMPLE START TO JQUERY, JAVASCRIPT, AND HTML5 FOR BEGINNERS (2014)

CHAPTER 4: BASICS OF CSS3

Cascading Style Sheets or CSS provide the presentation that webpages are known for. Although, HTML is capable of providing a basic structure to the webpage, CSS offers developers host of design options. Besides this, it is fast and efficient, which makes it an all more popular design tool.

CSS is known to have evolved from SGML (Standardized Generalized Markup

Language). The goal of efforts made in this direction was to standardize the manner in which web pages looked. The latest version of this technology is CSS3, which is a collection of 50 modules.

The most powerful characteristic of CSS is its cascading ability. Simply, it allows a webpage to take its styles from multiple sheets in such a manner that changes to the style in subsequently read sheets overwrite the style already implemented from one or more of the previous sheets.

How to Define and Apply Style

The definition and application of a style involves two facets or parts, selector and declaration. While the selector determines the area of the webpage that needs to be styled, the declaration block describes the style specifications that have to be implemented. In order to illustrate how it works, let us consider the following example,

body {

color: white;

}

In this example, the selector selects the body of the webpage and the declaration block defines that the font color should be changed to white. This is a simple example and declarations and selectors can be much more complex than this.

How to Add Comments

Comments can be added to the style sheet using the following format:

/*write the comment here*/

How to Create an Inline Style

Every element has an associated global attribute, style. This global attribute can be manipulated within the tag for that element to modify the appearance of that element. This type of styling does not require you to specify the selector. Only the declaration block is required. An example of how this is done is given below:

</body>

This HTML tag performs the same functionality as the CSS code specified in the previous section. The advantage of using this approach is that the style information given in this manner overwrites any other styling information. Therefore, if you need to use different style for one element while the rest of the document needs to follow a different style, then you can use a stylesheet for the document and specify the style for this element in its tag.

How to Use Embedded Style

Another approach for accomplishing the same outcome as inline styles is to use the <style> element within the element concerned, for defining its style specification. Here is how this can be done:

<!DOCTYPE html>

<head>

<style>

body {

color: white;

}

</style>

</head>

<body>

</body>

</html>

How to Create External Style Sheet

For usages where you wish to use the same style for the complete webpage or a number of webpages, the best approach is to use an external style sheet.

This external style sheet can be linked to the HTML page in the following manner:

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

You must create a file mainstyle.css, in the Content folder, and put the style rule specified below into the file.

body {

color: white;

}

Defining Media

It is important to note that a style sheet can contain as many style rules as you want. Besides this, you can also link different CSS files for different media. The different media types are as follows:

● all

● embossed

●

● braille

● print

● handheld

● speech

● screen

● tv

● tty

The media used can be defined in the following manner:

Defining Character Encoding

You can also define the character encoding used, using the following format:

Style sheet:

Place the following line above the style rule in the style sheet.

@charset 'UTF-8';

HTML page:

You must place this line above the link element.

Importing style Sheets

As your web pages becomes complex, the style sheets used shall also grow in complexity. Therefore, you may need to use many style sheets. You can import the style rules present in one style sheet to another by using:

@import url('/Content/header.css');

Here, header.css is imported and the url gives the relative address of the style sheet to be imported.

Importing Fonts

Fonts can be imported using the following format:

@font-face {

font-family: newFont;

src: url('New_Font.ttf'),

url('New_Font.eot'); /* IE9 */

Selectors, Specificity and Cascading

Selectors can be of three types, class selectors, ID selectors and element selectors. The element selector type is the simplest and requires you to simply name the element that needs to be used. For instance, if you wish to change the background color of the body, then the element selector used is body.

While declaring any element, you can assign an ID to it using the id attribute. You can use this ID prefixed with a # as a selector. For example, if you have created a button with ID btnID, then the ID selector for this will be #btnID. Similarly, you can assign a class name to an element using the class attribute. Class name can be used prefixed by a dot(.) in the following manner, .className.

However, if you wish to select all the elements of the webpage, then asterisk (*) to it.

Using Descendent and Child Selectors

You may wish to apply a particular style to a descendant of a selector. This can be done by specifying the complete selector change. It can be done in the following manner:

li a {

text-color: black;

}

On the other hand, you may want to apply to an element only if it is a direct child of the selector. This can be implemented by specifying the parent and child separated by a greater than (>) sign, in the following manner:

li > a {

color: white;

}

Pseudo-element and Pseudo-class Selectors

Now that you know how to apply styles to specific elements, let us move on to implementing styles to more specific sections like the first line of the second paragraph. In order to style elements that cannot be classified on the basis of name, content or is not a part of the DOM tree can be styled using pseudo-classes. The available pseudo-classes include:

● :visited

● :link

● :hover

● :active

● :checked

● :focus

● :nth-last-child(n)

● :not

● :only-child

● :nth-child(formula)

● :lang(language)

● :first-of-type

● :only-of-type

If you want to access information of the DOM tree that is not accessible otherwise, you can use pseudo-elements. Pseudo-elements include:

● ::first-letter

● ::first-line

● ::after

● ::before

Grouping Selectors

Multiple selectors can be used for a style rule. These selectors must be separated by commas. Sample implementation:

body, button {

color: white;

}

Using Adjacent Selectors

If you want to style the first heading in a div or any similar adjacent elements, the selector is constructed using a plus sign (+) between the two selectors. Sample implementation:

div + h1 {

color: white;

}

Sibling Selectors

Sibling selectors are similar to adjacent selectors except for the fact that all the matching elements are styled as against adjacent selectors, which only style the first matching element. The selector is constructed using a ~ sign between the two selectors. Sample implementation:

div ~ h1 {

color: white;

}

Using Attribute Selector

This selector selects all the elements for which the specified attribute exists. The selector is written in this form:

a[title]

This selector will select all the links for which the title attribute has been specified. Moreover, this selector type can be modified into attribute-value selector by specifying the attribute value in the following manner:

a[title = value]

In-Built Styles of Browsers

Every browser has a built-in stylesheet, which is applied to all the webpages opened using this browser. In fact, this stylesheet is applied before any other style sheet. You can define your own style sheet for the browser using the Accessibility option in Tools. However, user style sheets are browser specific. Therefore, if you open a different browser, the style sheet you defined may not be accessible.

In case, you want your user-defined stylesheet to override any other style specified in the HTML page, then you can use the ‘!important’ modifier. This modifier sets highest priority for the specified style statement. Sample implementation:

body {

color: white !important;

}

Cascading of Styles

The precedence and priority of the styles are decided on the basis of the following parameters.

● Importance

● Specificity

● Textual Order

Working with CSS Properties

Now that you are thorough with the use of selectors, the next step is to look at CSS properties.

Color

One of the most crucial properties that are used in a web page is color, which can be defined using ARGB, RGB and color names.

RGB value are typically defined using a decimal number, which lies between 0-255.

● white #ffffff

● red #ff0000

● black #000000

● green #008000

Color values can also be used instead of the color name. An example of how this can be used is given below.

body {

color: #ffffff;

}

Another way to specify the color is using the RGB function, which specifies the values of parameters using a number between 0-255 or percentage. Example of this type of declaration is given below:

h1 { color: rgb(255,0,0); }

Other ways to specify color are RGBA, which accepts 4 values and HSL, which defines values for hue, saturation and lightness.

Transparency

The transparency or opacity are defined by a value between 0.0 (invisible) and 1.0 (opaque).

Text

As far as text is concerned, font-face and font-size can be specified. These properties can be defined in the following manner:

h1 { font-family: arial, verdana, sans-serif; }

h1 { font-size: 12px; }

The CSS Box Model

The CSS Box Model assumes that a webpage can be considered to be made up of boxes. The spacing between these boxes are given by margins and padding settings. These properties can be given values in the following manner:

margin: 15px;

padding: 25px;

border: 10px;

Positioning <div> elements

The element used for creating page layouts is <div>. Although, HTML5 recommends the use of semantic markup instead of div elements, there are still used for content that cannot be styled using semantic markup. A div element can be imagined as a rectangular block and is declared in the following manner:

<div>

<!—other elements are enclosed within this area-->

</div>

Properties used to define the position of a div element include:

● The position of the div element can be defined using the properties, top, bottom, left and right, in pixels.

● A property, position, is used to define if the position specified is static or relative.

● The float property can be used to allow elements to float to the right or left and is defined as float: left or float: right.

● The clear property places a clear element right after the floating element.

● You can also change the manner in which the browser calculates width with the help of the box-sizing property. This property can take three values: content-box (default setting), border-box and padding-box.

Centering Content

If you are using a fixed width, the div element can be centered using the properties, margin-left and margin-right. If you fix the width and set the margins to auto, the extra space on the margins is equally divided. It can be done in the following manner:

#container {

width: 850px;

margin-left: auto;

margin-right: auto;

}