Scribd
Upload
4 views

webdevcss

Web

Uploaded by

Philharmonic Totoh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

webdevcss

Web

Uploaded by

Philharmonic Totoh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

What is css?

WMSU

1
Jasel mae T. Junasa
css
Cascading Style Sheets (CSS) is used to format the layout
of a webpage.

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!

The word cascading means that a 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 "blue", all headings, paragraphs, and other text elements within the
body will also get the same color (unless you specify something else)!

2
Using 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

3
Inline CSS
• An inline CSS is used to apply a <!DOCTYPE html>
unique style to a single HTML element. <html>
<body>
• An inline CSS uses the style attribute
of an HTML element. <h1 style="color:blue;">A Blue
Heading</h1>
• The following example sets the text
color of the <h1> element to blue, and <p style="color:red;">A red paragraph.</p>
the text color of the <p> element to red
</body>
</html>

4
Internal CSS
• An internal CSS is used to define a <!DOCTYPE html>
style for a single HTML page. <html>
<head>
• An internal CSS is defined in the <style>
<head> section of an HTML page, body {background-color: powderblue;}
within a <style> element.
h1 {color: blue;}
p {color: red;}
• The following example sets the text
</style>
color of ALL the <h1> elements (on
that page) to blue, and the text color of </head>
ALL the <p> elements to red. In <body>
addition, the page will be displayed
with a "powderblue" background color <h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

5
External CSS
• An external style sheet is used to <!DOCTYPE html>
define the style for many HTML pages. <html>
<head>
• To use an external style sheet, add a <link rel="stylesheet" href="styles.css">
link to it in the <head> section of each </head>
HTML page
<body>

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

</body>
</html>

6
• The external style sheet can be body {
written in any text editor. The file background-color: powderblue;
must not contain any HTML code, }
and must be saved with a .css h1 {
extension. color: blue;
}
p {
color: red;
}

7
CSS Colors, Fonts and Sizes
Here, we will demonstrate some <!DOCTYPE html>
<html>
commonly used CSS properties. You will
<head>
learn more about them later. <style>
h1 {
color: blue;
The CSS color property defines the text font-family: verdana;
color to be used. font-size: 300%;
}
p {
The CSS font-family property defines the color: red;
font to be used. font-family: courier;
font-size: 160%;
}
The CSS font-size property defines the </style>
text size to be used. </head>
<body>

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

</body>
</html>

