What is CSS?

What is CSS?
O CSS stands for Cascading Style Sheets
O CSS describes how HTML elements are to be
displayed on screen or on a web page.
O CSS is a style language that defines layout of HTML
documents. For example, CSS covers fonts, colours,
margins, lines, height, width, background images and
many other things.
O CSS files can help define font, size, colour, spacing,
border and location of HTML information on a web
page, and can also be used to create a continuous look
throughout multiple pages of a website.
By Hansa(Hansika)
Halai

Why css?
O Saves Your Time
O Saves Your Visitors Time(less loading time)
O Gives You Design Flexibility
O Easier to maintain and update
O Multiple Device Compatibility
By Hansa(Hansika)
Halai

How it works?
O Syntax:
property : value;
O Ex:
color: red;
What is important to remember is that both
properties and values are case-sensitive in
CSS. The property and value in each pair is
separated by a colon (:).
By Hansa(Hansika)
Halai

O CSS declaration blocks:
• The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name and a
value, separated by a colon.
• A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
O Syntax:
Selector{property : value;
property : value;
}
The selector points to the HTML element you want to style.
By Hansa(Hansika)
Halai

OEx : p {
color: red;
text-align: center;
}
By Hansa(Hansika)
Halai

CSS Selectors
O CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class
and attribute.
O The element Selector
• The element selector selects elements based on
the element name.
Ex:
You can select all <p> elements on a page like the
example on next slide..
By Hansa(Hansika)
Halai

O The id Selector
• The id selector uses the id attribute of an HTML
element to select a specific element.
• The id of an element should be unique within a
page, so the id selector is used to select one
unique element!
• To select an element with a specific id, write a hash
(#) character, followed by the id of the element.
• The style rule in example (next slide) will be applied
to the HTML element with id="para1“ and also
different with id=“para2”.
By Hansa(Hansika)
Halai

Note: An id name cannot start with a number! By Hansa(Hansika)
Halai

O The class selector selects elements with a specific
class attribute.
O To select elements with a specific class, write a period
(.) character, followed by the name of the class.(P
sector in example)
O You can also specify that only specific HTML elements
should be affected by a class.(h1 sector in example)
O You will see both method’s example on next slide..
By Hansa(Hansika)
Halai

Note: A class name cannot start with a number! By Hansa(Hansika)
Halai

O Grouping Selectors
• If you have elements with the same style definitions.
• It will be better to group the selectors, to minimize the
code.
• To group selectors, separate each selector with a
comma.
Instead of write like this, you can write in
this sorter way
By Hansa(Hansika)
Halai

O 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:
O Ex:
By Hansa(Hansika)
Halai

How to insert CSS?
O There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
1. External Style Sheet:
• With an external style sheet, you just need to create
separate css file where you manage entire look of your
website.
• Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element
goes inside the <head> section. By Hansa(Hansika)
Halai

O An external style sheet can be written in any text editor.
The file should not contain any html tags. The style
sheet file must be saved with a .css extension.
O Ex: This is how test.css file look
like
Output
By Hansa(Hansika)
Halai

2. Internal Style Sheet:
• An internal style sheet may be used if one single
page has a unique style.
• Internal styles are defined within the <style>
element, inside the <head> section of an HTML
page.
• The downside of using an internal stylesheet is that
changes to the internal stylesheet only effect the
page the code is inserted into.
By Hansa(Hansika)
Halai

3. Inline Styles:
• An inline style may be used to apply a unique style for
a single element.
• To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any
CSS property.
• Ex:
By Hansa(Hansika)
Halai

Multiple Style Sheets
O If some properties have been defined for the same
selector (element) in different style sheets, the value
from the last read style sheet will be used.
O Ex:
• Assume that an external style sheet (mystyle.css)has the
following style for the <h1> element:
mystyle.css
h1{
color: navy;
}
By Hansa(Hansika)
Halai

Few examples:
By Hansa(Hansika)
Halai

What is CSS?

More Related Content

What's hot

Similar to What is CSS?

Recently uploaded

In this document

What is CSS?