Scribd
Upload
141 views12 pages

CSS Introduction

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles, including color, fonts, spacing and layout, in external CSS files. This solved a problem where formatting tags in HTML documents made development and maintenance difficult. CSS rules consist of selectors that point to HTML elements and declaration blocks containing property-value pairs that define styles. Comments can be added to CSS to document code. Different selectors like element, id, class and grouping selectors allow targeting styles to specific elements. Styles can be applied via external, internal and inline styling methods.

Uploaded by

Aravind Kilaru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
141 views12 pages

CSS Introduction

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles, including color, fonts, spacing and layout, in external CSS files. This solved a problem where formatting tags in HTML documents made development and maintenance difficult. CSS rules consist of selectors that point to HTML elements and declaration blocks containing property-value pairs that define styles. Comments can be added to CSS to document code. Different selectors like element, id, class and grouping selectors allow targeting styles to specific elements. Styles can be applied via external, internal and inline styling methods.

Uploaded by

Aravind Kilaru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CSSIntroduction

What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Styles Solved a Big Problem


HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document.
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large web sites, where fonts and
color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a
separate CSS file.

CSS Syntax
A CSS rule set consists of a selector and a declaration block:

The selector points to the HTML element you want to


style.
The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a property name and a value,
separated by a colon.

CSS Example
p{
color: red;
text-align: center;
}

CSS Comments
comments are used to explain your code, and may help you 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:
p{
color: red;
/* This is a single-line comment
*/
text-align: center;
}
/* This is
a multi-line
comment */

CSS Selectors
CSS selectors allow you to select and manipulate HTML element(s).
CSS selectors are used to "find" (or select) HTML elements based on their id,
classes, types, attributes, values of attributes and much more.

The element Selector


The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be
center-aligned, with a red text color)

p{
text-align: center;
color: red;
}

The id Selector
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want
to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

The class Selector


The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the
name of the class:
In the example below, all HTML elements with class="center" will be centeraligned:
.center {
text-align:
center;
color: red;
}

Grouping Selectors
In style sheets there are often elements with the same style:
h1 {
text-align: center;
color: red;
}

To minimize the code, you can group selectors.

h2 {
text-align: center;
color: red;
}

In the example below we have grouped the


selectors from the code above:

p{
text-align: center;
color: red;
}

To group selectors, separate each selector with a


comma.

h1, h2, p {
text-align: center;
color: red;
}

CSS How To...


There are three ways of inserting a style sheet:
1.
2.
3.

External style sheet


Internal style sheet
Inline style

External Style Sheet


Internal Style Sheet

Inline Style Sheet

You might also like