Scribd
Upload
8 views18 pages

02 Basic Syntax

The document provides an overview of including CSS in HTML, detailing three methods: inline, internal, and external CSS. It explains the syntax for writing CSS, the importance of comments, and essential concepts such as inheritance, rule order, style rule hierarchy, specificity, and the box model. The document emphasizes the recommended use of external CSS for better organization and maintainability.

Uploaded by

salahoddinkhan11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views18 pages

02 Basic Syntax

The document provides an overview of including CSS in HTML, detailing three methods: inline, internal, and external CSS. It explains the syntax for writing CSS, the importance of comments, and essential concepts such as inheritance, rule order, style rule hierarchy, specificity, and the box model. The document emphasizes the recommended use of external CSS for better organization and maintainability.

Uploaded by

salahoddinkhan11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

KHURASAN

UNIVERSITY

www.Khurasan.edu.af- [email protected]
Include CSS in a webpage
CSS is used for styling the look and formatting of a document written in HTML. There are
three ways to add CSS in HTML
• Inline CSS: Styles added directly to the HTML element.
• Internal CSS: Styles defined at the head section of the document.
• External CSS: Styles defined in a separate file.
Include CSS in a webpage
1. Inline Style
Inline style is the approach of adding CSS rules directly to the HTML element using
the style attribute.
e.g.

<p style="color:red;"> This paragraph is styled with inline CSS. </p>

style: defines the CSS for the element <p>


color: red;: changes the text of the <p> element to the color red.
Include CSS in a webpage
2. Internal CSS
Internal CSS applies CSS styles to a specific HTML document.
Internal CSS is defined inside an HTML document using <style> attribute within the
head tag of an HTML. e.g.

<head>
<style> //to define CSS for this page
p{ //targets all <p> elements
color: red; //apply red colors
}
</style>
</head>
Include CSS in a webpage
3. External-CSS (Recommended Approach)
External CSS is an approach to applying CSS styles to HTML pages by defining the CSS in a
separate file.
The external CSS file should have a .css extension

How to link external style-sheet in a HTML document


The external CSS file can be linked to the HTML document by using the link element.
<head>
<link href="style.css" rel="stylesheet">
</head>
Include CSS in a webpage
Using Multiple Stylesheet
We can link multiple CSS file to an HTML file.
<head>
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
<link href="style3.css" rel="stylesheet">
</head>
Include CSS in a webpage
Note: Inline Style Override Internal Style
If an internal CSS and inline CSS are both applied to a tag, the styling from the inline tag is
applied.
How to write CSS ?

Syntax :
selector {
property1: value;
property2: value;
...
}
How to write CSS ?
Syntax:
Selector
specifies the HTML element that we want to apply the styles
Property1 / Property2:
specifies the attribute of HTML elements that we want to change (color, background,
and so on)
Value
specifies the new value you want to assign to the property (color of the text to red,
background to gray, and so on)
Comments in CSS
Comments are notes written along with the code that is ignored by the browser.
The CSS comment starts with /* and ends with */
div {
/* Define text color for the div*/
color: blue;
/* This line is not part of the CSS code*/
}
Why comments:
• This makes it easier for other developers to understand the code and make changes if necessary.
• Comments are also useful for anyone who needs to maintain the code in the future.
• Comments help you debug the code.
Essential Concepts of CSS
CSS is the language for styling web pages, and to use it affectively, it has a following
essential concepts.
1) Inheritance
2) Rule Order
3) Style Rule Hierarchy
4) Specificity
5) Box Model
Essential Concepts of CSS
1) Inheritance
• In CSS, inheritance passes the styles directly from the parent element to its child
elements.
• The child elements normally take the same styles that have been assigned to the parent,
unless they are provided their own styles.
<section>
<h2>This is a heading.</h2>
<p>This is a paragraph.</p> section {
color: blue;
<p>This is a paragraph.</p>
}
<p>This is a paragraph.</p>
</section>
Essential Concepts of CSS
2) Rule Order
• Rule order refers to the sequence in which CSS rules are applied to the HTML elements.
• The order of CSS rules determine the priority for the styles. The later rules overrides the
earlier ones and ensures that the most recent styles are applied.

p { color: red; }

/* overrides previous color value */


p { color: blue; }
Essential Concepts of CSS
3) Style Rule Hierarchy
The style rule hierarchy determines the priority of CSS rules when multiple rules target
the same element.

1) Inline styling: Styles applied directly within HTML element.


2) ID selectors: Styles elements with specific ID.
3) Class and attribute selectors: Styles elements with certain class or attribute.
4) Element selectors: Styles elements with specific tag name.
Essential Concepts of CSS
3) Style Rule Hierarchy
/* id selector */
#unique { color: red; }
/* class selector */
.paragraph { color: green; }
/* element selector */
p { color: blue; }

In above example, the id selector overrides the styles of class and element selector.
This is because the id selector has more priority than the class and element selectors
Essential Concepts of CSS
4) Specificity
• Specificity in CSS determines which style rules take precedence when multiple rules
target the same element.
• This helps the browser prioritize and apply the most relevant styles.
<div>
div p { color: blue; }
<p id="para">This is a paragraph.</p>
</div> p { color: orange; }

• In the above example, the element selector p sets the color of all p elements to
orange.
• However, the selector div p is more specific for selecting paragraph so the color of
paragraph is colored blue.
Essential Concepts of CSS
5) Box Model
The box model specifies that every element in HTML is represented as a rectangular
box. It helps to understand how elements are structured and interact with each other
on a webpage.
We will cover it later.
END
THANK
YOU !
KHURASAN
UNIVERSITY

www.Khurasan.edu.af- [email protected]

You might also like