Scribd
Upload
56 views

G8 Q4 Introduction To CSS

This document provides an introduction to CSS including what it is, its structure and capabilities. CSS stands for Cascading Style Sheets and is used to style and lay out web pages. The three types of CSS are inline, internal, and external. External CSS allows changing styles across entire websites.

Uploaded by

elaishaloviee0420
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
56 views

G8 Q4 Introduction To CSS

This document provides an introduction to CSS including what it is, its structure and capabilities. CSS stands for Cascading Style Sheets and is used to style and lay out web pages. The three types of CSS are inline, internal, and external. External CSS allows changing styles across entire websites.

Uploaded by

elaishaloviee0420
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/ 4

INTRODUCTION TO CSS

WHAT IS CSS?
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web
pages. With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be used,
different displays for different devices and screen sizes, and much more, thus making our web pages
presentable to the users.

o CSS is designed to make style sheets for the web. It is independent of HTML and can be
used with any XML-based markup language.
o CSS saves a lot of work. It can control the layout of multiple web pages all at once.
o External stylesheets are stored in CSS files
o Cascading Style Sheets (CSS) is used to format the layout of a webpage.

Tip: The word cascading means that the style applied to a parent element will also apply to all children elements within the
parent. So, if you set the color of the body text to “red”, all headings, paragraphs and other text elements within the body
will also get the same color (unless you specify something else).

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, etc.

CSS STRUCTURE

A CSS rule 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.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.

Example:
In this example all <p> elements will be center-aligned, with a blue text color:

p{
color: blue;
text align: center;
}

Output:

Example explained
o p is a selector in CSS (it points to the HTML element you want to style: <p>).
o color is a property, and blue is the property value
o text-align is a property, and center is the property value

CAPABILITIES OF CSS
1. CSS makes updating web pages easy. CSS makes it possible to update the layout of the entire
page quickly. You can also specify a style once and you can apply it repeatedly in your document.
2. Position objects on the page. CSS gives you control when placing objects on the page exactly
where you want them.
3. Layer objects on the page. CSS allows you to position objects in three dimensions.
4. Create custom tags. CSS allows you to create custom tags to achieve specialized objects.

ADVANTAGES OF CSS
 CSS saves time − You can write CSS once and then reuse the same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages as you
want.
 Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages to make
them compatible with future browsers.
 Platform Independence − The Script offer consistent platform independence and can support
latest browsers as well.

3 TYPES OF CSS

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements.


 Internal - by using a <style> element in the <head> section.
 External - by using a <link> element to link to an external CSS file.

The most common way to add CSS, is to keep the styles in external CSS files.

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.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

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


<p style=”color:red;”> This is paragraph is red. </p>

Output
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.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of all the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color:

EXTERNAL CSS

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

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

Here is what the "styles.css" file looks like:

Tip: With an external style sheet, you can change the look of the entire web site, by simply changing one file.

How to create External CSS file?

The external style sheet can be written in any text editor. The file must not contain any HTML code, and
must be saved with a .css extension.
1. Open notepad++ or any text editor.
2. Type the styles that you want to define.
Example:
body { background-color: pink; }
h1 { color: blue; }
p { color: red; }
3. On the menu bar, click File and and click Save.
4. Type your filename with a file extension .css then save it to your folder..

ACTIVITY 1
Direction: On the space provided before each number, write T if the statement is correct and F if not.

____1. CSS stands for Cascading Style Sheet.


____2. Inline CSS is defined in the <head> section of an HTML page, within a <style> element.
____3. An internal CSS is used to define a style for a single HTML page.
____4. One of the capabilities of CSS is to save time.
____5. CSS makes it possible to update the layout of the entire page quickly.

ACTIVITY 2: Hands-on activity

Direction: Perform the following:

1. Run your text editor (Notepad++).


2. Type the basic format of HTML.
3. In the body type “This is a heading” in heading and “This is a paragraph” in paragraph.
4. Save the HTML file as activity2.html on your HTML folder.
5. Open new blank text editor and type the following external CSS.
body { background-color:pink; text-align:center; }
h1 { color:red; font-family:algerian;. }
p { color:blue; font-family:jokerman;}
6. Save the file as activity.css.
7. Insert the css file in your activity2.html

Expected output:

You might also like