Scribd
Upload
52 views

CSS 3 Tutorial

CSS is used to define the style and layout of elements on a web page. Styles can be defined internally, within HTML tags, externally in a .css file linked via HTML, or inline with individual elements. CSS properties control text styles like color, alignment, and fonts, as well as element sizes, layout using width, height, margins and padding, borders, colors, and lists. Common text styles include font-family, size, weight, alignment, and decoration. Sizes are set using pixels, percentages or points for width, height, margins and padding. Colors style text, backgrounds and borders.

Uploaded by

MuhammadMahmoud
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views

CSS 3 Tutorial

CSS is used to define the style and layout of elements on a web page. Styles can be defined internally, within HTML tags, externally in a .css file linked via HTML, or inline with individual elements. CSS properties control text styles like color, alignment, and fonts, as well as element sizes, layout using width, height, margins and padding, borders, colors, and lists. Common text styles include font-family, size, weight, alignment, and decoration. Sizes are set using pixels, percentages or points for width, height, margins and padding. Colors style text, backgrounds and borders.

Uploaded by

MuhammadMahmoud
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS Cheat Sheet

What is CSS?
CSS is short for Cascading Style Sheets, and is the preferred way for setting the look and
feel of a website. The style sheets define the color, size and position of text and other
HTML tags, while the HTML files define the content and how it is organized.
Using Styles
1. An external CSS file

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>
2. Within the html header

<head>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
3. Inline in the HTML

<p style="color:red;">Some red text</p>


Text Styles
text-align: left;
text-decoration: underline;
font-family: fontname;
font-size: 16pt;
font-weight: bold;

Horizontal Alignment - left | center | right


Text Decorations - eg. none | underline | line-through
Font Face (Typeface) - eg. Verdana, Arial, Helvetica
Font Size or Height - eg. 12pt | 15px
Font Weight (Boldness) - eg. bold | normal | 200

Size and Layout


Width of HTML element - eg. 100px | 50%
Height of HTML element - eg. 20px | 100%
Margin - space around an element, or distance between
two elements
Top Margin. Also try -bottom: -left: or -right:
Padding - distance between an elements contents and its
border
Top Padding. Also try -bottom: -left: or -right:

width: 400px;
height: 100%;
margin: 5px;
margin-top: 1px;
padding: 5px;
padding-top: 1px;

Colours & Borders


color: red;
background-color: white;
background-image: url(image.g
if);
border-color: yellow;
border: 1px solid blue;

CSS Lists
list-style: none;

Element Colour - eg. red | #FF0000


Background Colour of element
Background Colour of element
Border Colour of element
Width, style and colour of border defined together

Clear existing bullet types set by html list tags

Collected by: Muhammad Mahmoud


Email: [email protected]

You might also like