Scribd
Upload
2 views

CSS_Notes_Part1

Cascading Style Sheets (CSS) is a language used to style HTML documents, enhancing compatibility and reducing code for faster downloads. It includes syntax elements such as selectors, properties, and values, and allows for embedded CSS within HTML using the <style> element. Various selectors like element, id, class, and grouping selectors help apply styles efficiently to HTML elements.

Uploaded by

mushthaquem7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS_Notes_Part1

Cascading Style Sheets (CSS) is a language used to style HTML documents, enhancing compatibility and reducing code for faster downloads. It includes syntax elements such as selectors, properties, and values, and allows for embedded CSS within HTML using the <style> element. Various selectors like element, id, class, and grouping selectors help apply styles efficiently to HTML elements.

Uploaded by

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

CASCADING STYLE SHEET 3

Introduction to CSS3
Cascading Style Sheets (CSS) is a style sheet language
describing the appearance (formatting) of an HTML
document like background images, font styles, and
sizes. It is used; to decrease the amount of source code
on a page allowing faster download speeds; to improve
different web browser compatibility; to enable multiple
pages to share the same formatting; an increased range
of formatting options and quicker synchronized
updating of multiple web pages.
Cascading Style Sheets Syntax:

· Selector: A selector is an HTML tag in which 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 or border etc.
· Value: Values are assigned

Selector {property: value ;}

Embedded CSS - The <style> Element:


You can put your CSS rules into an HTML document
using the <style> element. This tag is placed inside
<head>...</head> tags. Rules defined using this syntax
will be applied to all the elements available in the
document. Here is the generic syntax:

<head>
<style type="text/css" >
Style Rules
............
</style>
</head>

CSS selectors
css selectors are used to find/select HTML elements
based on their id,class,type.
1.Element selectors/tag selectors
<html>
<head>
<style>
p{
text-align:center;
color:red;
font-size: 60px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>good morning</p>
</body>
</html>
2. Id selector's(#)
This selectors is used for the style rule below will be
applied to the HTML element with id="ID".
eg:
#para1{
text-align:center;
color:blue;
}
<body>
<p>goodmorning</p>
<p id="para1">how are you </p>
</body>
3.Class selector's(.)
In class selector's, all HTML elements with class=" "
will be select, and it select the element with a specific
class.
eg: <head>
<style>
.center{
text-align:center;
color:green;
}
</style>
</head>
<body>
<p class="center">hello</p>
</body>
4. Grouping selectors(, ,)
Grouping selectors means that we can group the
selectors to minimize the code. In group selectors,
seperate each element with a comma.
eg: <head>
<style>
h1,h2,p{
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1>hai</h1>
<h2>hello</h2>
<p>Good morning</p>
</body>

5.Descendant selector
div p{
}
used to call all p elements of div, i.e, children,
grandchildren and so on.
Output

General Sibling Selector (~)

Output

You might also like