* 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 Syntax
CSS Selectors
CSS selectors allow you
to select and manipulate HTML elements.
CSS selectors are used
to "find" (or select) HTML elements based on their id, class, type, attribute, and more.
The element Selector
The element selector
selects elements based on the element name.
You can select all <p> elements on a page like this:
(all <p> elements will be
center-aligned, with a red text color)
The element
Selector Syntax
p {
text-align: center;
color: red;
}
The id Selector
The id selector uses
the id attribute of an HTML element to select a specific element.
An id should be unique
within a page, so the id selector is used if you want to select a single,
unique element.
To select an element
with a specific id, write a hash character, followed by the id of the element.
The style rule below
will be applied to the HTML element with id="para1":
Example :
#para1
{
text-align: center;
color: red;
}
The class Selector
The class selector
selects elements with a specific class attribute.
To select elements with
a specific class, write a period character, followed by the name of the class:
In the example below,
all HTML elements with class="center" will be center-aligned:
Class selector
Example :
.center
{
text-align: center;
color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
l External
style sheet
l Internal
style sheet
l Inline
style
External Style Sheet
With an external style sheet, you can change the
look of an entire website by changing just one file!
Each page must include a reference to the external
style sheet file inside the <link>
element. The <link> element
goes inside the head section:
<head>
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
External style sheet Example:
body {
background-color: lightblue;
}
h1 {
color:
navy;
margin-left: 20px;
}
Internal style sheet
An internal style sheet
may be used if one single page has a unique style.
Internal styles are
defined within the <style>
element, inside the head section of an HTML page:
Internal Style
Sheet Example:
<head>
<style>
body
{
background-color: linen;
}
h1
{
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
An inline style may be used to apply a unique style
for a single element.
An inline style loses many of the advantages of a
style sheet (by mixing content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the
relevant tag. The style attribute can contain any CSS property. The example
shows how to change the color and the left margin of a <h1> element:
Inline
Styles Example:
<h1 style="color:blue;margin-left:30px;">This
is a heading.</h1>
Tidak ada komentar:
Posting Komentar