Scribd
Upload
6 views15 pages

Week 5

This document is a comprehensive guide on CSS (Cascading Style Sheets), detailing its importance, syntax, and various methods of implementation including external, internal, and inline styles. It covers key concepts such as selectors, box model, padding, margin, and border properties, along with their attributes and examples. Additionally, it explains CSS background, font, text properties, and how to manipulate them for effective web design.

Uploaded by

Ranzu Maestro
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
6 views15 pages

Week 5

This document is a comprehensive guide on CSS (Cascading Style Sheets), detailing its importance, syntax, and various methods of implementation including external, internal, and inline styles. It covers key concepts such as selectors, box model, padding, margin, and border properties, along with their attributes and examples. Additionally, it explains CSS background, font, text properties, and how to manipulate them for effective web design.

Uploaded by

Ranzu Maestro
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/ 15

4 - CSS

COMPUTER ARTS AND TECHNOLOGICAL COLLEGE-LIGAO CITY, INC.


Washington Street, Binatagan, Ligao city

JUNIOR HIGH
SCHOOL-G8
Programming
Using Web
Technology

Quarter 3 – Module 5
WEEK 5

1
4 - CSS

What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file.

CSS Syntax
 A CSS rule has two main parts: a selector, and one or more declarations:

 The selector is normally the HTML element you want to style.


 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a value.

What is the difference between class and id?


The id Selector
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined with a "#".
 The style rule below will be applied to the element with id="para1":

#para1
{ text-align:center; color:red; }

2
4 - CSS

The class Selector


 The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the same class.
 The class selector uses the HTML class attribute, and is defined with a "."
 In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}
 We can use more than one class in a single element

<a class=”Center bold italic”>

Explain different ways to write the CSS. / Explain


CSS with all types. / Enlist and explain methods of
using CSS in web page.
 There are three ways of inserting a style sheet:
o External style sheet
o Internal/Embedded style sheet
o Inline style
1. External Style Sheet
o When using CSS it is preferable to keep the CSS separate from your HTML.
o Placing CSS in a separate file allows the web designer to completely differentiate between
content (HTML) and design (CSS).
o External CSS is a file that contains only CSS code and is saved with a ".css" file extension.
o This CSS file is then referenced in your HTML using the <link> instead of <style>.

File Creation
o Open up notepad.exe, or any other plain text editor and type the following CSS code.
body{ background-color: gray;} p { color: blue; }h3{ color: white; }
o Save the file as a CSS (.css) file.
o Name the file "test.css" (without the quotes). Now create a new HTML file and fill it with
the following code.

<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS! </p>
</body></html>

3
4 - CSS

Why Use External CSS?


o It keeps your website design and content separate.

o It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing
the same CSS code on every web page you have, simply have many pages refer to a single
CSS file with the "link" tag.
o You can make drastic changes to your web pages with just a few changes in a single CSS
file.

2. Internal/Embedded CSS
o This type of CSS is only for Single Page.
o When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The
HTML code below contains an example of <style>'s usage.
<html><head>
<style type="text/css"></style>
</head><body>
<p>Your page's content!</p></body>
</html>

Creating Internal CSS Code


o Below is an example of simple CSS code.
<html><head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style></head><body>
<p>White text on a black background!</p></body>
</html>

3. Inline CSS
o It is possible to place CSS right in your HTML code, and this method of CSS usage is
referred to as inline css.
o Inline CSS has the highest priority out of external, internal, and inline CSS.
o This means that you can override styles that are defined in external or internal by using
inline CSS.
o If you want to add a style inside an HTML element all you have to do is specify the desired
CSS properties with the style HTML attribute.
<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<p style="background: blue; color: white;">A new background andfont color with
inline CSS</p></body>
</html>

4
4 - CSS

Explain CSS Background with all its attributes


 CSS background properties are used to define the background effects of an element.

1. CSS Background Color


o The background-color property specifies the background color of an element.

o The background color of a page is defined in the body selector:


o Below is example of CSS backgrounds
body {background-color:#b0c4de;}

2. CSS Background Image


o The background-image property specifies an image to use as the background of an
element.

body {background-image:url('paper.gif');}
3. Background Image Repeat
o You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
p {background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat: repeat-y; }
ol {background-image: url(smallPic.jpg); background-repeat: repeat-x; }
ul {background-image: url(smallPic.jpg);background-repeat: no-repeat; }

4. CSS Fixed Background Image


o The background-attachment property sets whether a background image is fixed or scrolls
with the rest of the page.
textarea.noScroll { background-image: url(smallPic.jpg); background-attachment: fixed;}
textarea {
background-image:
url(smallPic.jpg); background-
attachment: scroll; }

5. CSS Background Image Positioning


o The background-position property sets the starting position of a background image.
p {background-image: url(smallPic.jpg); background-position: 20px 10px;}
h4 {background-image: url(smallPic.jpg); background-position: 30% 30%;}
ol {background-image: url(smallPic.jpg); background-position: top
center;}

5
4 - CSS

Explain CSS Font with all its attributes


 CSS font properties define the font family, boldness, size, and the style of a text.

1. CSS Font Color


o Set the text-color for different elements:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }

