3. CSS
Know your
Used to style webpages
Cascading Style Sheets
Can be inserted Internally or Externally
Tells browsers how to display HTML files.
4. CSS Rules
Know your
A selector: Indicates what element to style
CSS Rules Consist of two main functions
Declaration Block containing other declarations
Each declaration block contains a property
name and value separated by a colon :
The block is then surrounded by a curly bracket
} which marks the end of the block
5. CSS Rules
Know your
color: blue;H1} font-size: 40px; }
Selector Declaration Declaration
Property PropertyValue Value
the heading text would be blue and font size of 20.
6. <head>
<title> My First Website </title>
<style>
h1 { color: blue; font-size: 40px;}
</style>
</head>
<body>
<div class=“content”>
<h1>welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
welcome to our website
7. External Style Sheet
Know your
Useful for multipage websites that share code
A link to this is placed within the head section
Saves time not inserting code in every page
Improves web page load time
Creates consistent look to all documents
8. <head>
<title> My First Website </title>
<style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
h1 { color: blue; font-size: 40px;}
</style>
</head>
<body>
<div class=“content”>
<h1>welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
welcome to our website
External Stylesheet
9. Hmmmm!!
Know your
The text is too close to the edge..
We can fix this by adding a margin-left property
This moves the text away from the left by ?px
10. <head>
<title> My First Website </title>
<style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
}
h1 {
color: blue;font-size: 40px; margin-left:50px;
}
</style>
</head>
<body>
<div class=“content”>
<h1>welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
welcome to our website
H1 Style
12. <head>
<title> My First Website </title>
<style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
h1 {
color: blue;font-size: 40px; margin-left:50px;
}
body { background-color:silver;
}
</style>
</head>
<body>
<div class=“content”>
<h1>welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
Body CSS
welcome to our website
13. Inline Style
Know your
Used for styling a single element on a page
Applied to specific elements with the <body> tags
All linked pages in an external stylesheet
14. <head>
<title> My First Website </title>
<style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
h1 {
color: blue;font-size: 40px; margin-left:50px;
}
body { background-color:silver;
}
</style>
</head>
<body>
<div class=“content”>
<h1 style=" color: blue;font-size: 40px; margin-left:50px;
">welcome to our website</h1>
</body>
</html>
RUN >> OUTPUT
Inline Style
welcome to our website
15. Element ID’s
Know yourThis gives a group of elements their own ID
Can be used to style an individual element
# styles the element with the specified id
Syntax : #id {css declarations;}
16. }
body { background-color:silver;
}
#intro {
background-color: yellow;
color: black;
font-size: 16px;
font-family: verdana;
}
</style>
</head>
<body>
<div class="content">
<p id="intro">I love learning HTML.</p>
<p id="body">But CSS is even cooler.</p>
</div>
<p>Iam learning how to create a website.</p>
</body>
</html>
RUN >> OUTPUT
CSS #id Selector
welcome to our website
But CSS is even cooler.
Iam learning how to create a website.
I love learning HTML.
17. Class Selector
Know yourPoints to the HTML element you want to style
Selects elements with a specific class attribute
Can be applied to a range of elements
Symbol (.) followed by the name of the class.
18. }
body { background-color:silver;
}
.intro {
background-color: blue;
color: white;
font-size: 16px;
font-family: Arial;
}
</style>
</head>
<body>
<div class="content">
<p id="intro">
<p>I love learning HTML.</p>
<p>But CSS is even cooler.</p>
</div>
<p>Iam learning how to create a website.</p>
</body>
</html>
RUN >> OUTPUT
CSS .class Selector
welcome to our website
Iam learning how to create a website.
I love learning HTML.
But CSS is even cooler