8
CSS Border
• The CSS border property defines <!DOCTYPE html>
<html>
a border around an HTML
<head>
element. <style>
p{
border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

9
CSS Padding
• The CSS padding property defines <!DOCTYPE html>
<html>
a padding (space) between the
<head>
text and the border. <style>
p{
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

10
CSS Margin
• The CSS margin property defines <!DOCTYPE html>
<html>
a margin (space) outside the
<head>
border. <style>
p{
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

11
Link to External CSS
• External style sheets can be This example uses a full URL to link to a
referenced with a full URL or with style sheet:
a path relative to the current web <link rel="stylesheet" href="https:/
page. /www.youtube.com/html/styles.css">

This example links to a style sheet located


in the html folder on the current web site:

<link rel="stylesheet" href="/html/


styles.css">

This example links to a style sheet located


in the same folder as the current page:

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


css">

12
HTML Links
• Links are found in nearly all HTML Links – Hyperlinks
web pages. Links allow users
to click their way from page to
page. You can click on a link and jump to
another document.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It When you move the mouse over a
has the following syntax: link, the mouse arrow will turn into a
little hand.
<a href="url">link text</a>

13
The most important attribute of the <a> Example
element is the href attribute, which
indicates the link's destination. This example shows how to create a
link to youtube.com.com:
The link text is the part that will be visible <a href="https://
to the reader. www.youtube.com/">Visit
youtube.com!</a>
Clicking on the link text, will send the
reader to the specified URL address.

14
HTML Links - The target
Attribute
By default, the linked page will be displayed in Example
the current browser window. To change this, you
must specify another target for the link. Use target="_blank" to open the
linked document in a new browser
The target attribute specifies where to open the window or tab:
linked document.
<a href="https://
The target attribute can have one of the www.youtube.com/" target="_b
following values: lank">Visit youtube!</a>
• self - Default. Opens the document in the
same window/tab as it was clicked
• blank - Opens the document in a new
window or tab
• parent - Opens the document in the parent
frame
• top - Opens the document in the full body of
the window

15
Absolute URLs vs. Relative
URLs
Both examples above are using an <h2>Absolute URLs</h2>
absolute URL (a full web address) in <p><a href="https://www.faceboo
the href attribute. k.com">W3C</a></p>
<p><a href="https://
www.google.com/">Google</a></p>
A local link (a link to a page within the
same website) is specified with a <h2>Relative URLs</h2>
relative URL <p><a href="html_images.asp">HT
ML Images</a></p>
<p><a href="/css/default.asp">C
SS Tutorial</a></p>

16
HTML Links - Use an Image as a
Link
To use an image as a link, just put the
<img> tag inside the <a> tag:
Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:4
2px;">
</a>

17
Link to an Email Address
• Use mailto: inside the href
attribute to create a link that opens
the user's email program (to let
them send a new email):

Example

<a href="mailto:someone@example
.com">Send email</a>

18
Button as a Link
• To use an HTML button as a link, <!DOCTYPE html>
you have to add some JavaScript <html>
code. <body>
• JavaScript allows you to specify
what happens at certain events,
<h2>Button as a Links</h2>
such as a click of a button:

<p>Click the button to go to the HTML


Example
tutorial.</p>
<button onclick="document.location='
default.asp'">HTML Tutorial</button> <button
onclick="document.location='default.asp'">
HTML Tutorial</button>

</body>
</html>

19
Link Titles
The title attribute specifies extra Example
information about an element. The
information is most often shown as a <a href="https://
tooltip text when the mouse moves over www.youtube.com/
the element.
html/" title=“youtube.com">V
isit our HTML Tutorial</a>

20
More on Absolute URLs and Relative
URLs
Example Example
Use a full URL to link to a web page: Link to a page located in the same
folder as the current page:
<a href="https://
www.w3schools.com/html/ <a href="default.asp">HTML
default.asp">HTML tutorial</a> tutorial</a>

Example
Link to a page located in the html folder
on the current web site:
<a href="/html/default.asp">HTML
tutorial</a>

21
HTML Links - Create
Bookmarks
HTML links can be used to create
bookmarks, so that readers can
jump to specific parts of a web
page.

22
Create a Bookmark in HTML
Bookmarks can be useful if a Example
web page is very long. First, use the id attribute to create a
bookmark:
To create a bookmark - first
create the bookmark, then add a <h2 id="C4">Chapter 4</h2>
link to it.
Then, add a link to the bookmark
When the link is clicked, the ("Jump to Chapter 4"), from within the
page will scroll down or up to the same page:
location with the bookmark.
Example
You can also add a link to a bookmark on another
page: <a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to
Chapter 4</a>

23
HTML Tables Example
A simple HTML table:
Define an HTML Table <table>
A table in HTML consists of table <tr>
cells inside rows and columns. <th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>medi</td>
<td>mixi</td>
<td>phi</td>
</tr>
<tr>
<td>Merry</td>
<td>Marry</td>
<td>phi</td>
</tr>
</table>
24
Table Cells
Each table cell is defined by a Example
<td> and a </td> tag.
<table>
<tr>
td stands for table data. <td>Emil</td>
<td>Tobias</td>
Everything <td>Linus</td>
between <td> and </td> are the
</tr>
content of the table cell.
</table>

25
Table Rows
Each table row starts with a <tr> and ends Example
with a </tr> tag.
<table>
tr stands for table row. <tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

26
Table Headers
Sometimes you want your cells to be table Example
header cells. In those cases use the <th> tag
Let the first row be table header cells:
instead of the <td> tag:
<table>
th stands for table header. <tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

27
HTML Table Borders
How To Add a Border Example

table, th, td {
To add a border, use the CSS border
border: 1px solid black;
property on table, th, and td elements:
}

28
Collapsed Table Borders
To avoid having double borders like in the Example
example above, set the CSS border-
collapse property to collapse. table, th, td {
border: 1px solid black;
This will make the borders collapse into a border-collapse: collapse;
single border: }

29
Style Table Borders
If you set a background color of Example
each cell, and give the border a
white color (the same as the table, th, td {
document background), you get border: 1px solid white;
the impression of an invisible border-collapse: collapse;
border: }
th, td {
background-color: #96D4D4;
}

30
Round Table Borders
With the border-radius property, the Example
borders get rounded corners:
table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Skip the border around the table Example


by leaving out table from the
css selector: th, td {
border: 1px solid black;
border-radius: 10px;
}

31
Dotted Table Borders
With the border-style property, you Example
can set the appearance of the border.
th, td {
border-style: dotted;
}

32
Border Color
With the border-color property, you • Example
can set the color of the border.
• th, td {
border-color: #96D4D4;
}

33
HTML Table Sizes
HTML tables can have different
sizes for each column, row or the
entire table.

Use the style attribute with the width


or height properties to specify the size
of a table, row or column.

34
HTML Table Width
To set the width of a table, add the Example
style attribute to the <table> element: Set the width of the table to 100%:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

35
HTML Table Column Width
To set the size of a specific column, Example
add the style attribute on a <th> or Set the width of the first column to 70%:
<td> element: <table style="width:100%">
<tr>
<th style="width:70%">Firstname
</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

36
HTML Table Row Height
To set the height of a specific row, Example
add the style attribute on a table row Set the height of the second row to 200
element: pixels:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

37

You might also like