Scribd
Carica
8 visualizzazioni

Smartguide CSS

CSS looks tough at first sight but not whne you have gone through this css simple guide

Caricato da

Lenu
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
8 visualizzazioni

Smartguide CSS

CSS looks tough at first sight but not whne you have gone through this css simple guide

Caricato da

Lenu
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 8

Smart Guide

for
CSS
Concise guidelines for beginners

Compiled by

NuBari, LE
[email protected]
CONTENTS

CONTENTS .......................................................................................................... 1
START HERE......................................................................................................... 2
WHAT IS CSS? ........................................................................................................ 2
HOW TO ADD CSS TO HTML ................................................................................ 2
THREE (3) WAYS TO ADD CSS: ...................................................................................... 2
INLINE CSS ............................................................................................................. 2
INTERNAL CSS ........................................................................................................ 3
EXTERNAL CSS ........................................................................................................ 4
CSS COLORS, FONTS AND SIZES................................................................................... 5
CSS BORDER .......................................................................................................... 5
LINK TO EXTERNAL CSS ............................................................................................. 6

Smart guide for css. | 1


START HERE
What is CSS?
 CSS stands for Cascading Style Sheets.
 CSS saves a lot of work.
 It can control the layout of multiple web pages all at once.
 CSS = Styles and Colors, Manipulate Text, Colors, Boxes, etc
 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!

Remember: The word cascading means that a style applied to a parent


(originating) element will also apply to or inherited by 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)

HOW TO ADD CSS TO HTML


Three (3) ways to add css:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files.

Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

Smart guide for css. | 2


Example
<h1 style="color:blue;">My school bag is blue in color</h1>

<p style="color:red;"> My school bag is red in color.</p>

<body style="color:green;">
<p>Every texts and items placed within this body shall be green in color.</p>
<h1>Even this heading text shall appear green</h1>
<p style="color:red;"> My school bag is red in color.</p>
</body>
Note: the cascading rule uses the inline css applied to the last paragraph tag within the
body tag to take a red colour different from the green colour already applied to the
body.

Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
 The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "orange" background color:

Example
<!DOCTYPE html>
<html>
<head>
<title>My Css demo page</title>
<style>
body {background-color: orange;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>

Smart guide for css. | 3


External CSS
 An external style sheet is used to define the style for many HTML pages.
 To use an external style sheet, add a link to it in the <head> section of each
HTML page:
 A css file must first be created or made available before it can be linked to a
web page.
 A css filename must have the file extension as .css (e.g. mycssfile.css,
styles.css, etc.)
 When creating a css file, do not include any html code, just type in the styles
with the word styles.
 The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

This Example demonstrate how to link css to a web page.


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

Copy the below styles into a text file and save it as "styles.css" file looks like:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site, by
changing one file!

Smart guide for css. | 4


CSS Colors, Fonts and Sizes
 The CSS color property defines the text color to be used.
 The CSS font-family property defines the font to be used.
 The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Smart guide for css. | 5


Example
Use of CSS border property:

p{
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

Example
Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}

Link to External CSS


External style sheets can be referenced with a full URL or with a path (address)
relative to the current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.kenpoly.com.ng/html/styles.css">

Example
This example links to a style sheet located in the html folder on the current web site:

<link rel="stylesheet" href="/html/styles.css">

Smart guide for css. | 6


Example
This example links to a style sheet located in the same folder as the current web page:

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

Smart guide for css. | 7

Potrebbero piacerti anche