Scribd
Upload
8 views

4. CSS (2)

The document provides an overview of Cascading Style Sheets (CSS), detailing its syntax, functions, and various properties used for styling web pages. It emphasizes the importance of CSS in separating content from form, allowing for efficient styling changes across multiple pages. Additionally, it covers different methods for inserting CSS and various selectors to target HTML elements effectively.

Uploaded by

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

4. CSS (2)

The document provides an overview of Cascading Style Sheets (CSS), detailing its syntax, functions, and various properties used for styling web pages. It emphasizes the importance of CSS in separating content from form, allowing for efficient styling changes across multiple pages. Additionally, it covers different methods for inserting CSS and various selectors to target HTML elements effectively.

Uploaded by

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

ICT 0545 Web Technologies

(CSS - Cascading Style Sheets)

Muhammad Taufiq
Aisyah Binti Mohd. Hanifiah
Siti Nurul Akmal Binti Mohd
Nur Hidayu Binti ‘Aris

Department of Information and Communications Technology, IIUM


Learning Outcome
• Understand the basics of CSS: CSS syntax, selectors, and properties presentation of web
pages

• Learn the skills to build professional-looking and syariah-compliance websites

• Develop the foundation skills, confidence and ability to build a website from scratch
What is CSS?
Stand for Cascading Style Sheet.

The functions are:


• Apply to Stylesheet Language
 Standards-based set of properties and attributes to define styles
• Describe the presentation a document written in a
‘markup language’ like HTML or XML
 Markup encoding: <p>My paragraph here.</p>
 Defines the style of how things in <p> tags appear.
 Style of Font, color, size, margins, etc.
 Rules to determine how to apply markup that contains
other markup
What is CSS?
• Allow formatting changes from a single location, rather than
having to edit each page one-by-one.

• In addition, CSS are use to alter the font, color, size, and spacing
of a web content, split it into multiple columns, or user may add
animations and other decorative features.

• CSS helps in turning a normal HTML page into an attractive


website, and at the same time helps in placing the elements in
proper positions.
Function of CSS?
• Separate Content from Form
• Content is the text and images, marked up to define regions of specific types
• Form defines the “style” for the content

Content Form / Style


<p class=“header”>My First Header</p> .header { font-size:14px;}
<p class=“info”>My Information 1 goes here</p> .info { font-family: verdana;
<p class=“header”>My Second Header</p> font-color: blue;
<p class=“info”>Different Information goes here</p> font-size: 12px; }
Function of CSS?
Separate Content from Form

• Specify the style once for every instance of that class.


• Example: Specify the font once for all text on the HTML page that you’ve identified as a
“header”.

• The stylesheet can be a separate file which all HTML pages on your entire site
can link to.
• Only have to specify the style once for your ENTIRE SITE

• Can change the style for your entire site by editing only ONE FILE.
CSS Syntax
• CSS Syntax rule consists of a selector, property, and its value.
• The selector points to the HTML element where the CSS style is to be
applied.
• The CSS property is separated by semicolons. It is a combination of the
selector name followed by the property: value pair that is defined for the
specific selector.
CSS Syntax - Continue

•Declaration: A combination of a property and its corresponding value.


•Selector: Used to target and select specific HTML elements to apply styles to.
•Property: Defines the specific aspect or characteristic of an element that you want to modify.
•Value: Assigned setting or parameter for a given property, determining how the selected element
should appear or behave.
Example Code and Output

Output:
In the code on the left, h1 is the selector
of h1 tags, it select the h1 element that
you want to style. The color is a property
and green is the value of that property,
similar text-align is the property and
value of that property is center.
Three ways to insert CSS
• Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>

Note, the selector for inline CSS is the tag which contains the style
attribute.
Three ways to insert CSS
• Internal: the <style> markup tag
<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
Three ways to insert CSS
• External: the .css stylesheet file

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />


CSS Skinning
• “Skinning” - changing the look of a page or your site
• Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin1.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
Some information goes here.
CSS Skinning - Continue
• “Skinning” - changing the look of a page or your site
• Selecting an appearance by choosing which stylesheet to use.
<link rel="stylesheet" type="text/css" href=“skin2.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=

Some information goes here.


Selectors
• CSS selectors are used to select the content user want to style their website.
Selectors are the part of CSS rule set. CSS selectors select HTML elements
according to its id, class, type, attribute and others.

