Current Affairs 9th Class

Introduction to CSS

Category : 9th Class

Introduction to CSS

Introduction

Cascading. Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS

Consistency

The main benefit of CSS is that style is applied consistently across a number of web pages. One command line can control several areas at one time, which is quite advantageous if there are changes that need to be made. You only need to alter one thing and the rest will follow. Because you don't have to change each page one at a time, web designers can be very efficient in creating and changing a website with only a few lines of code.

Improved Website Speed

Web designers only need to use a small amount of lines of programming for each page. And if there are less code, there are fewer lines to read, resulting in a faster load time for every page. With online users not willing to wait for a website to load, improving site speed will be most advantageous. Owners who bank on website performance to improve search engine rankings and customer base will benefit from CSS.

Easy to Maintain

Cascading style sheet not only simplifies website development, but also maintenance. All the codes are placed on one page, which means making improvements or changing a few lines will not involve going through several pages. And since a change with a single line of code is applied across the website, maintenance time and effort are significantly reduced.

Appearance

CSS makes it easy to improve the appearance of a website by allowing you to create a much more stylish website since CSS offers a wide array of expressive style capableness. With CSS, you will actually obtain more control over your website's visual aspect. Now, designers can orchestrate the styles and design of several web pages in a flash.

Maintainability

One of the convenient features that CSS produces is the consistency it provides when you want to make changes to a website. When a change is made to your websites CSS Style sheet, you will have the ability to automatically correct or change every page throughout your website-all at once. You do not have to go in to each individual web page to make a particular change as CSS will instantly do it for you. If your website is rather large, this one simple feature will save you ample time and time is money.

CSS Syntax

CSS Syntax includes selectors, properties, values, declarations, declaration blocks, rule sets, at-rules and statements.

A selector is a code snippet used to identify the web page element or elements that are to be affected by the styles.
A property is the aspect of the element that is to be affected. For example, color, padding, margin and background are some of the most commonly used CSS properties.
A value is used to define a property. For example, the property color might be given the value of red like this: color: red;
The combination of a property and a value is called a declaration.
In many cases, multiple declarations are applied to a single selector. A declaration block is the term used to refer to all of the declarations applied to a single selector.
A single selector and the declaration block that follows it in combination are referred to as a ruleset.
At-rules are similar to rulesets but begin with the @ sign rather than with a selector. The most common at-rule is the @media rule which is often used to create a block of CSS rules that are applied based on the size of the device viewing the web page.
Both rule sets and at-rules are CSS statements.

An Example of CSS Syntax

Let's use a block of CSS to clarify what each of these items is.

h1 {

color: red;

font-size: 3em;

text-decoration: underline;

}

In this example, hi is the selector. The selector is followed by a declaration block that includes three declarations. Each declaration is separated from the next by a semicolon. The tabs and line breaks are optional but used by most developers to make the CSS code more human-readable.

By using hi as the selector, we are saying that every level 1 heading on the web page should follow the declarations contained in this rule set.

The rule set contains three declarations:

v Color: red;

v font-size: 3em;

v text-decoration: underline;

color, font-size, and text-decoration are all properties. There are literally hundreds of CSS properties you can use, but only a few dozen are commonly used.

We applied the values red, 3em and underline to the properties we used. Each CSS property is defined to accept values formatted in a specific way.

For the color property we can either use a color keyword or a color formula in Hex, RGB or HSL format. In this case, we used the color keyword red. There are a few dozen color keywords available in CSS3, but millions of colors can be accessed with the other color models.

We applied the value of 3em to the property font-size. There are a wide range of size units we could have used including pixels, percentages and more.

Finally, we added the value underline to the property text-decoration. We could have also used overline or line-through as values for text-decoration. In addition, CSS3 allows for the use of the line-styles solid, double, dotted, dashed, and wavy was well the specification of text-decoration colors. We could have applied all three values at once by using a declaration like this:

text-decoration: blue double underline;

That rule would cause the h 1 in our initial example to be underlined with a blue double line. The text itself would remain red as defined in our color property.

CSS Comments

Comments are used to explain the code and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example:

