Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

CSSSS

The document provides an introduction to CSS (Cascading Style Sheets), explaining its role in formatting HTML elements and enhancing the visual presentation of web pages. It outlines the advantages of using CSS, such as time-saving, faster loading times, and easier maintenance, and describes different methods for applying CSS, including external, internal, and inline styles. Additionally, it covers CSS syntax, selectors, properties, and how to use colors and backgrounds effectively.

Uploaded by

gladys02.adrupio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSSSS

The document provides an introduction to CSS (Cascading Style Sheets), explaining its role in formatting HTML elements and enhancing the visual presentation of web pages. It outlines the advantages of using CSS, such as time-saving, faster loading times, and easier maintenance, and describes different methods for applying CSS, including external, internal, and inline styles. Additionally, it covers CSS syntax, selectors, properties, and how to use colors and backgrounds effectively.

Uploaded by

gladys02.adrupio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

INTRODUCTION TO CSS

 CSS stands for Cascading Style Sheets. HTML (when used correctly) describes the
different parts of a document– Paragraphs, section headings, quotes, images.
Formatting information (how to display it) is in separate style sheets (.css files).
 CSS is for formatting side of the web, CSS describes how HTML elements are to be
displayed on screen, paper, or in other media CSS saves a lot of work. It can control
the layout of multiple web pages all at once
 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, what background images or colors are used, as well as a variety of other
effects

 CSS allows you to create rules that specify how the content of an element should
appear. For example, you can specify that the background of the page is cream, all
paragraphs should appear in gray using the Arial typeface, or that all level one headings
should be in a blue, italic, Times typeface.

Advantages of CSS
1. 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.
2. Pages load faster: If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that
tag. So, less code means faster download times.
3. Easy maintenance: To make a global change, simply change the style, and all the
elements in all the web pages will be updated automatically.
4. Superior styles to HTML: CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
5. Multiple Device Compatibility: Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
Versions of a website can be presented for hand held devices such as PDAs and Cell
phones or for printing.
6. 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.
 Using CSS, you could add a border around any of the boxes, specify its width and
height, or add a background color. You could also control text inside a box, for
example, its color, size, and the typeface used.
Examples of Styles
1) boxes; Color
Width and height Borders (color, Italics, bold, uppercase,
width, and style) Background color and lowercase, small-caps
images Position in the browser
window. 3) Specific:
There are also specific ways in which
2) Text you can style certain elements such as
Typeface lists, tables, and forms.
Size
CSS Syntax
 A CSS rule-set 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.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.

Example 1:
In the following example all <p> elements will be center-aligned, with a red text color:
<! DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.
</p>
</body>
</html>
Example 2:
<! DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>


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

</body>
</html>
How to use CSS
There are three ways of inserting a style sheet:
1) External style sheet
2) Internal style sheet
3) Inline style

Using external CSS


 With an external style sheet, you can change the look of an entire website by changing
just one file!
 Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the <head> section

It should use three attributes:


i. href
This specifies the path to the CSS file (which is often placed in a folder called CSS or
styles).
ii. type
This attribute specifies the type of document being linked to. The value should be
text/css.
iii. rel
This specifies the relationship between the HTML page and the file it is linked to. The
value should be style sheet when linking to a CSS file.
Note:
 An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension.
 Here is how the "mystyle.css" looks:

Example:
<! DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
<h1>Potatoes</h1>
<p>There are dozens of different potato varieties. They are usually described as early,
second early and main crop.</p>
</body>
</html>

Using internal CSS


 You can also include CSS rules within an HTML page by placing them inside a <style>
element, which usually sits inside the <head> element of the page.

 The <style> element should use the type attribute to indicate that the styles are
specified in CSS. The value should be text/ css.
 An internal style sheet may be used if one single page has a unique style.
 Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
 Uses the style tag (in the document head)
<Style type= “class/css”>
/* CSS information goes here */
</style>
Example:
<! DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato varieties. They are usually described as early,
second early and main crop.</p>
</body>
</html>
CSS associates style rules with html elements
 CSS works by associating rules with HTML elements. These rules govern
how the content of specified elements should be displayed. A CSS rule
contains two parts:
1) A selector
2) A declaration.

Selectors;
 Selectors indicate which element the rule applies to.
 CSS selectors are used to "find" (or select) HTML elements based on their element
name, id, class, attribute, and more.

Example:
 You can select all <p> elements on a page like this (in this case, all <p> elements will
be center-aligned, with a red text color):

<! DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: red;

}
</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Declarations
Indicate how the elements referred to in the selector should be styled.
Declarations are split into two parts;
i. a property and a value
ii. and are separated by a colon.

