Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
21 views

Introduction To CSS and CSS Selectors

s

Uploaded by

rouiescottr
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

Introduction To CSS and CSS Selectors

s

Uploaded by

rouiescottr
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CASCADING

STYLE
SHEETS
Introduction to CSS
WHAT IS
CSS?
• CSS stands for Cascading Style Sheets. It is
a style sheet language which is used to
describe the look and formatting of a
document written in markup language.

• It provides an additional feature to HTML. It


is generally used with HTML to change the
style of web pages and user interfaces.
WHAT DOES CSS
DO?
• You can add new looks to your old HTML
documents.

• You can completely change the look of your


website with only a few changes in CSS
code.
WHY USE
CSS
1) Solves a big
problem
Before CSS, tags like font, color, background
style, element alignments, border and size had
to be repeated on every web page. This was a
very long process.
For example: If you are developing a large website
where fonts and color information are added on
every single page, it will be become a long and
expensive process. CSS was created to solve this
problem. It was a W3C recommendation.
WHY USE
CSS
2)Provide more
attributes
CSS provides more detailed attributes than plain
HTML to define the look and feel of the website.
ck

CSS Syntax
A CSS rule set contains
a selector and a
declaration block.
Selector: Selector indicates the
HTML element you want to style.
It could be any tag like <h1>,
<title> etc.
Declaration
The Block:
declaration block can contain one or
more declarations separated by a
semicolon. For the above example, there
are two declarations:
• color: yellow;
CSS SYNTAX • font-size: 11 px;

Each declaration contains a property


name and value, separated by a
colon.
Property:
A Property is a type of attribute of HTML
element. It could be color, border etc.

Value
CSS SYNTAX : are assigned to CSS properties. In
Values
the given example, value "yellow" is
assigned to color property.

Selector{Property1: value1; Property2:


value2; ..........;}
CSS
Selector
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
There are several different types of selectors in
CSS.
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
1) CSS Element
Selector
The element selector selects the HTML element by name.
Example
Result:

CSS
Element
Selector
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a
specific element. It is used with a # hashtag character. An id is
always unique within the page so it is chosen to select a single,
unique element.

#para1 {
Example
Result:

CSS
ID Selector
3) CSS Class Selector
The class selector selects HTML elements with a specific class
attribute. It is used with a period character . (full stop symbol)
followed by the class name.
3) CSS Class Selector
The class selector selects HTML elements with a specific class
attribute. It is used with a period character . (full stop symbol)
followed by the class name.

.center {
Example
Result:

CSS
ID Selector
4) CSS Universal
Selector
The * selector selects all elements.
The * selector can also select all elements
inside another element
4) CSS Universal
Selector
5) CSS Group Selector
The grouping selector is used to select all the elements with the
same style definitions.

Grouping selector is used to


minimize the code. Commas
are used to separate each
selector in grouping. Let's
see the CSS code without
group selector.
5) CSS Group Selector
As you can see, you need to define CSS
properties for all the elements. It can be
grouped in following ways:

You might also like