Scribd
Upload
82 views

CSS - Overview

The document discusses the advantages and syntax of CSS including how it can save time, improve page loading speeds, and enable easy maintenance of styles across pages. It also covers CSS selectors, style rules, grouping selectors, comments, and how to set backgrounds, fonts, and lists.

Uploaded by

Rakotoarison Louis Frederick
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
82 views

CSS - Overview

The document discusses the advantages and syntax of CSS including how it can save time, improve page loading speeds, and enable easy maintenance of styles across pages. It also covers CSS selectors, style rules, grouping selectors, comments, and how to set backgrounds, fonts, and lists.

Uploaded by

Rakotoarison Louis Frederick
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Advantages of CSS

1. CSS - Overview
 CSS saves time - You can write CSS once and then reuse the same sheet in
multiple HTML pages. You can define a style for each HTML element and apply it
to as many web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all
the elements in all the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cellphones or for printing.
 Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all the
HTML pages to make them compatible with future browsers.

CSS – Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts:
 Selector: A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
 Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.
 Value: Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:
selector { property: value }
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
Here table is a selector and border is a property and the given value 1px solid #C00 is
the value of that property.
You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.

Multiple Style Rules


You may need to define multiple style rules for a single element. You can define these
rules to combine multiple properties and corresponding values into a single block as
defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;). You can keep
them in a single line or multiple lines. For better readability, we keep them in separate
lines.
For a while, don't bother about the properties mentioned in the above block. These
properties will be explained in the coming chapters and you can find the complete detail
about properties in CSS References.

Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a
comma, as given in the following example:
h1, h2, h3 {
color: #3366CC;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it
is very easy to comment any part in the style sheet. You can simply put your comments
inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.
Example
/* This is an external style sheet file */
h1, h2, h3 {
color: #3366CC;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */

CSS - Background
This chapter teaches you how to set backgrounds of various HTML elements. You can set
the following background properties of an element:
 The background-color property is used to set the background color of an
element.
 The background-image property is used to set the background image of an
element.
 The background-repeat property is used to control the repetition of an image in
the background.
 The background-position property is used to control the position of an image in
the background.
 The background-attachment property is used to control the scrolling of an
image in the background.
 The background property is used as a shorthand to specify a number of other
background properties.

{background-color:yellow;}

CSS – Fonts
This chapter teaches you how to set fonts of a content, available in an HTML element.
You can set the following font properties of an element:
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font
appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font
properties.

CSS - Lists
Lists are very helpful in conveying a set of either numbered or bulleted points. This
chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:
 The list-style-type allows you to control the shape or appearance of the marker.
 The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker.
 The list-style-image specifies an image for the marker rather than a bullet point
or number.
 The list-style serves as shorthand for the preceding properties.
 The marker-offset specifies the distance between a marker and the text in the
list.

You might also like