CSS Primer
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
There are three ways to apply CSS to HTML: Inline, internal, and external.
Inline
Inline styles are put straight into the HTML tags using the style attribute.
They look something like this:
<p style="color: red">text</p>
Internal
Embedded, or internal, styles are used for the whole page.
Inside the head element, the style tags surround all of the styles for the page.
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
This will make all of the paragraphs in the page red and all of the links blue.e="color: red">text</p>
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will
simply look something like:
p {
color: red;
}
a {
color: blue;
}
If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in
the HTML like this:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
CSS has selectors. Selectors are the names given to styles in internal and external style sheets.
A value is given to the property following a colon. Semi-colons are used to separate the properties.
body {
font-size: 14px;
color: navy;
}
This will apply the given values to the font-size and color properties to the body selector.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
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.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html><head><style>
p {
color: red;
text-align: center;
}
</style></head><body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be 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.
The style rule below will be applied to the HTML element with id="para1":
<!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 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 red and center-aligned:
<!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>
The "look and feel" of a website or piece of software describes its appearance and functionality.
People may use this term to discuss how a website looks and how it feels to navigate it.
The term can be used for any interface, but it is often used in describing websites.
No comments:
Post a Comment