HTML and CSS
This article explains how to use CSS for styling HTML pages.
Table of Contents
Cascading Style Sheets (CSS) allow you to define styles, layouts and spacing separate from the content which should be styled.
The CSS information is typically contained in an external file. Other code, e.g. a HTML page, can reference to the CSS file for its layout information. For example you define in an external file the fonts and colors used for certain elements.
CSS is defined as a standard. Currently the versions CSS 2.1 and CSS 3 are most widely used.
The CSS standard defines selectors and style rules. The syntax is defined as follows:
selector { property:value; } A selector can be one of a predefined identifier (e.g. H1), a class name (e.g. .myclass) or an identifier (e.g. #myuniqueid).
In CSS an identifier is supposed to be unique across all of the elements in a page (or window in our case) while a class can be assigned to several elements.
For example the following CSS file defines the size and color of the
h1 tag.h1 { color:red; font-size:48px; } In the following you create a local html page and style it with CSS. Create a new directory and create the following file called
styles.css./* this is a comment */
/* we style only the h1 element*/
h1 {
border-style:solid none solid solid;
color:red;
}
In the same directory define this HTML file. This file defines that it will use the
styles.css style sheet file which can be found in the same directory.<!DOCTYPE html>
<html>
<head>
<title>An HTML5 Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Your first HTML5 page</h1>
<p>This is a <a href="http://www.vogella.com">link</a> to another webpage</p>
<!-- this is a comment -->
</body>
</html>
HTML allows to define sections via "div" containers. These "div" containers can be used to style parts of the HTML document differently. For this purpose you can identify the div containers via id and class attributes.
An id must be unique in the HTML document while the class attribute can be defined for several HTML elements. CSS allows to style these elements via special selectors. div can also be identified by an id and / or by a class and can container other block elements.
The following rule applies:
Table 1. Styling div containers
| Definition | CSS selection rule |
|---|---|
| <div id="myid">Content</div> | #myid {css rules....} |
| <div class="myclass">Content</div> | .myclass {css rules...} |
The following example demonstrate both usages. Create the file "stylesdiv.css"
/* this is a comment */
/* we style only the h1 element*/
#number1 {
color:red;
}
#number2 {
color:blue;
}
.class1 {
font-weight: bold;
}
.class2{
font-weight: normal;
color: green;
}
Create the following HTML file to use the style sheet.
<!DOCTYPE html>
<html>
<head>
<title>An HTML5 Document</title>
<link href="stylesdiv.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="number1"> Some Text </div>
<div id="number2"> Another Text</div>
<div class="class1"> Styling with classes </div>
<div class="class2"> Another class </div>
</body>
</html>
You can also select by position in the HTML document. For example "td a" only selects links which are within a table row.
You can also use other attributes for example the following will define certain styling for links which have been visited or over which the mouse hovers. The will identify if you have a link already visited or if the mouse hovers over a link and will change the display of the link accordingly.
a:visited {color:grey}
a:hover {text-decoraton:underline} A CSS file can import other CSS files via the
@import statement. It must be the first rule in the style sheet using the @import statement.@import "mystyle.css";
@import url("mystyle.css");
A block element can be thought of as a box which contains something.This box has a border to other elements and you can influence the distance to other elements via the margin and padding settings.
Margin defines the outer distance of other elements. You can set values for top, right, bottom and left.
You can define the margins for a box individual or combine them into one statement.
body {
margin-top: 10px;
margin-right: 120px;
margin-bottom: 20px;
margin-left: 8px;
} body {
margin: 100px 40px 10px 70px;
} Padding defines the inner distance of elements to the end of the box.
<!DOCTYPE html>
<html>
<head>
<title>Margin, padding test</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="test">Your first HTML5 page</p>
</body>
</html>
#test {
width: 200px;
height: 60px;
padding: 10px;
border: 5px dotted blue;
margin: 5px, 10px, 20px, 30px;
} The total size of the HTML box is defined by the initial size of the box, plus the margins and the padding and a border, if defined.
CSS allows to setup element with fixed, relate and absolute positions. Relative is the standard and will change the distribution of the different text containers based on the available space.
Frequently you want to make sure that you boxes stay on a specific place. You can use postion:absolute for this. A block element with this style will be removed from the normal flow of the HTML page and will have a fixed space. For example:
<!DOCTYPE html>
<html>
<head>
<title>An HTML5 Document</title>
<style type="text/css">
#center {
position: absolute;
width: 200px;
left: 400px;
background-color: green;
}
#left {
position: absolute;
width: 200px;
background-color: blue;
top:200px;
}
#right {
position: absolute;
background-color: red;
left: 200px;
width: 200px;
}
</style>
</head>
<body>
<h1>HTML5 with CSS positioning</h1>
<p id="center">Center fixed box</p>
<p id="left">Left fixed box</p>
<p id="right">Right fixed box</p>
</body>
</html>
If you want to have a element always on a certain position you can use the fixed position and will not move even if you scroll down the HTML page.
<!DOCTYPE html>
<html>
<head>
<title>An HTML5 Document</title>
<style type="text/css">
p.position_fixed {
position: fixed;
top: 200px;
right: 5px;
}
</style>
</head>
<body>
<h1>HTML5 with CSS positioning</h1>
<p class="position_fixed"><a href="http://www.twitter.com/vogella">Follow
vogella on twitter</a></p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
<p>lots of information here</p>
</body>
</html>
For more examples see CSS positioning .
You can use HTML div container and CSS to layout your webpage.
Your example the following webpage uses div container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>This is a tile</title>
<link href="styleslayout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
<style type ="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
background: #aba;
width: 100%;
}
#leftcol {
background: #aaa;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #aaa;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #eee;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #aba;
clear: both;
width: 100%;
}
</style>
This result in the following layout.
Via CSS you can use media queries to define CSS settings based on certain criteria. A common use case is to have different CSS based styling for devices with only limited pixels and other designs for larger screens.
For example the following CSS defines a fixed position for a search box. If the screen has a maximum width of 750 or less different styling is used.
#searchfixed {
position: fixed;
top: 8px;
right: 200px;
z-index: 4;
width:200px;
}
#searchwrapper{
width:100%;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
height:20px;
width:150px;
border:none;
background-color:#fcfcfc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left: 5px;
}
#search_button {
position:absolute;
top:3px;
right:15px;
}
@media screen and (max-width: 750px) {
#topnav {
height: 80px;
}
#topnav ul {
width: 100%;
}
#logo {
top: 30px !important;
}
#searchfixed {
top: 45px !important;
left: 0;
right: auto !important;
}
#search_button {
right: 45px !important;
}
#search_field {
margin-left: 0.55em;
}
#container, #trainingcontainer {
margin: 90px auto !important;
}
} The most consist way to define size is the unit "em" which is a relative unit to the font-size. 1em is as large as the font-size. You can use 1em for defining the space between words (word-spacing), or letters (letter-spacing) or to define the line height (line-height) of an HTML element. text-indent allows you to define the intent of the first line of a paragraph. text-indent: -1em put the first line a bit before the rest of the text.
Via text-align you can define how your content (not only text) should be aligned. text-transform allow to transform the text to upper, lower case or to capitalize the first letter.
texttransform:uppercase;
texttransform:lowercase;
texttransform:capitalize;
text-align:left;
text-align:right;
text-align:center;
text-align:justify;
No comments:
Post a Comment