How to Make CSS for Mobile Devices
The procedure for creating Cascading Style Sheets for Web pages intended to be viewed on smartphones and other mobile devices is no different from how you would create CSS for Web pages displayed on personal computers. Styles can be added to the <head> section of an HTML document or you can create an external CSS file and import it into the <head> section of the document.
Other People Are Reading
Instructions
-
Add CSS Code to the HTML File
-
1
Open a new HTML file in your preferred text or HTML editor. Copy and paste this code into the document:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title></head>
<body>
</body>
</html> -
2
Click the blank line below the <title> tags and type a pair of style tags as follows:
<title>Page Title</title>
<style type="text/css"></style>
This sets up the CSS portion of the page. All of your CSS code goes between the opening and closing <style> tags.
-
-
3
Create the CSS styles you desire. For example, you might want to use a body CSS rule that looks similar to this one:
<style type="text/css">
.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
</style> -
4
Continue typing CSS definitions until your Web page is styled to your satisfaction.
-
5
Create the content of your Web page between the opening and closing <body> tags. Apply your CSS rules to the content as desired.
-
6
Save the HTML file with an ".html" extension.
Create an External CSS File
-
7
Open a new HTML file in your preferred text or HTML editor. Copy and paste this code into the document:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title></head>
<body>
</body>
</html> -
8
Click on the blank line immediately following the <title> tag set and type the following code, which will import your "style.css" file:
<link href="style.css" rel="stylesheet" type="text/css">
This code imports the external style sheet that will be used to format the various elements of your Web page.
-
9
Open a new file in your text or HTML editor and type the following code on the first line:
@charset "utf-8";
This code tells the browser this is a CSS file.
-
10
Type in any CSS style definitions that you want to apply to your HTML document. For example, the body style might look similar to this:
@charset "utf-8";
.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}When you've finished entering CSS style definitions, save this file as "style.css".
-
11
Create the content of your Web page between the opening and closing <body> tags. Apply your CSS rules to the content as desired.
-
12
Save your HTML file with an ".html" extension.
-
1
Tips & Warnings
Upload both the HTML document and your CSS style file to your Web server. Otherwise, the page will not be accessible to mobile devices.
References
Resources
- Photo Credit Comstock Images/Comstock/Getty Images
