CSS Introduction
What is CSS?
CSS stands for Cascading Style Sheets.
The 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.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The 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.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
There is Three Ways to Insert CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css extension.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Here is how the "mystyle.css" file looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
CSS Border Width / CSS Border Color / CSS Rounded Borders
<!DOCTYPE html>
<html>
<head>
<style>
p.three {
border-style: solid;
border-width: 25px 25px 25px 25px; /* 25px top, 10px right, 4px bottom and 35px left */
border-color: blue;
border-radius: 155px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>
<p class="three">Some text.</p>
</body>
</html>
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 80px;
margin-left: 150px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
How to link style.css to index.html ?
Create styles.css and add below content under <head> tag
<link rel="stylesheet" href="styles.css">
No comments:
Post a Comment