Scribd
Upload
23 views

01 - Introduction To Css

CSS (Cascading Style Sheets) is a language used to style and format web pages. CSS separates web page presentation from content, allowing consistent visual designs across pages. CSS works by defining rules that specify how HTML elements should display, written in a separate CSS file or within HTML. Properties define element styling and behavior like size, color, position. There are three CSS style types: inline directly in HTML, internal within <style> tags, and external in a separate .css file linked via <link>.

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

01 - Introduction To Css

CSS (Cascading Style Sheets) is a language used to style and format web pages. CSS separates web page presentation from content, allowing consistent visual designs across pages. CSS works by defining rules that specify how HTML elements should display, written in a separate CSS file or within HTML. Properties define element styling and behavior like size, color, position. There are three CSS style types: inline directly in HTML, internal within <style> tags, and external in a separate .css file linked via <link>.

Uploaded by

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

CSS stands for Cascading Style Sheets, and it is a language used for styling and formatting

web pages.
CSS is to separate the presentation of a web page from its content, allowing developers to
create consistent and visually appealing designs across multiple pages and websites.

CSS works by defining rules that specify how HTML elements should be displayed on the
screen. These rules are written in a separate CSS file or within the head section of an HTML
document, and they include selectors that target specific HTML elements and properties that
define how those elements should look and behave.

In CSS, properties are used to define how HTML elements should be styled and displayed on a
web page. Each property specifies a certain aspect of an element's appearance or behavior,
such as its size, color, font, positioning, or animation.

CSS properties are written in declarations, which consist of a property name, a colon, and a
value. Multiple declarations can be combined within a single CSS rule, which specifies the
element or elements to which the styles should be applied.

Color:
The color property is used to define the color of an element's text or background. It can be
specified using a color name, RGB value, hexadecimal code, or HSL value.

There are three types of CSS styles: inline, internal, and external. In this answer, I will
explain each of these types of styles and provide examples of how they can be used.

Inline Styles:
Inline styles are applied directly to an HTML element using the "style" attribute. They are not
reusable and affect only the specific element to which they are applied. Inline styles have the
highest priority in CSS, meaning they will override any other styles applied to the same element
through internal or external styles.
In the above example, the "style" attribute is used to apply a red color and 18px font size to the
paragraph element.

Advantages:
Easy to use and apply styles to specific elements
Override other styles with high specificity
Can be useful for small changes or temporary styling

Disadvantages:
Not reusable across multiple elements or pages
Can make the HTML code less readable and cluttered
Can become difficult to manage and maintain as the number of inline styles grows

Internal Styles:
Internal styles are written within the head section of an HTML document, using the "style" tag.
Internal styles apply to all elements on the page that match the specified selectors.

In the above example, an internal style is used to apply a blue color and 16px font size to all
paragraph elements on the page.
Advantages:
More reusable than inline styles, as they can be applied to multiple elements within the same
HTML document
Can be useful for small to medium-sized websites where a separate CSS file is not necessary
Overrides external styles, but is overridden by inline styles with higher specificity

Disadvantages:
Not reusable across multiple pages or websites
Can make the HTML code less readable and cluttered, especially if there are many styles
Difficult to manage and maintain as the website grows in size and complexity.

External Styles:
External styles are written in a separate CSS file and linked to the HTML document using the
"link" tag. External styles can be reused across multiple pages and are easier to maintain than
inline or internal styles.

In the above example, an external style is used to apply a blue color to elements with the class
"blue-text" and a red color to elements with the class "red-text". The CSS code for this style is
saved in a separate "style.css" file.

Advantages:
Most reusable and maintainable type of style, as it can be used across multiple pages and
websites
Separates the presentation (CSS) from the content (HTML), making the HTML code more
readable and easier to manage
Allows for easy and efficient updates to styles across the entire website
Disadvantages:
Requires an additional HTTP request to load the external CSS file, which can slow down the
website's loading time
Can be less specific than inline or internal styles, as it applies to all elements with the same
selector
Can be difficult to override styles in external files that have already been loaded

Overall, inline, internal, and external styles all have their own
advantages and disadvantages, and it's up to the developer to decide
which type of style to use based on their specific needs.

You might also like