Scribd
Upload
5 views

web_tech_unit2

CSS (Cascading Style Sheets) is used to control the layout and design of HTML elements across multiple web pages, allowing for easier management of styles. It can be applied in three ways: inline, internal, and external, with external stylesheets enabling site-wide changes through a single file. The document also explains CSS syntax, selectors, the box model, and how to manipulate the display properties of elements.

Uploaded by

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

web_tech_unit2

CSS (Cascading Style Sheets) is used to control the layout and design of HTML elements across multiple web pages, allowing for easier management of styles. It can be applied in three ways: inline, internal, and external, with external stylesheets enabling site-wide changes through a single file. The document also explains CSS syntax, selectors, the box model, and how to manipulate the display properties of elements.

Uploaded by

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

STYLING HTML WITH CSS

CSS stands for Cascading Style Sheets.


CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

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

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers. Development of large websites, where fonts and color
information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.


Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

The element selector selects HTML elements based on the element name.
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
EXAMPLE
In this example all HTML elements with class="center" will be red and center-aligned:

Example
In this example only <p> elements with class="center" will be center-aligned
:

Example

In this example the <p> element will be styled according to class="center" and to class="large":
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

EXAMPLE
The CSS rule below will affect every HTML element on the page:
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example

In this example we have grouped the selectors from the code above:

All CSS Simple Selectors

Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"


* * Selects all elements

element P Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

p{
text-align: center;
color: red;
}

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one
file!

Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

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.
Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.
Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the
value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":
Example

However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

1. nline style (inside an HTML element)


2. External and internal style sheets (in the head section)
3. Browser default
The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.
The display Property
The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is.

Thedefault display value for most elements is block or inline.


This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).

The <div> element is a block-level element.


Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:

 <span>
 <a>
 <img>

display: none; is commonly used with JavaScript to hide and show elements without
deleting and recreating them. Take a look at our last example on this page if you want to
know how this can be achieved.

The <script> element uses display: none; as default.


Override the Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page
look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with display: block; is not allowed to have
other block elements inside it.

The following example displays <span> elements as block elements:


The following example displays <a> elements as block elements:

Example

Hide an Element - display:none or visibility:hidden?


Hiding an element can be done by setting the display property to none. The element will be
hidden, and the page will be displayed as if the element is not there:

Example
However, the element will still take up the same space as before. The element will be hidden, but
still affect the layout:

Example

CSS Display/Visibility Properties

Property Description

display Specifies how an element should be displayed

visibility Specifies whether or not an element should be visible

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.


An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:

<!DOCTYPE html>
<html>

<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>

</html>
o/p

This is a Blue Heading

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}


h1 {color: blue;}
p {color: red;}

</style>
</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one
file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

You might also like