Scribd
Upload
32 views10 pages

UNIT 1 -CSS

CSS Notes

Uploaded by

ayyanreddymanda
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
32 views10 pages

UNIT 1 -CSS

CSS Notes

Uploaded by

ayyanreddymanda
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/ 10

CSS

• CSS stands for Cascading Style Sheets


• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External style sheets are stored in CSS files
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
CSS Syntax

• 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 CSS property name and
a value, separated by a colon.
• Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded
by curly braces.
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
• CSS selectors are divided into five categories
• CSS element Selector : The element selector selects HTML
elements based on the element name
• CSS id Selector : The id selector uses the id attribute of an HTML
element to select a specific element. The id of an element is
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.
• CSS class Selector : The class selector selects HTML elements
with a specific class attribute. To select elements with a specific
class, write a period (.) character, followed by the class name.
• CSS Universal Selector: The universal selector (*) selects all
HTML elements on the page.
• CSS Grouping Selector: The grouping selector selects all the
HTML elements with the same style definitions. the h1, h2, and
p elements have the same style definitions.
<!DOCTYPE html>
<html><head> <style>
h1{
color:blue;
border:4px dashed;
}
#myId{
color:aqua;
border: 6px dotted;
}
.myClass{
color:rebeccapurple;
text-align: center;
} <!--
*{
text-align:left;
color:magenta;
}-->
h4, h5{ text-align:right;
margin:500px; } </style> </head> <body> <h1
>CSS Element Selector</h1> <h2 id="myId">CSS ID
Selector</h2> <h3>CSS class Selector</h3> <p
class="myClass">This is an example of CSS Class Selector</p>
<h4>CSS Universal Selector</h4> <h5>CSS Group
Using CSS
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to
blue, and the text color of the <p> element to green:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:green;">A green paragraph</p>
</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
• The following example sets the text color of ALL the <h1> elements
(on that page) to blue, and the text color of ALL the <p> elements to
red. In addition, the page will be displayed with a "powderblue"
background color:
Internal CSS Program
<!DOCTYPE html>
<html> <head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS

• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of
each HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
styles.css:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

You might also like