Scribd
Upload
26 views

UNIT 1 -CSS

CSS Notes

Uploaded by

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

UNIT 1 -CSS

CSS Notes

Uploaded by

ayyanreddymanda
Copyright
© © All Rights Reserved
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