The element Selector


 The element selector selects elements based on the element name.

Example:

 You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):

<! DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: red;
}

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

The id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element should be unique within a page, so the id selector is used to select
one unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id
of the element.

Example
 The style rule below will be applied to the HTML element with id="para1":

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body></html>
The class Selector
 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the
name of the class.

Example:
 In the example below, all HTML elements with class="center" will be red and center-
aligned:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

Further;
 You can also specify that only specific HTML elements should be affected by a class.
 In the example below, only <p> elements with class="center" will be center-aligned:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Grouping Selectors
 If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

 It will be better to group the selectors, to minimize the code.


 To group selectors, separate each selector with a comma.
 In the example below we have grouped the selectors from the code above:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

CSS Comments
 Comments are used to explain the code, and may help when you edit the source code
at a later date.
 Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */. Comments can also span multiple
lines:

Example:
<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

/* This is a single-line comment */

text-align: center;

/* This is a multi-line comment */

</style>

</head>

<body>
<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>

CSS properties affect how elements are displayed


 CSS declarations sit inside curly brackets and each is made up of two parts: a
property and a value, separated by a colon. You can specify several properties in
one declaration, each separated by a semi-colon.
Example
h1, h2, h3 {
font-family: Arial; color: yellow; }
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the
Arial typeface, in a yellow color.
 Properties indicate the aspects of the element you want to change. For example,
color, font, width, height and border.

 Values specify the settings you want to use for the chosen properties. For
example, if you want to specify a color property then the value is the color you
want the text in these elements to be.

How CSS Rules Cascade


 If there are two or more rules that apply to the same element, it is important to
understand which will take precedence.

Last Rule
 If the two selectors are identical, the latter of the two will take precedence. Here you
can see the second i selector takes precedence over the first.
Specificity
 If one selector is more specific than the others, the more specific rule will take
precedence over more general ones. In this example:
h1 is more specific than *
p b is more specific than p
p#intro is more specific than p
*{
font-family: Arial, Verdana, sans-serif;}
h1 {
font-family: "Courier New", monospace;}
i{
color: green;}
i{
color: red;}
b{
color: pink;}
pb{
color: blue !important;}
pb{
color: violet;}
p#intro {
font-size: 100%;}
p{
font-size: 75%;}

How to use color element in CSS


The color property allows you to specify the color of text inside an element. You can specify
any color in CSS in one of three ways:

1) RBG VALUES:
These express colors in terms of how much red, green and blue are used to make it up.
Values are expressed as numbers between 0 and 255.
For example: rgb (100, 100, 90)

2) HEX CODES
These are six-digit codes that represent the amount of red, green and blue in a color,
preceded by a pound or hash # sign. For example: #ee3e80

3) COLOR NAMES
Colors are represented by predefined names. However, they are very limited in number. There
are 147 predefined color names that are recognized by browsers.

/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p{
color: rgb(100,100,90);}

Background Color
 CSS treats each HTML element as if it appears in a box, and the background-color
property sets the color of the background for that box.

 You can specify your choice of background color in the same three ways you can
specify foreground colors: RGB values, hex codes, and color names
If you do not specify a background color, then the background is transparent.

 By default, most browser windows have a white background, but browser users
can set a background color for their windows, so if you want to be sure that the
background is white you can use the background-color property on the <body>
element.

body {
background-color: rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p{
background-color: white;}
Try out!!
<! DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(255,179,175);}
h1 {
color: rgb(255,185,255);}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties. They are usually described as
early, second early and maincrop.</p>
</body>
</html>

Specifying Typefaces font-family


 The font-family property allows you to specify the typeface that should be used for any
text inside the element(s) to which a CSS rule applies.
 The value of this property is the name of the typeface you want to use.
 The people who are visiting your site need the typeface you have specified installed on
their computer in order for it to be displayed.
 You can specify a list of fonts separated by commas so that, if the user does not have
