[go: up one dir, main page]
Scribd
Upload
3 views14 pages

Css

CSS (Cascading Style Sheets) is a language for styling HTML and XML documents, allowing developers to separate content from presentation for better management and reusability. It can be applied in three ways: inline, internal, and external, each with its advantages and disadvantages. The document also covers selectors, property values, font properties, list styles, color specifications, text alignment, the box model, and conflict resolution in CSS.

Uploaded by

lokesh pappala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views14 pages

Css

CSS (Cascading Style Sheets) is a language for styling HTML and XML documents, allowing developers to separate content from presentation for better management and reusability. It can be applied in three ways: inline, internal, and external, each with its advantages and disadvantages. The document also covers selectors, property values, font properties, list styles, color specifications, text alignment, the box model, and conflict resolution in CSS.

Uploaded by

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

3.

1 Introduction

Definition: CSS (Cascading Style Sheets) is a style sheet language used to describe the
presentation of a document written in HTML or XML. It allows web developers to control the
layout and appearance of multiple web pages with consistent styling rules.

Importance of CSS:

• Separation of content and presentation: HTML focuses on structure, while CSS defines
how elements look.

• Reusability: Styles can be reused across multiple pages, saving time and effort.

• Efficiency: It allows changes to be made centrally without editing individual HTML files.

• Flexibility: CSS supports responsive design to adapt websites to different devices and
screen sizes.

Syntax:

css

