3lab - Webdev - Css

WEB
DEVELOPMENT
(CSS)
By: Vera A. Panaguiton
OUTLINE
WHAT IS CSS?
INLINE STYLING
INTERNAL STYLING
EXTERNAL STYLING
ID
CLASS
BOX MODEL
APDEV 1 by Vera A. Panaguiton 2

WHAT IS CSS?
CSS or Cascading Style Sheets, is a way to style our
markup (usually HTML).
All CSS files are written in style sheets.
The HTML is responsible for the content and structure
of the web page, while CSS determines how this
content should be presented visually.
CSS can be used to add colors, change fonts, insert
backgrounds and borders, as well as to style forms.
CSS is also used to optimize web pages for responsive
design, ensuring they adapt their layout to whatever
device the user is on.
CSS BASIC PROPERTIES
Text Properties
Font Properties
Border Properties
List Properties

TEXT PROPERTIES

FONT PROPERTIES

BORDER PROPERTIES

LIST PROPERTIES

3 TYPES OF CSS STYLES
INLINE - used to style a specific HTML element and
has the highest priority among the three.
INTERNAL – used to style a single page and is

prioritized after inline.
EXTERNAL - is a standalone .css file that is linked

from a web page. Has the lowest priority among the
three.
INLINE
For this CSS style, you’ll only need to add the style
attribute to each HTML tag
Inline styling is done on the opening tag.
Use the attribute style with a property and value pair.
<element style=“property:value;”>
<p style=“color:red;”>
INLINE: EXAMPLE 1
HTML CODE RESULT

INLINE: EXAMPLE 2
CODE SNIPPET
RESULT

INTERNAL
Requires you to add <style> tag in the <head> section of your HTML
document.
Holds CSS rules for the page and that rules only apply to that page.
<html>
<head>
<title></title>
<style>
</style>
</head>
CSS RULE
A CSS rule is made up of two distinct parts — the selector and the
declaration. The selector determines what is being styled on a page,
and the declaration is how it should be styled.
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. APDEV 1 by Vera A. Panaguiton 14
INTERNAL: EXAMPLE 1
HTML CODE RESULT

INTERNAL: EXAMPLE 2
HTML CODE RESULT

INTERNAL: EXAMPLE 3
HTML CODE RESULT

EXTERNAL
 Create a separate CSS file and the css rules are applied to multiple web pages.
 The <link> element can be used in an HTML document to tell the browser where to find the CSS file
used to style the page. It is an empty element (meaning it does not need a closing tag)
<html>
<head>
<title></title>
<link href=“file.css” type=“text/css” rel=“stylesheet” />
</head>
attributes:
href
- specifies the path to the CSS file (often placed in a folder called css or styles).
type
- specifies the type of document being linked to. The value should be text/css.
rel
- specifies the relationship between the HTML page and the file it is linked to. The value
should be stylesheet whenAPDEV
linking
1 byto a CSS
Vera file.
A. Panaguiton 18
CSS CODE
EXTERNAL: EXAMPLE 1
RESULT
HTML CODE

HTML CODE
EXTERNAL: EXAMPLE 2
CSS CODE
RESULT
Note: If there are conflicts of similar properties but different values of the
same element, a page will first follow the inline styling, then followed by
internal and last is the external. APDEV 1 by Vera A. Panaguiton 20
STYLING LINKS: PSEUDO CLASSES
Links can be styled with any CSS property (e.g. color, background, etc.) but it
can also be styled depending on what state they are in.
Browsers tend to show links in blue with an underline by default, and they
will change the color of links that have been visited to help users know which
pages they have been to.
 Different states that links can exist in, can be styled using different pseudo-
classes:
:link - a normal, unvisited link
:visited - a link the user has visited or has clicked on
:hover - a link when the user’s mouse cursor is place on top of the link without a click
:active - a link the moment it is clicked
:focus – a link selected using the Tab key on a keyboard.

CSS CODE
PSEUDO CLASS: EXAMPLE
HTML CODE
RESULT
Try clicking
APDEV 1 by Vera A. Panaguiton the links to differentiate its states. 22
CSS SELECTORS
 You have met selectors already, it is the first part of a CSS Rule.
 It is a pattern of elements and other terms that tell the browser which HTML elements
