Scribd
Upload
3 views31 pages

Lecture 7

The document provides an introduction to CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements and the three methods of applying CSS: inline, internal, and external styles. It emphasizes the benefits of using external stylesheets for site-wide formatting changes and outlines the syntax and properties available in CSS. Additionally, it discusses the use of classes and IDs for styling, highlighting their differences and best practices for naming conventions.

Uploaded by

fatimafakih104
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
3 views31 pages

Lecture 7

The document provides an introduction to CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements and the three methods of applying CSS: inline, internal, and external styles. It emphasizes the benefits of using external stylesheets for site-wide formatting changes and outlines the syntax and properties available in CSS. Additionally, it discusses the use of classes and IDs for styling, highlighting their differences and best practices for naming conventions.

Uploaded by

fatimafakih104
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/ 31

Software Application

HTML & CSS


5. Introduction to CSS

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
•The power of CSS is that it allows us to make site-wide formatting
changes by making edits to a single file.
Three Ways to Use CSS:
We can add CSS code in any combination of three different ways:
1- Inline Style - CSS code is placed directly into an HTML element within the
<body> section of a web page.
2- Internal Style Sheet - CSS code is placed into a separate, dedicated area
within the <head> section of a web page.
3- External Style Sheet - CSS code is placed into a separate file and then
linked to a web page.
❖ 1- Inline Style
- 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.

<!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>
An inline style declaration is highly specific and formats just
one element on the page.
No other elements, will be affected by this CSS style.
❖ 2- 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.

<!DOCTYPE html>
<html><head>
<style>
body {
background-color: cyan;}
h1 {
color: maroon;
margin-left: 40px;}
</style></head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
2-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.

<!DOCTYPE html>
<html> "mystyle.css"
<head> body {
<link rel="stylesheet" href="mystyle.css"> background-color: lightblue;
</head> }
<body>
<h1>This is a heading</h1> h1 {
<p>This is a paragraph.</p> color: navy;
</body> margin-left: 20px;
</html> }
Note: Do not add a space between the property value and
The required rel attribute specifies the relationship the unit:
Incorrect (space): margin-left: 20 px;
between the current document and the linked
Correct (nospace): margin-left: 20px;
document/resource.
Benefit of External Style Sheet
-The real power of using an external style sheet is that multiple web pages on
our site can link to the same style sheet:

style.css :
h2 {color:red;}

page1.html page2.html page3.html

Styles declared in an external style sheet will affect all matching elements on all
web pages that link to the style sheet. By editing the external style sheet, we can
make site-wide changes (even to hundreds of pages) instantly.
Internal vs. External Style Sheets

➢ Internal Style Sheets:


✓ are appropriate for very small sites, especially those that have just a single
page.
✓ might also make sense when each page of a site needs to have a completely
different look.
➢ External Style Sheets:
✓ are better for multi-page websites that need to have a uniform look and feel to
all pages.
✓ make for faster-loading sites (less redundant code).
✓ allow designers to make site-wide changes quickly and easily.

External style sheets create the best separation between content and presentation.
For this reason - and the others listed above - we'll consider external style sheets to
be the best option when creating a new site.
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.

Example: h1{
If the internal style is defined after the link to color: red;
the external style sheet, the <h1> elements will font-style: italic;
be "orange": }
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<link rel="stylesheet" type="text/css" href="m <h1>This is a heading</h1>
ystyle.css"/> <p>This is a paragraph.</p>
<style> </body>
p{ </html>
color: darkgreen;
font-style: italic;
}
CSS Terminology and Syntax:

Now let's take a closer look at how we write CSS code. The correct syntax of a CSS
declaration is selector {property:value;}
p {color:red;}

selector
property
value

Internal and external style sheets use this identical CSS syntax. Internal style sheets
must use the opening and closing <style> tags to surround the CSS code, while
external style sheets do not use the <style> element.
Setting Multiple Properties

We can define as many properties as we wish for a selector:

p {color:red;font-style:italic;text-align:center;}