selector {

property: value;

• Selector: Identifies the HTML element(s) to style.

• Property: Specifies the style (e.g., color, font-size).

• Value: Assigns the desired appearance (e.g., red, 16px).

________________________________________

3.2 Levels of Style Sheets

CSS can be applied in three ways, depending on the use case.

1. Inline CSS:

o Applied directly within the style attribute of an HTML element.

o Example:

html

<p style="color: red; font-size: 20px;">This is a paragraph.</p>

o Advantages:

§ Quick to apply for a single element.


o Disadvantages:

§ Hard to maintain and not reusable.

2. Internal CSS:

o Written inside a <style> tag within the <head> section of the HTML document.

o Example:

html

<style>

h1 {

color: blue;

</style>

o Advantages:

§ Useful for styling a single page.

o Disadvantages:

§ Styles are not reusable across multiple pages.

3. External CSS:

o Defined in a separate file with a .css extension and linked to the HTML using the <link>
tag.

o Example:

html

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

css

/* styles.css */

h1 {

color: green;

o Advantages:

§ Keeps HTML and CSS separate for better maintainability.


§ Styles are reusable across multiple pages.

o Disadvantages:

§ Requires additional HTTP requests for the .css file.

4. Default Browser Styles:

o Browsers apply default styles to HTML elements if no CSS is provided.

o Example:

§ Headers (<h1>) are bold and larger by default.

________________________________________

3.3 Style Specification Formats

CSS style rules specify how elements are presented. The general format is:

css

selector {

property: value;

Explanation of Components:

1. Selector: Targets the HTML element(s) to be styled (e.g., p, .class, #id).

2. Property: Indicates the visual attribute to modify (e.g., color, margin, padding).

3. Value: Assigns the desired style to the property (e.g., red, 20px).

Example:

css

h1 {

color: blue; /* The text of <h1> will appear blue. */

font-size: 24px; /* The text size is 24 pixels. */

________________________________________

3.4 Selector Forms

Selectors define which HTML elements will be styled. Types of selectors include:

1. Element Selector:
o Targets all elements of a specified type.

o Example:

css

p{

color: gray;

2. Class Selector:

o Targets elements with a specific class attribute.

o Example:

css

.highlight {

background-color: yellow;

html

<p class="highlight">Highlighted text.</p>

3. ID Selector:

o Targets a unique element with a specific id.

o Example:

css

#main-header {

font-size: 32px;

html

<h1 id="main-header">Main Header</h1>

4. Group Selector:

o Combines multiple selectors with a comma to apply the same styles.

o Example:

css
h1, h2, p {

margin: 10px;

5. Universal Selector:

o Targets all elements on the page.

o Example:

css

*{

margin: 0;

padding: 0;

________________________________________

3.5 Property Value Forms

CSS properties define specific styles. Common types include:

1. Length Units:

o Absolute: Fixed sizes (e.g., px, cm, mm, in).

§ Example:

css

p{

font-size: 16px;

o Relative: Based on the size of another element (e.g., %, em, rem).

§ Example:

css

h1 {

font-size: 2em; /* Twice the size of its parent. */

2. Colors:
o Can be specified as:

§ Named Colors (e.g., red, blue).

§ Hexadecimal (e.g., #ff5733).

§ RGB/RGBA (e.g., rgb(255, 87, 51)).

§ HSL/HSLA (e.g., hsl(200, 100%, 50%)).

o Example:

css

body {

background-color: #f0f0f0;

3. URLs:

o Used for background images or linked files.

o Example:

css

body {

background-image: url('background.jpg');

________________________________________

3.6 Font Properties

CSS allows customization of text appearance using font properties.

1. font-family:

o Specifies the font type.

o Example:

css

p{

font-family: Arial, sans-serif;

2. font-size:
o Defines text size.

o Example:

css

h1 {

font-size: 24px;

3. font-weight:

o Adjusts thickness.

o Example:

css

p{

font-weight: bold;

4. font-style:

o Specifies whether text is italicized.

o Example:

css

em {

font-style: italic;

________________________________________

3.7 List Properties

CSS controls how lists appear:

1. list-style-type:

o Changes bullet style (e.g., circle, square, decimal).

o Example:

css

ul {
list-style-type: square;

2. list-style-position:

o Determines whether bullets are inside or outside.

o Example:

css

ul {

list-style-position: inside;

3. list-style-image:

o Uses an image for bullets.

o Example:

css

ul {

list-style-image: url('bullet.png');

________________________________________

3.8 Color

CSS supports specifying colors for text, backgrounds, borders, and other elements.

• Example:

css

p{

color: #333; /* Text color */

background-color: #f0f0f0; /* Background */

}
3.9 Alignment of Text

• Horizontal Alignment:

o Example:

css

h1 {

text-align: center;

• Vertical Alignment:

o Example:

css

span {

vertical-align: middle;

________________________________________

3.10 The Box Model

The box model defines how elements are structured:

1. Content: The core content (e.g., text, images).

2. Padding: Space between content and border.

3. Border: Surrounds padding.

4. Margin: Space between the element and others.

Example:

css

div {

margin: 10px;

padding: 20px;

border: 2px solid black;

}
Here is the breakdown of the topics based on the image provided. Below are notes for the
requested topics under "3. Cascading Style Sheets":

3.1 Introduction

 CSS (Cascading Style Sheets) is used to control the presentation of web pages,
including layout, colors, and fonts.
 It separates content (HTML) from design, making websites easier to manage.
 Stylesheets can be linked externally, embedded in HTML, or applied inline.

3.2 Levels of Style Sheets

1. Inline CSS:
o Applied directly to an element using the style attribute.
o Example: <h1 style="color: red;">Heading</h1>
o Overrides other CSS.
2. Internal CSS:
o Defined in the <style> tag within the <head> of an HTML document.
o Example:

html

CopyEdit

<style>

h1 {

color: blue;

</style>

3. External CSS:
o Saved in a separate .css file and linked using the <link> tag.
o Example:

html

CopyEdit

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

4. Browser Default:
o Each browser applies its default styles when no CSS is provided.
3.3 Style Specification Formats

 Selectors:
o Target specific HTML elements (e.g., h1, .class, #id).
 Properties:
o Define what to style, such as color, font-size, or margin.
 Values:
o Specify the styling, e.g., red, 16px, or auto.

3.4 Selector Forms

1. Element Selector:
o Targets all elements of a specific type.
o Example: p { color: green; }
2. Class Selector:
o Targets elements with a specific class.
o Example: .note { font-style: italic; }
3. ID Selector:
o Targets a single element with a specific ID.
o Example: #header { background-color: yellow; }
4. Group Selector:
o Targets multiple elements.
o Example: h1, h2 { font-weight: bold; }
5. Universal Selector:
o Targets all elements.
o Example: * { margin: 0; }

3.5 Property Value Forms

 Length Units:
o Absolute: px, cm, mm.
o Relative: em, rem, %.
 Colors:
o Named colors (e.g., red, blue).
o Hexadecimal (#RRGGBB).
o RGB/RGBA (rgb(255, 0, 0)).
 URLs:
o Used for background images: url('image.jpg').

3.6 Font Properties


1. font-family: Specifies the font (e.g., Arial, Times New Roman).
2. font-size: Sets the size (e.g., 16px, 1.5em).
3. font-weight: Sets the weight (e.g., bold, normal).
4. font-style: Specifies normal, italic, or oblique.

3.7 List Properties

 list-style-type: Defines the type of list marker (disc, circle, square).


 list-style-position: Specifies inside or outside.
 list-style-image: Uses an image as a list marker.

3.8 Color

 Specifies the foreground/background color of elements.


 Formats:
o Named: red, blue.
o Hex: #FF5733.
o RGB: rgb(255, 0, 0).
o HSL: hsl(0, 100%, 50%).

3.9 Alignment of Text

 text-align:
o Aligns text horizontally: left, right, center, justify.
 vertical-align:
o Aligns inline elements vertically: top, middle, bottom.

3.10 The Box Model

The box model defines how elements are structured:

1. Content: The core content (e.g., text, images).


2. Padding: Space between content and border.
3. Border: Surrounds padding.
4. Margin: Space between the element and others.
5.

Example:

css

div {

margin: 10px;

padding: 20px;

border: 2px solid black;

3.11 Background Images

 Adds images to the background:


o Example:

css

body {

background-image: url('bg.jpg');

background-repeat: no-repeat;

background-size: cover;

3.12 The <span> and <div> Tags


1. <div>:
o A block-level container used for grouping elements.
o Example:

html

<div class="container">Content</div>

2. <span>:
o An inline container for applying styles or scripts to text.
o Example:

html

<span style="color: red;">Important</span>

3.13 Conflict Resolution

 CSS Specificity:
o Inline > Internal > External.
 Important Rule:
o Overrides all rules: color: blue !important;.

You might also like