P {

color: red;

/* This is a single-line comment *?/

text-align: center;

}

/* This is

a multi-line

comment */

CSS Rules

CSS Rules are the styles that we have to create in order to create style sheets. These rules define appearance of associated HTML element. The general form of CSS syntax is as follows:

Selector {property: value:}

v Selector is HTML element to which CSS rule is applied.

v Property specifies the attribute that you want to change corresponding to the selector.

v Property can take specified value.

v Property and Value are separated by a colon (:).

v Each declaration is separated by semi colon (;).

Following are examples of CSS rules:

P { color: red;}

h1 (color: green; font-style: italic}

body { color: cyan; font-family: Arial; font- style: 16pt}

Commonly Asked Question?

Which of the following is correct about CSS?

(a) Style sheets allow content to be optimized for more than one type of device.

(b) CSS can store web applications locally with the help of an offline catche.

(c) Using CSS, we can view offline websites. The cache also ensures faster loading and better overall performance of the website.

(d) All of the above

(e) None of these

Answer (d)

What does CSS stand for?

(a) Computer Style Sheets (b) Colorful Style Sheets

(e) None of these

Answer (c)

Which of the following property is used to increase or decrease the size of a font?

(a) Font-size (b) Font

(e) None of these

Answer (a)

Implementing CSS

We can define and implement CSS style 4 different way (Inline style, Internal style, external style sheet and @import), we must have to knowledge in which situation which type is better fit for you. Lets start, We can define and implement CSS style in following different ways.

1. Inline CSS Style

2. Internal CSS Style

3. External Style Sheet

4. @import Style Sheet

Inline CSS Style

Inline CSS Style write in element line using style attribute. All most every html element support style attribute .Inline stylesheet priority high more than other three.

Inline CSS style consists set of rules in 4 part:

1. Selector (Element)

2. Style (Attribute)

3. Property and

4. Value

How to Write Inline CSS Style

Selector is normally HTML element that element you want to assign CSS style. And style is attribute to assign CSS property and set suitable value.

Example Code:

<html>

<body>

<p style="color:purple;margin-left:i20px">This is a paragraph line.</p>

<div style="color: purple; font-size: 16px; background-color:#FF6633;">This is a paragraph Second line. </div>

</body>

</html>

Internal CSS Style

Internal CSS Style includes within webpage using <style type="text/css">.....</ style element and between this element CSS style properties are listed. Internal CSS style normally written within <head>.....</head> element of the webpage.

Internal CSS style consists set of rules in 3 part:

Selector (element, class, id)
Property and
Value

How to write Internal CSS Style

Selector is normally HTML element that element you want to assign CSS style. All elements within webpage that elements assign CSS properties and set suitable values.

Example Code:

<html>

<head>

P {

color: purple;

mar gin-left: 20px;

}

div{

color: purple;

font-size: 16px;

background-color:#FF6633;

}

</style>

</head>

<body>

<p>This is a paragraph line.</p>

<div>This is a paragraph Second line.</div>

</body>

<html>

External Style Sheet

External Style Sheet define in separate .css extension file. And used to make global change gllij1 also manage all webpage from a single CSS document. External style sheets give you control to change formatting and layout styles of every single elements in webpages. And only those webpage who are linked with external CSS document.

External style sheet consists set of rules in 4 part:

1. External Source link

2. Selector (element, class, id)

3. Property and

4. Value

How to write External Stylesheet

External stylesheet linked to a webpage. Selector is normally HTML element (or class, id) to assign CSS properties and set suitable values.

Example Code:

/*CSS Style*/

color: purple;

margin-left: 20px;

}

div{

color: purple;

font-size: 16px;

background-color:#FF6633;

}

<head>

</head >

<body>

<p>this is a paragraph line.<pp>

<div>this is a paragraph second line.</div>

</body>

@import Style Sheet

@import CSS Style is another way to loading a CSS file.

@import CSS Style define within <style type="text/css">.....</style> element in your <head>.....</head> of your webpage.

@import CSS style consists set of rules in 3 part:

@import (keyword)
url ()
CSS file path

How to write @import CSS Style

@import url ('styles.css');

Example Code:

'style.css

/*CSS Style*/

p {

color: purple;

margin-left:20px

}

div {

color: purple;

font-size: 16px:

background-color:#FF6633:

}

<html>

<head>

<style>

@import url(‘style.css’):

</style>

</head>

<body>

<p> this is a paragraph line. </p>

<div>This is a paragraph second line.

</div>

</body>

</html>

Commonly Asked Question?

Which of the following selector matches a element based on its id?

(a) The Id Selector (b) The Universal Selector

(e) None of these

Answer (a)

Which of the following property is used as a shorthand to specify a number of other background properties?

(a) Background-attachment (b) Background

(e) None of these

Answer (b)

Which of the following is a way to associate styles with your HTML document?

(a) External CSS - The Element

(e) None of these

Answer (c)

Introduction to MS-Access 2013

Working With HTML

Current Affairs 9th Class

Introduction to CSS

Current Affairs Categories

Archive

Trending Current Affairs