your first choice of typeface installed, the browser can try to use an alternative font
from the list.
<!DOCTYPE html>
<html>
<head>
<title>Font Family</title>
<style type="text/css">
body {
font-family: Georgia, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, sans-serif;}
.credits { font-family: "Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed"
href="http://en.wikipedia.org/wiki/ Briard">briard</a>, or berger de brie, is a
large breed of dog traditionally used as a herder and guardian of sheep...</p>
</body>
</html>

Size of Type font-size


The font-size property enables you to specify a size for the font. There are several ways to
specify the size of a font. The most common are:
i. Pixels: Pixels are commonly used because they allow web designers very precise
control over how much space their text takes up. The number of pixels is followed by
the letters px.
ii. Percentages: The default size of text in browsers is 16px. So a size of 75% would be
the equivalent of 12px, and 200% would be 32px.

Example:
body {font-family: Arial, Verdana, sans-serif; font-size: 12px ;}
h1 {font-size: 200 %;}
h2 {font-size: 1.3em ;}

Bold font-weight
The font-weight property allows you to create bold text. There are two values that this
property commonly takes:
i. Normal: This causes text to appear at a normal weight.

ii. Bold: This causes text to appear bold.


.credits {font-weight: bold;}
ITALIC Font style:
 If you want to create italic text, you can use the font-style property. There are three
values this property can take:
.credits { font-style: italic;}
Uppercase & lowercase text-transform
 The text-transform property is used to change the case of text giving it one of the
following values:
i. Uppercase This causes the text to appear uppercase.
ii. Lowercase This causes the text to appear lowercase.
iii. Capitalize This causes the first letter of each word to appear capitalized.
Example:
h1 {text-transform: uppercase ;}
h2 {text-transform: lowercase ;}
.credits {text-transform: capitalize ;}

 In this example, the <h1> element is uppercase, the <h2> element is lowercase, and
the credits are capitalized. In the HTML, the word by in the credits had a lowercase b.
 If you do utilize the uppercase option, it is worth looking at the letter-spacing property
to increase the gap between each letter as shown on page 284. This will help improve
readability

Underline & Strike text-decoration


The text-decoration property allows you to specify the following values:
i. none This removes any decoration already applied to the text.
ii. underline This adds a line underneath the text.
iii. overline This adds a line over the top of the text.
iv. line-through This adds a line through words.
v. blink This animates the text to make it flash on and off (however this is generally
frowned upon, as it is considered rather annoying).

Example:
.credits {text-decoration: underline ;}
a{
text-decoration: none ;}
 In this example, the credits have been underlined. Also, the name of the breed (which
is a link) is not underlined, which it would be by default because it is a link.
Alignment text-align
The text-align property allows you to control the alignment of text. The property can take
one of four values:
i. Left: This indicates that the text should be left-aligned.
ii. Right: This indicates that the text should be right-aligned.
iii. Center: This allows you to center text.
iv. Justify: This indicates that every line in a paragraph, except the last line, should be
set to take up the full width of the containing box.

Example:
h1 {
text-align: left;}
p{
text-align: justify;}
.credits {
text-align: right;}
WEBSITE LAYOUT
 A website is often divided into headers, menus, content and a footer:

HTML <div> Tag


 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is used to group block-elements to format them with CSS.

Header
 A header is usually located at the top of the website (or right below a top navigation
menu). It often contains a logo or the website name:

Try out:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}

/* Style the header */


.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>
Navigation Bar
 A navigation bar contains a list of links to help visitors navigating through your website:

Try out:
<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Website Layout</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

body {

margin: 0;

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

}
/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

</style>

</head>

<body>

<div class="header">
<h1>Header</h1>

</div>

<div class="topnav">

<a href="#">Link</a>

<a href="#">Link</a>

<a href="#">Link</a>

</div>

</body>

</html>

Footer
 The footer is placed at the bottom of your page. It often contains information like
copyright and contact info:

Try out
<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Website Layout</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

}
body {

margin: 0;

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}
/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

/* Create three unequal columns that floats next to each other */

.column {

float: left;

padding: 10px;

/* Left and right column */

.column.side {

width: 25%;

/* Middle column */

.column.middle {

width: 50%;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to
each other */

@media (max-width: 600px) {

.column.side, .column.middle {

width: 100%;

/* Style the footer */

.footer {

background-color: #f1f1f1;

padding: 10px;

text-align: center;

</style>

</head>

<body>

<div class="header">

<h1>Header</h1>

<p>Resize the browser window to see the responsive effect.</p>

</div>

<div class="topnav">

<a href="#">Link</a>
<a href="#">Link</a>

<a href="#">Link</a>

</div>

<div class="row">

<div class="column side">

<h2>Side</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

<div class="column middle">

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium
urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque
vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
Praesent scelerisque tortor sed accumsan convallis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium
urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque
vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
Praesent scelerisque tortor sed accumsan convallis.</p>

</div>

<div class="column side">

<h2>Side</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

</div>

<div class="footer">

<p>Footer</p>
</div>

</body>

</html>

Content
The layout in this section, often depends on the target users. The most common layout is one
(or combining them) of the following:

 1-column (often used for mobile browsers)


 2-column (often used for tablets and laptops)
 3-column layout (only used for desktops)

You might also like