HOW TO INSERT CSS

HOW TO INSERT CSS

13:04 Add Comment
There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

With the external style sheet, you can change the look of an whole website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

The external style sheet can be written in any text editor.File should not contain any html tags and file must be saved with a .css extension.
Example of a style sheet file called "index.css", is given below:

body {
    background-color: gray;
}

p {
    color: red;
    text-align: center;
       font-size: 18px;
}

THE ELEMENT SELECTOR

09:39 Add Comment

The element Selector:

The element selector selects elements based on the element name.
You can select all <b> elements on a page like this: (all <b> elements will be red text color, with a text font size)

Example:

b {
    color: red;
    font-size: 24px;
}

CSS CLASS SELECTOR

23:43 Add Comment

Class Selector:

The "Class" selector uses the "class" attribute of an HTML element.
To select elements with a specific class, write a period character, followed by the name of the class.
"Class" selector defines as a symbol "." (dot).

Example

.class {
    text-align: center;
    font-size: 18px;
}

CSS ID SELECTOR

22:59 Add Comment

id Selector:

The "id selector" uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single element.
An "id selector" defines as a symbol "#".

Example

#header {
    text-align: center;
    font-size: 18px;
}

CSS SELECTORS

22:48 Add Comment

CSS Selectors:

CSS selectors are use to select and manipulate HTML elements.
CSS selectors allow you to "select" HTML elements based on their id, class, type, attribute, and more.

Class Selector:

The "Class" selector uses the "class" attribute of an HTML element.
To select elements with a specific class, write a period character, followed by the name of the class.
"Class" selector defines as a symbol "." (dot).

Example

.class {
    text-align: center;
    font-size: 18px;
}

id Selector:



The "id selector" uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single element.
An "id selector" defines as a symbol "#".

Example

#header {
    text-align: center;
    font-size: 18px;
}

The element Selector:

The element selector selects elements based on the element name.
You can select all <b> elements on a page like this: (all <b> elements will be red text color, with a text font size)

Example:

b {
    color: red;
    font-size: 24px;
}

SYNTEX OF CSS

00:12 Add Comment
CSS Syntex:
A CSS rule set consists of a selector and a declaration block:


Example

p {
    color: red;
    font-size: 12px;
}

WHAT IS CSS?

23:56 Add Comment
WHAT IS CSS?


CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper.
CSS saves a lot of work. It can control the layout of multiple Web pages all at once
External Style Sheets are stored in CSS files

Uses of CSS:

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

HTML was NEVER intended to contain tags for formatting a web page. HTML was created to describe the content of a web page, like:
<h1>Zeeshan.</h1>
<p>Ahmad.</p>
To solve this problem, the World Wide Web Consortium created CSS language. CSS was created to specify the document's style, not its content.

Example

h1 {
    color: green;
    text-align: center;
}

Example

p {
    color: red;
    text-align: center;
}
Subscribe to: Posts (Atom)