In this example, all text within paragraph elements will show in red italics that is
centered on the page.

p {
color: red;
font-style: italic;
text-align: center;
}

Just as with HTML, browsers ignore space characters in CSS code. Many designers
take advantage of this fact by placing the opening and closing curly brackets on
their own dedicated lines. Each of the property and value pairings are placed on
their own indented line, with a space after the colon. This makes the code far easier
to read.
CSS Text Properties

The following properties can be specified for any element that contains text,
such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:

Property Some Possible Values


text-align: center, left, right, justify
text-decoration: underline, line-through, blink
color: blue, green, yellow, red, white, etc.
font-family: Arial, Verdana, "Times New Roman"
font-size: large, 120%, 20px (pixels)
font-weight: bold, normal
font-style: italic, normal

The actual list of available properties and values is quite long, but the ones
listed above are the most common for formatting text via CSS.
How Browsers Process CSS

• A web browser will process all CSS code it encounters, even if it is from all three
methods.

• For example, an external style sheet could define the font of a heading, an internal
style sheet could specify the font size of the heading, and an inline style could
italicize the heading. All three would be applied.

• Sometimes a browser will receive conflicting instructions from the CSS code. For
example, what if each of the above CSS sources specified a different color for the
heading text?
What Does "Cascading" Mean?
We use the term "cascading" because there is an established order of priority
to resolve formatting conflicts:
1. Inline style (highest priority)

2. Internal style sheet (second priority)

3. External style sheet (third priority)

4. Web browser default (only if not defined elsewhere)

For each HTML element, the browser will see which styles are defined inline and
from internal and external style sheets. For any conflicts detected, it will use this
priority system to determine which format to display on the page.

In the prior example, the heading text would display in the color specified by the
inline style, which outranks all the others.

If multiple, conflicting styles are defined in the same style sheet, only the final one will be
applied. Be careful, as this is another common mistake committed by beginners.
CSS Comments

➢ CSS comments are not displayed in the browser, but they can help document
your source code.
➢ Comments are used to explain the code and may help when you edit the
source code later.
➢ Comments are ignored by browsers.
➢ A CSS comment is placed inside the <style> element, and starts with /* and
ends with */
CSS Colors

➢ Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.
➢ CSS Color Names: In CSS, a color can be specified by using a predefined color name.
➢ CSS Background Color: You can set the background color for HTML elements
➢ CSS Text Color: You can set the color of text
➢ CSS Border Color: You can set the color of borders:
➢ CSS Color Values
CSS Classes and IDs
What is a CSS class and IDS ?
•A CSS class is an attribute used to define a group of HTML elements to apply unique styling
and formatting to those elements with CSS.

•It is needed to stylize HTML elements – including changing colors, fonts, or the size of a text.

•CSS Classes will help you stylize HTML elements quickly.

• Moreover, you can avoid repeating the same code for each HTML element that uses the same
styling.

•Hence, the amount of CSS code to use is reduced – which makes it more readable and easier
to debug.

•you can also use an ID selector to stylize HTML elements. However, it’s only able to change
one HTML element, whereas a class selector can stylize more than one element.
CSS Classes and IDs
Example :
<style>
• How to Create a Class in CSS? .green-text {
color: #008000;
1. If you want to use a class, use a period. }
(.) followed by the class name in </style>
<style>
a style block. .font-36{
font-size: 36px;
2. use a bracket called a declaration }</style>
block that contains the property to stylize
•<style> – the style tag specifies the style information of
the element, such as text color or text size. an HTML element. You can put multiple style tags within
an HTML document.
3. CSS style declarations for classes may be
• .classname – it refers to the attributes that will be added
placed in internal and/or external style to the element. For instance, the class name is green-
text and font-36 since the element will have a green color,
sheets. and 36 pixels sized fonts.
•{property} – it contains attributes that will be added to the
elements, such as a green color and 36 pixels font size.
CSS Classes and IDs
• After creating the classes, you can apply them to HTML Note that:
elements by using the class Attribute: Name your class properly – the class
name must provide information about
• For example: attributes that are added to the element.
<p class="green-text font-36">This is an example of a
sentence with bigger font size</p> Make sure that a class only does one
thing – adding more than one attribute
might make the class hard to reuse. For
<p class="green-text">This is an example of a sentence with example, you can’t use a class
regular font size</p> containing two attributes – green text
and font size 36 pixels if you solely
want a green text without changing the
•The first one contains two classes – green-text and font-36, font size.
while the other one only has one class. Hence the result will look
like this: Group your classes based on their
characteristics – when creating
classes, sort them based on their
utilization. For example, you can group
classes that are related to the font size.
CSS Classes and IDs

