HTML and CSS
We have until now learned how to make a basic web page using all the marked up text. But it does lag something i.e. “style”. In order to make your webpage look more appealing you may want to style it in some particular way. For example you may want a particular text to have a particular color or font or you may want the page to have an attractive background color or image. All this can be done using CSS.
CSS stands for “Cascaded Style Sheets”. CSS is an extremely powerful style sheet language which is used to control the look and feel of the content written in HTML. It’s an all new language completely different from HTML.
CSS defines styles for your documents, including the design, layout and variations in display for different devices and screen sizes.
WHY USE CSS
- CSS Provides Efficiency in Design and Updates
- CSS Use Can Lead To Faster Page Downloads
- CSS is Easy to Work With
HOW TO USE CSS
CSS can be added to HTML elements in 3 ways:
- Inline – by using the style attribute in HTML elements
- Internal – by using a <style> element in the <head> section
- External – by using an external CSS file
INLINE
In this method the HTML style attribute sets the style for the HTML elements. The syntax for it is:
<tagname style=”property:value;“>
The property is a CSS property. The value is a CSS value.
We will add style to certain elements in this page.
HTML BACKGROUND
The background-color property changes the background color of the element. All elements default to a transparent background.
Colors can be specified in several ways:
- Name: In HTML, a color can be specified by using a color name for example background-color: red; HTML supports 140 standard color names.
- RGB: A triplet of values from 0 to 255, representing the Red-Green-Blue color spectrum. For example background-color: rgb(255, 0, 0). Here each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
- RGBA: Like RGB but with a fourth value representing the opacity, ranging from 0 to 1. For example background-color: rgba(255, 0, 0, 0);
- HEX: Color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).For example background-color: #FF0000;
HTML FONTS
The font-family property defines the font family of the text, which changes how the letters look.
Example
<h1 style=”font-family:arial;”>This is a heading</h1>
A specific font name can be specified, like font-family: “Arial”,
But that will only work if viewers also have “Arial” on their computer. It’s better to specify a generic family name (serif, sans-serif, monospace, cursive), because then browsers will look for that sort of font on the viewer’s computer.
Note: The best option is to give a comma separated list of font families, as then the browser will prefer the first but use the others as backup options.
HTML TEXT COLORS
The color property changes the text color for an HTML element. Again colors can be specified in several ways that we have already discussed.
Example
<h1 style=”color: red ;”> This is a heading</h1>
HTML TEXT SIZE
The font-size property specifies the size of the text. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword.
The “px” unit lets you define size of font in terms of pixels. The default font-size for body text is typically 12px. There are various keywords that can be used for less precise sizing: xx-small, x-small, small, medium, large, x-large, xx-large.
There are several options for relative sizing: percentage (120%) and ems (1.2em) that will size the font relative to the body size.
HTML TEXT ALINGNMENT
The text-align property defines the horizontal text alignment for an HTML element. It can be
- Left
- Right
- center
Example
<h1 style=”text-align:center;”>This is center aligned</h1>
Let the fun begin!!!!!!!!
We will add a background color and other styles to our web page :
<! DOCTYPE html> <html> <head> <title> INLINE CSS </title> </head> <body style="background-color:powderblue;"> <h1 style="text-align:center;color:blue;font-size:64px;">WATER BODIES </h1> <p style="font-family:arial;color:green;font-size:54px;text-align:left;">OCEAN</p> <p style="font-family:algerian;color:purple;font-size:44px;text-align:center;">SEA</p> <p style="font-family:cursive;color:red;font-size:30px;text-align:right;">RIVER</p> </body> </html>
INTERNAL
An internal CSS is defined in the <head> section of an HTML page, within a <style> element
It is only for a single HTML page.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
h1 {font-family: arialblack;}
p {color: red;}
</style>
</head>
<body>
<h1>This is an example of internal css </h1>
<p>I am in red color</p>
</body>
</html>
As we can see style element is placed inside the head element. All the CSS rules go between the style tags.
EXTERNAL
This is the most common method of attaching CSS to an HTML document. With this method all the style rules are contained in a single text file that is saved with the “.css” extension. This file is saved on your server and you link to it directly from each HTML file.
The link is just a simple line of HTML that you put in the <head> section of your HTML document, it looks like this:
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
Make sure you include the correct path to your CSS file. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it’s saved in a folder, then specify it like this href=”foldername/mystyles.css”.
You can include multiple CSS files if required.
PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com