• Among the commonly use CSS Selectors are listed below;


CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
CSS Element Selector
The element selector selects the HTML element by name.

Output
CSS ID Selectors
• The id selector selects the id attribute of an HTML element
to select a specific element.
• An id is always unique within the page so it is chosen to
select a single, unique element.
It is written with the hash character (#), followed by the id
of the element.
CSS ID Selectors
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
Output
6. text-align: center;
7. color: blue;
8. }
9. </style>
10.</head>
11.<body>
12.<p id="para1">Hello Javatpoint.com</p>
13.<p>This paragraph will not be affected.</p>
14.</body>
15.</html>
CSS Class Selectors
The class selector selects HTML elements with a specific class attribute. It is used
with a period character . (full stop symbol) followed by the class name
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center { Output
6. text-align: center;
7. color: blue;
8. }
9. </style>
10.</head>
11.<body>
12.<h1 class="center">This heading is blue and ce
nter-aligned.</h1>
13.<p class="center">This paragraph is blue and ce
nter-aligned.</p>
14.</body>
15.</html>
CSS Universal Selectors
The universal selector is used as a wildcard character. It selects
all the elements on the pages.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * { Output
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10.</head>
11.<body>
12.<h2>This is heading</h2>
13.<p>This style will be applied on every paragraph.</
p>
14.<p id="para1">Me too!</p>
15.<p>And me!</p>
16.</body>
17.</html>
CSS Group Selectors
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
Output
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>
CSS Properties
Specific aspect or characteristic of an element that you want to modify.
Text and Font
• Text and font properties in CSS are used to format the appearance of words and
text on a webpage.

• The font-size property sets the size of the text. Font size can be set with pixels
(px), em, percentage (%) or by using keywords.

• It helps in making the websites more interesting, cheerful and presentable.


Text and Font
Using px
• The default font size used on most browsers is 16 pixels. But user can always
change it to different size, for example: fontsize:20px;.

Using em
• An em is is equal to the current font size. If the element is not a child of any
element, the current font size is the browser’s default font size. As mentioned
above, the default font size used on most browsers is 16px. Hence by default 1em
= 16px.
Text and Font
Using percentage
• Percentage is similar to em. 200% simply means 2 times the current font size. Hence, 200% =
2em.

Using Keywords
Commonly used keywords are xx-small, x-small, small, medium (this is the default), large,
x-large and xx-large.
Examples:
• font-size: 40px;
• font-size: 1.5em;
• font-size: 120%;
• font-size: large;
Text Style

Source from https://blog.hubspot.com/website/web-safe-html-css-fonts


Text Property : Color
• The CSS color property specifies the color of the text.

• More explaination at https://www.javatpoint.com/css-text-


properties
Text Property : Text-Alignment
• The text-alignment property allows user to specify whether the text appeared will be
centered, or aligned to the left or right, or justified.

Sources from https://www.geeksforgeeks.org/css-text-align-property/


Text Property : Text-Decoration
• The text-decoration property is mainly used to specify whether the text should be
decorated with a line. The commonly used values are none (i.e. just normal text, no
decoration), underline, overline (a line above the text) and line-through (a line through
the text).
Text Property : Text-Decoration

Source from
https://x.com/Div_pradeep/status/15519474434318
04930
Text Property : Letter-Spacing
• Letter spacing is used to increase or decrease the spacing between letters in a word. User
at first specify the amount of spacing in pixels.
• To increase the spacing, user may insert a positive value. To decrease it, use a negative
value.
Text Property : Letter-Spacing
• <!DOCTYPE html>
• <html>
• <head> Output
• <title>The letter-spacing property in CSS</title>
• <style type="text/css">
• .normal { letter-spacing: normal; }
• .em-wide { letter-spacing: 0.4em; }
• .em-wider { letter-spacing: 1em; }
• .em-tight { letter-spacing: -0.05em; }
• .px-wide { letter-spacing: 6px;
• color: green;
• }
• </style>
• </head>
• <body>
Text Property : Word-Spacing
• This element is used to increase or decrease the spacing between words in text. Similar to
letter-spacing, you specify the amount of spacing in pixels, using positive to
increase the spacing and negative to decrease it.

• More information on https://server2client.com/cssreference/wordspacing.html


• More on text property
https://www.creative-tim.com/blog/educational-ui-ux/best-free-fonts-for-websites-th
e-ultimate-collection/
Thank You

You might also like