• How to Create IDs in CSS?


1. Styling declarations for IDs begin with the Example :
<style>
pound sign #. #headline {
text-align: center;
2. use a bracket called a declaration block that }
contains the property to stylize the element, </style>
...
such as text color or text size. <h1 id="headline">Big News!</h1>
3. CSS style declarations for IDs may be placed
in internal and/or external style sheets.

4. The id attribute are added to page elements.


Classes and IDs Compared

At first glance, classes and IDs appear to function identically, but there are
important differences between the two:
✓ IDs can be applied to one and only one element in a web document.
✓ Classes can be applied to an unlimited number of elements, even different
types of elements on the same page.
✓ If conflicting styles from an ID and class are applied to the same element, the
ID will outrank the class in the cascade.
Example: Multiple Classes, One Element Type
Let's look at our earlier example again, but this time let's create three
CSS classes to style the three paragraphs differently:

style >
.style1 {
font-weight: bold;
}
.style2 {
font-style: italic;
}
.style3 {
font-weight: bold;
font-style: italic;
}
</style>...
By using classes, we're no longer reliant on inline styles
<p>Normal text</p>
to format each instance of an element differently.
<p class="style1">Text in Bold</p>
<p class="style2">Text in Italics</p>
<p class="style3">Text in Bold and Italics</p>
Example: One Class, Multiple Element Types
A single CSS class may also be applied to different element types on
the same page:
<style>
.style1 {
color: green;
}
</style>
...
<h2>Normal Heading</h2>
<h2 class="style1">Green Heading</h2>
<p>Normal text</p>
<p class="style1">Green text</p>
<ul> Here we're beginning to see the power of
<li>Normal item</li> CSS classes. By changing the class style
<li class="style1">Green item</li> declaration in the style sheet, all page
</ul> elements assigned to that class will be
modified.
Example: Multiple Classes, One Element

Multiple classes may also be applied to a specific element:


<style >
.style1 {
font-weight: bold;
}
.style2 {
font-style: italic;
}
.style3 {
color: green;
}
</style>
... We place a space between the different
<p>Normal text</p> class names. There's no limit to the
<p class="style1 style2 style3">Green Text number of classes that can be applied to
in Bold and Italics</p> an element.
The <span> Element
Sometimes we don't want a style to apply to an entire text element,
but just a specific subset of text. For these instances, we use the
handy <span> element:

e>
le1 {
lor: blue;

le2 {
lor: green;

le>
Note that the <span> element does nothing
We can write text in <span class="style1">blue</span> or on its own. Only once we associate it with
<span class="style2">green</span> or any other color.</p> a CSS class will the text inside the <span>
be affected.
Naming Classes and IDs
We should maintain the goal of keeping our content and presentation as separate as
possible. Using class and ID names that describe how the element appears departs
from this objective. We should try to use class names that describe the meaning of the
content, not its appearance:
Problematic names Better names
.green .slogan
.underline .booktitle
.center
.caption
.bigletters
.headline
There's another hazard of using class names that describe the style. If we later
change the class's appearance, we could create a confusing situation, for example
a .green class that is styled to appear in blue!
Class and ID names must be at least two characters and can contain lowercase
letters, numbers, dashes, and underscores. Always start the name with a letter, not
a number.
Exercises

You might also like