Scribd
Upload
14 views

css (1)

Uploaded by

Dixit Taneja Vlogs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

css (1)

Uploaded by

Dixit Taneja Vlogs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

What is CSS?

CSS stands for Cascading Style Sheets, it is a simple design language intended to
simplify the process of making web pages presentable using CSS properties. CSS
specify how an HTML element should be displayed on the web page. If you think of
the human body as a web page then CSS is styling part of the body. Like color of the
eyes, size of the nose, skin tone, etc.

With CSS, you can adjust font sizes and colors, add backgrounds, and manage the
layout, transforming a basic webpage into a visually appealing and user-friendly
experience. CSS also simplifies layout management across multiple web pages
by using external stylesheets stored in CSS files.

CSS Syntax
● A CSS Syntax rule consists of a selector, property, and its value. The selector
points to the HTML element where the CSS style is to be applied. The CSS
property is separated by semicolons. It is a combination of the selector name
followed by the property: value pair that is defined for the specific selector. let
us see the syntax and how we can use the CSS to modernize the website.

Syntax:
selector { Property: value; }
For instance, we have declared a heading tag (h1) along with having assigned
some property: value pair that is used to style the heading tag. Here, h1 is the
selector, { color: green; font-family: sans-serif; } is a declaration block and it can
contain one or more declarations separated by semicolons, color: green; is
a property: value pair that is applied to the HTML element to style them.

H1{ color: green; font-family: sans-serif; }

Let’s define each of these:

● Declaration: A combination of a property and its corresponding value.

● Selector: Used to target and select specific HTML elements to apply styles to.

● Property: Defines the specific aspect or characteristic of an element that you


want to modify.

● Value: Assigned setting or parameter for a given property, determining how


the selected element should appear or behave.

Example: This example illustrates the use of CSS Syntax for the styling of HTML
elements.

<!DOCTYPE html>

<html>
<head>

<!-- Style on h1 elements -->

<style>

h1 {

color: green;

text-align: center;

</style>

</head>

<body> <h1>Web Technology</h1>

</body>

</html>

Output: In the above code, h1 is the selector of h1 tags, it select the h1 element that
you want to style. The color is a property and green is the value of that property,
similar text-align is the property and value of that property is center.

Reason to use CSS


● Responsive Design: CSS offers features like media queries that enable
developers to create responsive layouts that adapt to different screen sizes
and devices, ensuring a consistent user experience.

● Flexibility and Control: CSS provides precise control over the presentation of
HTML elements, allowing developers to customize layout, typography, colors,
and other visual properties.

● Consistency and Reusability: Developers can ensure consistency across the


entire website, by defining styles in a central CSS file. Styles can be reused
across multiple pages, reducing redundancy and making updates easier.

● Search Engine Optimization (SEO): CSS can be used to structure content in a


way that improves search engine visibility.

● Ease of Maintenance: Centralized CSS files make it easier to maintain and


update styles across a website. Changes can be applied globally, ensuring
uniformity and reducing the risk of inconsistencies.
● Faster Page Loading: External CSS files can be cached by browsers, resulting
in faster page loading times for subsequent visits to a website. This caching
mechanism reduces server load and bandwidth consumption.

CSS Selectors
CSS Selectors are used to select the HTML elements you want to
style on a web page. They allow you to target specific elements or
groups of elements to apply styles like colors, fonts, margins, and
more.
The element or elements that are selected by the selector are
referred to as subject of the selector.
Types of Selectors
Types of CSS Selectors
CSS selectors come in various types, each with its unique way of
selecting
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

The Element selectors : A CSS declaration always ends with a


semicolon, and declaration groups are surrounded by curly brackets:
example - p {color:red;text-align:center;} To make the CSS more
readable, you can put one declaration on each line, like this: p
{ color:red; text-align:center; }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

The ID selectors :The id selector is used to specify a style for a single,


unique element.The id selector uses the id attribute of the HTML
element, and is defined with a "#". Example – Imagine within the
body element of our html page, we have the following paragraph
element
Welcome to the 1st CSS Document
We can then create a CSS rule with the id selector:
#welcome { color:red; text-align:center; }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used
with a period character . (full stop symbol) followed by the class name.

A class name should not be started with a number.

Example:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <style>

5. .center {

6. text-align: center;

7. color: blue;

8. }
9. </style>

10. </head>

11. <body>

12. <h1 class="center">This heading is blue and center-aligned.</h1>

13. <p class="center">This paragraph is blue and center-aligned.</p>

14. </body>

15. </html>

Universal Selector
The Universal selector (*) in CSS is used to select all the elements in an HTML
document. It also includes other elements which are inside under another
element.
Note: The following code is used in the above Example using the universal
selector. This CSS rule will be applied to each and every HTML element on the
page:
CSS:
*{
color: white;
background-color: black;
}

Different Ways to Use CSS

CSS has three ways to style the HTML:

● Inline CSS: Inline CSS are directly applied on the HTML elements and it is the
most prioritize CSS amonth these three. This will override any external or
internal CSS.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

● Internal CSS: Internal CSS are defined in the HTML head section inside
of <style> tag to let the browser know where to look for the CSS.

Example

Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

● External CSS: External CSS are defined in a separate file that contains only
CSS properties, this is the recomended way to use CSS when you are working
on projects. It is easy to maintain and multiple CSS files can be created and
you can use them by improting it into your HTML document using
HTML <link> tag.

External styles are defined within the <link> element, inside the <head> section of an
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css
extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

You might also like