should be selected to have the CSS property values inside the rule applied to them.
Categories:
Basic selectors
- select elements based on name, id, class. (We will focus on these type of selector)
Combinator selectors
- select elements based on a specific relationship between them.
- e.g. descendant, child, general sibling, etc.
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.
CSS SELECTORS

ID SELECTOR
Uses the id attribute of an html element.
The id of an element is unique within a page, so the id selector is
used to select one unique element!
 Each element can have only one ID
 Each page can have only one element with that ID
To select an element with a specific id, write a hash (#) character,
followed by the id of the element.

CODE
ID SELECTOR: EXAMPLE
RESULT

CLASS SELECTOR
Uses the class attribute of an html element.
The class selector is not unique, it allows you to define style rules that apply
to any element with a class attribute equal to a certain value.
 You can use the same class on multiple elements.
 You can use multiple classes on the same element.
To select elements with a specific class, write a period (.) character, followed
by the class name.

CODE
CLASS SELECTOR: EXAMPLE
RESULT
fcp means font color green

tac means text align center
fl means font size large
You can use any class name, just make sure you
know what its purpose.
DIV
The <div> element is often used as a container for other HTML elements.
It has no required attributes, but style, class and id are common.
<div> </div>
CODE RESULT

SPAN
The <span> element is an inline container used to mark up a part of a
text, or a part of a document.
It has no required attributes, but style, class and id are common.
<span> </span>
CODE RESULT

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:
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
Width, Height
– width and height of the box.
CODE
BOX MODEL:EXAMPLE 1 RESULT

HTML
BOX MODEL:EXAMPLE 2 CSS

BOX MODEL:EXAMPLE 2
RESULT
header and nav_menu has space because

nav_menu has a margin-top property
which is 20 pixels. Same with the footer
and content, there is a space of 50 pixels
because the footer has a margin-top
property.
nav_menu is indented because it has

margin-left property of 200 pixels.
The links has space from the border

because it has padding-top and padding-
left.
links look just like buttons because of the

padding property, the padding: 10px
10px 10px 10px, is a shorthand for
padding top, right, bottom and left.

BOX MODEL:EXAMPLE 2
RESULT WITHOUT BORDERS
Comment out
every border
property in the css
code or change
1px to 0px to hide
the borders.

LAB EXERCISES

ACTIVITY 3

Style your Activity 1 with CSS. Use all styling types:
inline, internal and external. Use div to group
contents of your site.

3lab - Webdev - Css

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3lab - Webdev - Css

Uploaded by

Copyright:

Available Formats

WEB

APDEV 1 by Vera A. Panaguiton 2

APDEV 1 by Vera A. Panaguiton 4

APDEV 1 by Vera A. Panaguiton 5

APDEV 1 by Vera A. Panaguiton 6

APDEV 1 by Vera A. Panaguiton 7

APDEV 1 by Vera A. Panaguiton 8

INTERNAL – used to style a single page and is

EXTERNAL - is a standalone .css file that is linked

APDEV 1 by Vera A. Panaguiton 11

APDEV 1 by Vera A. Panaguiton 12

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

APDEV 1 by Vera A. Panaguiton 15

APDEV 1 by Vera A. Panaguiton 16

APDEV 1 by Vera A. Panaguiton 17

APDEV 1 by Vera A. Panaguiton 19

APDEV 1 by Vera A. Panaguiton 21

APDEV 1 by Vera A. Panaguiton 24

APDEV 1 by Vera A. Panaguiton 25

APDEV 1 by Vera A. Panaguiton 26

APDEV 1 by Vera A. Panaguiton 27

fcp means font color green

APDEV 1 by Vera A. Panaguiton 29

APDEV 1 by Vera A. Panaguiton 30

APDEV 1 by Vera A. Panaguiton 32

APDEV 1 by Vera A. Panaguiton 33

header and nav_menu has space because

nav_menu is indented because it has

The links has space from the border

links look just like buttons because of the

APDEV 1 by Vera A. Panaguiton 34

APDEV 1 by Vera A. Panaguiton 35

APDEV 1 by Vera A. Panaguiton 36

APDEV 1 by Vera A. Panaguiton 37

APDEV 1 by Vera A. Panaguiton 38

You might also like