CSS is the language we use to style the web pages. CSS stands for Cascading Styles Sheets. It describes how HTML elements are displayed on the screen. It can control the layout of multiple web pages all at once.
CSS Syntax:-
The selector points the HTML elemet you want to style.
The declaration block contains one or more declarations seprated bs semicolons.
Each declaration includes a css property name and value, seprated by a colons.
Multiple CSS declarations are seprated with semicolons, and declarations block are surrounded by curly braces.
Advantages of CSS:-
- Time saving:-We can write css once and then reuse same sheet in multiple HTML pages. It saves lots of time.
- Faster load pages:- If we use CSS, we do not need to write HTML tag attributes everytime. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
- Easy maintenence:- To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
- Multiple device compatiblity:- Style sheets allow content to be optimized for more than one type of device.
- Global web standards:- Now HTML attributes are being deprecated and it is bieng recommended to use CSS.
Ways of inserting CSS:-
- External style sheets
- Internal style sheets/Embedded Style sheets
- Inline css
External Style Sheets:-
An external style sheet is a separate document that contains only CSS rules. An external style sheet helps to change the look of an entire website by changing just one css file. It should not contain any HTML Tags. It has .css extension.
Example:-
p { color: red; font-size: 24px;}
h1{ color: blue; font-size: 24em;}
1. Open notepad++ or any other Editor or IDE
2. Write CSS Code
3. Save with .css extension for example geekyshows.css
How to link Web Page to an External Style Sheet:-
The href attribute with <link> element inside the <head> tag is used to link web page to an external style sheet.
<html>
<head>
<title>Welcome to Geekyshows</title>
<link rel=“stylesheet” href=“geekyshows.css”>
</head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<p>I am second Paragraph</p>
</body>
</html>
Internal Style Sheets:-
Internal Style sheet is a set of style that is created as a part of HTML document. An internal style sheet may be used if one single page has a unique style.
Internal Style sheets are created using <style> element, which is added inside the <head> element of the HTML document.
Example:-
<html>
<head>
<title>Hello CSS</title>
<style type=“text/css”>
p { color: red; font-size: 24px;}
h1{ color: blue; font-size: 24em;}
</style>
</head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<p>I am second Paragraph</p>
</body>
</html>
Inline Styles:-
Inline style is useful when we need to define specific style for individual elements present on a web page. The style attribute in a specific Tag or element, is used to create inline style. The style attribute can contain any CSS property between double quotes.
Ex:-
For paragraph:-
<p style=“color: red; font-size: 22px;”> I am first paragraph</p>
<p> I am second paragraph</p>
For Heading: –
<h1 style=“color: red; font-size: 22px;”> I am Heading</h1>