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.
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?
(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)
(a) Computer Style Sheets (b) Colorful Style Sheets
(c) Cascading Style Sheets (d) Creative Style Sheets
(e) None of these
Answer (c)
(a) Font-size (b) Font
(c) Font-variant (d) Font-weight
(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:
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> <style type=’’text/css”> 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*/ P{ color: purple; margin-left: 20px; } div{ color: purple; font-size: 16px; background-color:#FF6633; }
|
<head> <link rel=”stylesheet” type=”text/css” href=”jnj__css. </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:
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?
(a) The Id Selector (b) The Universal Selector
(c) The Descendant Selector (d) The Class Selector
(e) None of these
Answer (a)
(a) Background-attachment (b) Background
(c) Background-repeat (d) Background-position
(e) None of these
Answer (b)
(a) External CSS - The Element
(b) Imported CSS - ©import Rule
(c) Both (a) and (b)
(d) External CSS - ©import Rule
(e) None of these
Answer (c)
You need to login to perform this action.
You will be redirected in
3 sec