Scribd
Upload
31 views

Introduction To CSS3

The document introduces CSS (Cascading Style Sheets), which is used to design and style HTML elements. It discusses the basic syntax and structure of CSS including selectors, declarations, properties and values. It also covers different types of CSS selectors such as element, id, class, universal and group selectors.

Uploaded by

ggkoushi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Introduction To CSS3

The document introduces CSS (Cascading Style Sheets), which is used to design and style HTML elements. It discusses the basic syntax and structure of CSS including selectors, declarations, properties and values. It also covers different types of CSS selectors such as element, id, class, universal and group selectors.

Uploaded by

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

introduction to CSS3

● CSS stands for Cascading Style Sheets

● CSS is used to design HTML tags.

● CSS is a widely used language on the web.

● HTML, CSS and JavaScript are used for web designing. It helps the web designers
to apply style on HTML tags.

CSS allows you to apply styles to web pages. More importantly, CSS enables you
to do this independent of the HTML that makes up each web page.
CSS is easy to learn and understand, but it provides powerful control over the
presentation of an HTML document.
WHY CSS?
● CSS saves time: You can write CSS once and reuse the same sheet in multiple
HTML pages.
● Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
● Search Engines: CSS is considered a clean coding technique, which means
search engines won’t have to struggle to “read” its content.
● 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.
● Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.
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 Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:

1. color: yellow;

2. 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: Values are assigned to CSS properties. In the above 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.

1. CSS Element Selector

2. CSS Id Selector

3. CSS Class Selector

4. CSS Universal Selector

5. CSS Group Selector

1) CSS Element Selector


The element selector selects the HTML element by name.

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: blue;

</style>

</head>
<body>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Output:-

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

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

Example:-

<!DOCTYPE html>

<html>

<head>

<style>
#para1 {

text-align: center;

color: blue;

</style>

</head>

<body>

<p id="para1">Hello Students</p>

<p>This paragraph will not be affected.</p>

</body>

</html>

Output:-

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.

Note: A class name should not be started with a number.

Example:-
<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: blue;

</style>

</head>

<body>

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body>

</html>

Output:-
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.

Example:-

<!DOCTYPE html>

<html>

<head>

<style>

*{

color: green;

font-size: 20px;

</style>

</head>

<body>

<h2>This is heading</h2>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Output:-
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.

Example:-

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: blue;

</style>
</head>

<body>

<h1>Hello Students</h1>

<h2>Hello Mam</h2>

<p>This is a paragraph.</p>

</body>

</html>

Output:-

You might also like