2. CSS Font Family


o The font family of a text is set with the font-family property.

h4 { font-family: sans-serif; }h5 { font-family: serif; }


h6 { font-family: arial; }

3. CSS Font Size


o The font-size property sets the size of the text.
p { font-size: 120%; } ol{ font-size: 10px; } ul{ font-size: x-large; }

4. CSS Font Style


o The font-style property is mostly used to specify italic text.
o This property has three values:
 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p { font-style: italic; }h4{ font-style: oblique; }

5. CSS Font Weight


o The font-weight property sets how thick or thin characters in text should be displayed.
p { font-weight: 100; } ul{ font-weight: bolder; }

6. CSS Font Variant


o The font-variant property specifies whether or not a text should be displayed in a small-
caps font.

p { font-variant: small-caps; }}

6
4 - CSS

Explain CSS Text with all its attributes.


 While CSS Font covers most of the traditional ways to format your text, CSS Text allows you to
control the spacing, decoration, and alignment of your text.
1. Text Decoration
o The text-decoration property is used to set or remove decorations from text.
o The text-decoration property is mostly used to remove underlines from links for design
purposes.

h4{ text-decoration: line-through; }


h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

2. Text Indent
o The text-indentation property is used to specify the indentation of the first line of a text.
p { text-indent: 20px; } h5 { text-indent: 30%; }

3. Text Align
o The text-align property is used to set the horizontal alignment of a text.
p { text-align: right; }
h5{ text-align: justify; }

4. Text Transform
o The text-transform property is used to specify uppercase and lowercase letters in a text.

p { text-transform: capitalize; } h5{ text-transform: uppercase; }

5. CSS White Space


o The white-space attribute allows you to prevent text from wrapping until you place a
break <br /> into your text.
p { white-space: nowrap; }

6. CSS Word Spacing


o With the CSS attribute word-spacing you are able to specify the exact value of the spacing
between your words. Word-spacing should be defined with exact values.
p { word-spacing: 10px; }

7. CSS Letter Spacing


o With the CSS attribute letter-spacing you are able to specify the exact value of the spacing
between your letters. Letter-spacing should be defined with exact values.
p { letter-spacing: 3px; }

7
4 - CSS

Explain 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 HTML elements, and it consists of:
margins, borders, padding, and the actual content.
 The box model allows us to place a border around elements and space elements in relation to other
elements.
 The image below illustrates the box model:

 Explanation of the different parts:


o Margin - Clears an area around the border. The margin does not have a background color, it
is completely transparent
o Border - A border that goes around the padding and content. The border is affected by the
background color of the box
o Padding - Clears an area around the content. The padding is affected by the background
color of the box
o Content - The content of the box, where text and images appear

8
4 - CSS

Explain CSS Padding.


 The CSS padding properties define the space between the element border and the element
content.
p {padding: 15px; border: 1px solid black;
 The top, right, bottom, and left padding can be changed independently using separate properties.
A shorthand padding property can also be used, to change all puddings at once.
1. Possible Values
Value Descriptions
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element.
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

2. Padding - Shorthand property


o To shorten the code, it is possible to specify all the padding properties in one property.
This is called a shorthand property.
padding:25px 50px;

Explain CSS Margin.


 The CSS margin properties define the space around elements.
p {margin: 5px; border: 1px solid black; }

 The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.

Value Descriptions
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the
containing element
inherit Specifies that the margin should be inherited from the
parent element

1. Margin - Individual sides


o In CSS, it is possible to specify different margins for different sides:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

9
4 - CSS

2. Margin - Shorthand property


o To shorten the code, it is possible to specify all the margin properties in one property. This
is called a shorthand property.
margin:100px 50px;

Explain CSS Border with all its attributes.


 The CSS border properties allow you to specify the style and color of an element's border.

1. Border Style Types


o The border-style property specifies what kind of border to display.

p.solid {border-style: solid; } p.double {border-style: double; } p.groove {border-style: groove; }


p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.inset {border-style: inset; }
p.outset {border-style: outset; } p.ridge {border-style: ridge; } p.hidden {border-style: hidden; }

2. Border Width
o The border-width property is used to set the width of the border.

table { border-width: 7px; border-style: outset; }


td { border-width: medium; border-style: outset;
} p { border-width: thick; border-style: solid; }

10
4 - CSS

3. Border Color
o The border-color property is used to set the color of the border.
o Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an
example of each of these types.

table { border-color: rgb( 100, 100, 255); border-style: dashed; }


td { border-color: #FFBD32; border-style: ridge; }
p { border-color: blue; border-style: solid; }

4. Border: border-(direction)
o If you would like to place a border on only one side of an HTML element, or maybe have a
unique look for each side of the border, then use border-(direction).
o The direction choices are of course: top, right, bottom, and left. CSS allows you to treat
each side of a border separately from the other three sides.
o Each side can have its own color, width, and style set, as shown below.
p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-width: 5px; }
h4 { border-top-style: double; border-top-color: purple; border-top-width: thick; }

Explain CSS Lists with all its attributes.


 The CSS list properties allow you to:
o Set different list item markers for ordered lists
o Set different list item markers for unordered lists
o Set an image as the list item marker

1. CSS List Style Type


o Specify all the list properties in one declaration.
 Unordered list styles: square, circle, disc (default), and none
 Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal
(default), and none

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

2. CSS Lists with Images


o Specify an image as the list-item marker in a list:

ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif");
}

