HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
14 - CSS Sintax
There are two parts to a CSS rule:
- selectors
- declarations
The selectoris usually the HTML element you want to style.
Thedeclarationis the style for a specific selector.
- declarations have two parts: a property followed by a colon (:) and a space, and a value followed by a semicolon (;)
- declarations sit between curly brackets {}
The main types of CSS selectors are:
• element selector (HTML) such as p, h1, table, etc.
h1 {
color: red;
font-family: sans-serif;
text-align: left;
}
• class selector like .happy, which include a decimal (.) as a prefix
.happy {
font-size: 14px;
}
• id selector such as #para1, which include a hashtag symbol (#) as a prefix
#para1 {
background-color: green;
}
Note: Id and class are both universal attributes.
Id is used to identify unique elements, class should be used to categorize elements into groups that will be styled similarly.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link href="example.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>This is a header</h1>
<p id="para1" >This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
In the .css file we have all three selectors.
h1 {
color: red;
font-family: sans-serif;
text-align: left;
}
.happy {
font-size: 14px;
color: blue;
}
#para1 {
background-color: green;
}
The index.htmlfile in a Web browser will look like the below picture:
CSS Comments
Content between /* and */ in a CSS file is called a comment. It’s a note inserted by the developer for informational purposes only and it doesn’t affect the CSS or Web page.
Comments can appear anywhere in a style sheet.
/*These comments are typically reserved for making multi-line comments*/
p {
color: red;
/* This is a single-line comment */
text-align: center;
Fonts and Font Families
A font is a set of characters of a particular size and style. The primary way to specify fonts in CSS is by using the font-family property. Three common types of fonts are serif, sans serif, and monospace.
@font-face rule
Web fonts allow Web designers to use fonts that are not installed on the user's computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined within the CSS3 @font-face rule.
@font-face {
font-family: myFirstFont;
src: url(http://website/fonts/fontfile);
}