CSS Tutorial
Cascading Style Sheets (CSS) is
the core technologies for building Website web pages.CSS is a language for
define how documents are display to users. The CSS files can help define the
website color, font size, animation, layout and position of text and other HTML
tags, CSS is elementary to web design.
Without CSS, your websites is a
plain text on white backgrounds. if you want learn css you must first
understand a little about HTML, CSS saves a lot of your time. CSS helps create
a static look several pages of a Web site. It allows adapting the presentation
to different types of devices, such as LCD Large Screen Laptop screens, Mobile
screens. Cascading Style Sheets is also separate of HTML and can be used with
any XML-based markup language.
The kinds of CSS is three
external, internal, and inline, External styles sheet manage how things view
across many pages on a website. Internal styles manage the look of just one
page. Inline styles Manage just one element of a single page, below some are
example.
CSS tutorial for beginners
<h1 style="color:red;">This is a red Heading Inline CSS Example</h1>
Internal CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: red;}
p {color: black;}
</style>
</head>
<body>
<h1> This is a red heading Internal CSS Example</h1>
<p> This is a red Heading Internal CSS Examplep>
</body>
</html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: red;}
p {color: black;}
</style>
</head>
<body>
<h1> This is a red heading Internal CSS Example</h1>
<p> This is a red Heading Internal CSS Examplep>
</body>
</html>
EXTERNAL CSS EXAMPLE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading External CSS Example
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading External CSS Example
</h1>
<p>This is a paragraph External CSS Example
<p>This is a paragraph External CSS Example
</p>
</body>
</html>
</body>
</html>
SEE
BELOW STYLE SHEET LOOKS:
body {
background-color: red;
}
h1 {
color: red;
}
p {
color: black;
}
background-color: red;
}
h1 {
color: red;
}
p {
color: black;
}
How to use fonts in css file.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Arial;
font-size: 14px;
}
p {
color: black;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading fonts</h1>
<p>This is a paragraph small fonts.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color: red;
font-family: Arial;
font-size: 14px;
}
p {
color: black;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading fonts</h1>
<p>This is a paragraph small fonts.</p>
</body>
</html>
HOW TO SET CSS MARGIN AND PADDING
p {
border: 1px solid black;
padding: 35px;
}
border: 1px solid black;
padding: 35px;
}
p {
border: 1px solid black;
margin: 40px;
}
border: 1px solid black;
margin: 40px;
}
HOW TO MAKE HYPERLINK IN CSS:
You can click on a hyperlink
and jump to another website page.
<a href="#">link
text</a>
How to change html link color blow are some css examples
How to change html link color blow are some css examples
<style>
a:link {
color: red;
background-color: #ccc;
text-decoration: none;
}
a:visited {
color: Black;
background-color: #ccc;
text-decoration: none;
}
a:hover {
color: red;
background-color: #ccc;
text-decoration: underline;
}
a:active {
color: Blue;
background-color: transparent;
text-decoration: underline;
}
</style>
a:link {
color: red;
background-color: #ccc;
text-decoration: none;
}
a:visited {
color: Black;
background-color: #ccc;
text-decoration: none;
}
a:hover {
color: red;
background-color: #ccc;
text-decoration: underline;
}
a:active {
color: Blue;
background-color: transparent;
text-decoration: underline;
}
</style>
HOW TO MAKE ID:
Below is some
css example
<style>
#katutorial {
background-color: red;
color: black;
padding: 35px;
text-align: center;
}
</style>
<h1 id="katutorial">My Header</h1>
#katutorial {
background-color: red;
color: black;
padding: 35px;
text-align: center;
}
</style>
<h1 id="katutorial">My Header</h1>
What difference between class
and ID?
<style>
/* There are some elements with ID "katutorial" */
#katutorial{
background-color: red;
color: black;
padding: 35px;
text-align: left;
}
/* there are some elements with class name "katutorial" */
.katutorial2{
background-color: white;
color: black;
padding: 20px;
}
</style>
<h1 id="katutorial">My Cities</h1>
<h3 class="katutorial2">London</h3>
<p>London is the capital of England.</p>
<h3 class="katutorial2">Paris</h3>
<p>Paris is the capital of France.</p>
<h3 class="katutorial2">Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
/* There are some elements with ID "katutorial" */
#katutorial{
background-color: red;
color: black;
padding: 35px;
text-align: left;
}
/* there are some elements with class name "katutorial" */
.katutorial2{
background-color: white;
color: black;
padding: 20px;
}
</style>
<h1 id="katutorial">My Cities</h1>
<h3 class="katutorial2">London</h3>
<p>London is the capital of England.</p>
<h3 class="katutorial2">Paris</h3>
<p>Paris is the capital of France.</p>
<h3 class="katutorial2">Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
About kahelath
No comments