3. CSS List Position


o With Specify that the the list-item markers should appear inside the content flow (results
in an extra indentation)

ul { list-style-position: inside; }
ol { list-style-position: outside;
11
4 - CSS
}

12
4 - CSS
 Note: "Outside" is actually the default setting for indentation.

Explain CSS Links


1. CSS Anchor/Link States
o The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouse over it
 a:active - a link the moment it is clicked

a:link{color:#FF0000;} /*unvisited link*/


a:visited{color:#00FF00;} /* visited link */
a:hover{color:#FF00FF;} /* mouse over link
*/ a:active {color:#0000FF;} /* selected link
*/

2. Text Decoration
o The text-decoration property is mostly used to remove underlines from links.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

3. Background Color
o The background-color property specifies the background color for links.

background-color:#B2FF99;} a:visited
{background-color:#FFFF85;} a:hover
{background-color:#FF704D;} a:active
{background-color:#FF704D;}

13
4 - CSS
Explain CSS Position with example.

 With the knowledge of CSS Positioning we will be able to manipulate the exact position of your
HTML elements.
1. Position Relative
o Relative positioning changes the position of the HTML element relative to where it
normally appears.
o If we had a header that appears at the top of our page, we could use relative positioning
to move it a bit to the right and down a couple of pixels. Below is an example.
h3 {position: relative; top: 15px;left: 150px;}
p {position: relative; left: -10px;}

2. Position Absolute
o With absolute positioning, you define the exact pixel value where the specified HTML
element will appear.
o The point of origin is the top-left of the browser's viewable area, so be sure you are
measuring from that point.
h3 {position: absolute; top: 50px;left: 45px;}
p{position: absolute; top: 75px;left: 75px;}

Explain CSS Layers. / z-index property


 CSS allows you to control which item will appear on top with the use of layers.
 In CSS, each element is given a priority.
 If there are two overlapping CSS positioned elements, the element with the higher priority will
appear on top of the other.
 To manually define a priority, set the z-index value. The larger the value, the higher the priority
the element will have.
h4{position: relative; top: 30px;left: 50px; z-index: 2;}
p {position: relative; z-index: 1;background-color: #FFCCCC;}
 This paragraph has a z-index of 1, which is less than the header.
 If we had not defined the z-index, by default the paragraph would have been on top of the header
because it appears later in our HTML code.

Explain CSS Float property.


 With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it.
 Wrapping text around an image is easy when using the CSS Float attribute.
 You have a choice to either float the picture to the left or to the right and the rest is done for you.

img.floatLeft { float: left; margin: 4px;}


img.floatRight { float: right; margin: 4px;}

14
4 - CSS
<body>
<img src="sunset.gif" class="floatLeft"><p>The images are contained
with...</p>
<img src="sunset.gif" class="floatRight"><p>This second paragraph has
an...</p>
</body>

Introduction to CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of CSS.
 CSS3 has been split into "modules". It contains the "old CSS specification" (which has
been split into smaller pieces). In addition, new modules are added.
 CSS3 Transitions are a presentational effect which allow property changes in CSS
values, such as those that may be defined to occur on :hover or :focus, to occur
smoothly over a specified duration – rather than happening instantaneously as is the
normal behaviour.
 Transition effects can be applied to a wide variety of CSS properties, including
background-color, width, height, opacity, and many more.
 Some of the most important CSS3 modules are:
o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface

15

You might also like