Scribd
Upload
12 views

Day01 CSS

The document provides an introduction to CSS including its basic structure and syntax, common properties, and different ways to apply CSS styles like inline, internal and external CSS. It also explains the cascading nature of CSS priority.

Uploaded by

mallikarjun
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Day01 CSS

The document provides an introduction to CSS including its basic structure and syntax, common properties, and different ways to apply CSS styles like inline, internal and external CSS. It also explains the cascading nature of CSS priority.

Uploaded by

mallikarjun
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Notes

INTRODUCTION TO CSS
 CSS stands for Cascading Style Sheets and is used for styling content on web
pages. While HTML allows us to structure and place content, CSS is required for
styling it.
 In CSS, styling is defined using property-value pairs.

Syntax of CSS
Consists of selectors and declaration blocks.
 Selector: HTML element to be styled.
 Declaration Block: One or more declarations separated by semicolons.
 Declaration: Consists of a property and a value, separated by a colon.

Basic Structure

selector {
property: value;
property: value;
}

Example:

h1 {
color: crimson;
background-color: yellow;
}

BASIC CSS PROPERTIES

| 54
CSS Notes

1. color: This property is used to apply/give the color for the character, text,
word or sentence.
2. text-align: This property is used to place or align the text in center, right or
left.
3. font-family: This property is used to change font style of text like italic,
cursive, Georgia etc.
4. background-color: This property is used to give the background color
for the text.
5. font-size: This property is used to change the size of the text.
6. border: This property is used to give the border for the text.
7. height: This property is used to set the height for the image content etc.
8. width: This property is used to set the width for the image content etc.

Note: We have many other CSS properties we will use them according to the
requirement.

TYPES OF CSS

Inline CSS

 If we apply the styling to the content inside the element only by using the style
attribute, we call it as “inline CSS”.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: brown; font-family: cursive; text-align: center;">Tap
Academy</h1>
</body>
</html>

Output:

Note: In the above example we are using the color property and value for that as
brown, whenever we are using the property a proper value also, we need to assign for
it. And based on our required we are style our contents by using many more CSS
properties.

| 55
CSS Notes

The <meta> tag will help us to set the content according to our browser width
properly.

CSS Properties
Attribute
Tag

<h1 style="color: brown; font-family: cursive; text-align: center;">Tap


Academy</h1>

Properties values Content

Internal CSS
 If we apply the styling to the content by using the <style> tag, we call it as
“internal CSS”.
 <style> tag we can specify in <head> section or in the <body> section as well. But
as a standard we use it in the <head> section.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS</title>
<style>
p{
color: blue;
background-color: aquamarine;
}
</style>
</head>
<body>
<p>This is a first paragraph</p>
</body></html>

Output:

| 56
CSS Notes

Note: In the above example, we have taken <p> tag and given the content, for that
content we are applying the styling in the internal approach, in the internal styling
we need to select the element name and apply the styling. Syntax for that is:

element_name{

CSS_property: value,

CSS_property: value

Where ever that element name matches for all those elements the styling will be
applied.

External CSS
 External CSS means we should create a separate file for the CSS with the
extension as .css and give all the styling properties in it.
 The content should be present in the HTML file only so here we will have two
file one is for content and one is for CSS.
 That CSS file we have to link it to the content file then only the styling will be
applied to the contents.
 To link the CSS file we need to use the <link> tag in html file and link the CSS
file by specifying the css file in the <link> tag.
 We need to execute the HTML file only always not the CSS file.

It is a css filename

<link rel="stylesheet" href="external.css">

rel is an attribute means relation


by this we are telling to browser
we are giving the stylesheet.

Example:

HTML File
<!DOCTYPE html>
<html>
<head>

| 57
CSS Notes

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External File</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<h1>This is External CSS</h1>
</body>
</html>

CSS File

h1{
color: goldenrod;
text-align: center;
border: 3px solid red;
font-family: 'Times New Roman', Times, serif;
background-color: blanchedalmond;
}

Output:

Note:

 In the CSS file while giving the styling we no need to specify style attribute or
<style> tag directly we can select the element and apply the styling.

Two Ways To Linking External CSS:


1. Link Tag:

Used within the `<head>` section to link an external CSS file.

Example:

| 58
CSS Notes

<link rel="stylesheet" href="style.css">

Attributes:
rel="stylesheet": Specifies the relationship between the current document and the
linked file.
`href`: Specifies the path to the CSS file.

2. Import Statement:

Another way to include an external CSS file.

Example:
@import url("style.css");
Typically used within a CSS file to import other CSS files.

Why CSS is Called as Cascading:

CSS is known as Cascading Style Sheets due to the cascading order of priority:
1. Inline CSS
2. Internal CSS
3. External CSS

When multiple styles are applied to the same element, the priority follows this order:
 Inline CSS has the highest priority.
 Internal CSS takes priority if no inline styles are present.
 External CSS is applied if neither inline nor internal styles are present.

Example Demonstrating CSS Priority:

1. External CSS:
CSS File
h1 {
color: black;
background-color: white;
}

2. Internal CSS:

Within HTML file:


HTML File
<!DOCTYPE html>

| 59
CSS Notes

<html>
<head>
<style>
h1 {
color: blue;
background-color: lightgrey;
}
</style>
</head>
<body>
<h1>This is External CSS</h1>
</body>
</html>

3. Inline CSS:
- Directly in HTML element:

<h1 style="color: red; background-color: yellow;">Hello World</h1>

Result:

Inline CSS (`color: red; background-color: yellow;`) will be applied due to its highest priority.

| 60

You might also like