Scribd
Upload
2 views

Css

The document provides an overview of HTML editors and CSS, detailing various HTML editors such as Atom and Visual Studio Code, and explaining the structure and syntax of CSS rules. It covers topics such as selectors, properties for colors and fonts, background properties, and the importance of cascading styles. Additionally, it discusses best practices for using CSS, including the use of inline styles, embedded styles, and linking external stylesheets.

Uploaded by

ahmedessameldin458
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Css

The document provides an overview of HTML editors and CSS, detailing various HTML editors such as Atom and Visual Studio Code, and explaining the structure and syntax of CSS rules. It covers topics such as selectors, properties for colors and fonts, background properties, and the importance of cascading styles. Additionally, it discusses best practices for using CSS, including the use of inline styles, embedded styles, and linking external stylesheets.

Uploaded by

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

Best HTML Editors

Whether you’re new to HTML or a seasoned


professional, a good HTML editor can help
you code faster thanks to its many helpful
features. For example, syntax highlighting
and other capabilities help you visually scan
over the code faster as well as reduce errors.
There are different types of software when it
comes to a text editor for HTML. These
include an HTML WYSIWYG editor and an
IDE.
 Atom

 Visual Studio Code

Notepad++

Komodo Edit

Froala

Dreamweaver

Vim

 Sublime Text 3

Brackets.io
Cascading Style Sheets (CSS)
3

Describes the appearance, layout, and


presentation of information on a web page
 HTML describes the content of the page
Describes how information is to be displayed,
not what is being displayed
Can be embedded in HTML document or
placed into separate .css file

CS380
Basic CSS rule syntax
4

selector {
property: value;
property: value;
...
property: value;
}
CSS
p {
font-family: sans-serif;
color: red;
}
CSS
 A CSS file consists of one or more rules
 Each rule starts with a selector
 A selector specifies an HTML element(s) and then applies style
properties to them
 a selector of * selects all elements
Attaching a CSS file <link>
5

<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML

<link href="style.css" type="text/css" rel="stylesheet" />


<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />

HTML
 A page can link to multiple style sheet files
 In case of a conflict (two sheets define a style for the

same HTML element), the latter sheet's properties


will be used

CS380
Embedding style sheets: <style>
6

<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>

HTML

 CSS code can be embedded within the head of an


HTML page
 Bad style and should be avoided when possible
(why?)
CS380
Inline styles: the style attribute
7

<p style="font-family: sans-serif; color: red;">


This is a paragraph</p>

HTML
This is a paragraph

output

 Higher precedence than embedded or linked styles


 Used for one-time overrides and styling a particular
element
 Bad style and should be avoided when possible (why?)

CS380
CSS properties for colors
8

p {
color: red;
background-color: yellow;
}

CSS
This paragraph uses the style above
output

property description
color color of the element's text
color that will appear behind
background-color
the element

CS380
Specifying colors
9

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
 RGB codes: red, green, and blue values from 0 (none) to 255 (full)
 hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Grouping styles
10

p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.

output
 A style can select multiple elements separated by
commas
 The individual elements can also have their own
stylesCS380
CSS comments /*…*/
11

/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (like HTML) is usually not commented as rigorously as


programming languages such as Java
 The // single-line comment style is NOT supported in CSS
 The <!-- ... --> HTML comment style is also NOT supported in
CSS

CS380
CSS properties for fonts
12

property description
font-family which font will be used
how large the letters will be
font-size
drawn
used to enable/disable italic
font-style
style
used to enable/disable bold
font-weight
style
mplete list of font properties (http://www.w3schools.com/css/css_reference.asp#

CS380
font-family
13

p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output
 Enclose multi-word font names in quotes

CS380
More about font-family
14

p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.

output
 We can specify multiple fonts from highest to lowest priority
 Generic font names:
 serif, sans-serif, cursive, fantasy, monospace
 If the first font is not found on the user's computer, the next is tried
 Placing a generic font name at the end of your font-family value, ensures that every
computer will use a valid font

CS380
font-size
15

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 units: pixels (px) vs. point (pt) vs. m-size (em)

16px, 16pt, 1.16em


 vague font sizes: xx-small , x-small , small , ,
medium large , x-large, xx-large, smaller, larger
 percentage font sizes, e.g.: 90%, 120%

CS380
font-size
16

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 pt specifies number of point, where a point is 1/72 of an inch
onscreen
 px specifies a number of pixels on the screen
 em specifies number of m-widths, where 1 em is equal to the
font's current size

CS380
font-weight, font-style
17

p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.

output
 Either of the above can be set to normal to turn
them off (e.g. headings)

CS380
CSS properties for text
18

property description
alignment of text within its
text-align
element
decorations such as
text-decoration
underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
mplete list of text properties (http://www.w3schools.com/css/css_reference.asp#

CS380
text-align
19

blockquote { text-align: justify; }


h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!

output
 text-align can be left, right, center, or
justify

CS380
text-decoration
20

p {
text-decoration: underline;
}
CSS
This paragraph uses the style above.

output
 can also be overline, line-through, blink, or
none
 effects can be combined:
text-decoration: overline underline;

CS380
The list-style-type property
21

ol { list-style-type: lower-roman; }

 Possible values: CSS


i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero : 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…

CS380
Body styles
22

body {
font-size: 16px;
}

CSS

 Applies a style to the entire body of your page


 Saves you from manually applying a style to each
element

CS380
Cascading Style Sheets
23

Properties of an element cascade together in


this order:
 browser's default styles
 external style sheet files (in a <link> tag)
 internal style sheets (inside a <style> tag in the
page's header)
 inline style (the style attribute of the HTML element)

CS380
Inheriting styles
24

body { font-family: sans-serif; background-color:


yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }

CSS
This is a heading
A styled paragraph. Previous slides are available on the website.

• A bulleted list
output
 when multiple styles apply to an element, they are
inherited
 a more tightly matching rule can override a more
general inherited rule
CS380
Styles that conflict
25

p, h1, h2 { color: blue; font-style: italic; }


h2 { color: red; background-color: yellow; }

CSS
This paragraph uses the first style above.
This heading uses both styles above.
output

 when two styles set conflicting values for the


same property, the latter style takes precedence

CS380
W3C CSS Validator
26

<p>
<a
href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS

output

 jigsaw.w3.org/css-validator/
 checks your CSS to make sure it meets the
official CSS specifications

CS380
CSS properties for backgrounds
27

property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image
background-repeat
should be repeated
whether bg image scrolls
background-attachment
with page
shorthand to set all
background
background properties

CS380
background-image
28

body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's


content area

CS380
background-repeat
29

body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-


repeat

CS380
background-position
30

body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 value consists of two tokens, each of which can be top,


left, right, bottom, center, a percentage, or a length
value in px, pt, etc.
 value can be negative to shift left/up by a given amount

CS380
 <html>
HTML <div> T <head>
ag <style>
.myDiv {
border: 5px outset red;
The <div> tag background-color: lightblue;
defines a text-align: center;
division or a }
section in an </style>
HTML </head>
document. It is <body>
used as a
<div class="myDiv">
container for <h2>This is a heading in a div
HTML element</h2>
elements - <p>Welcome to my first web site.</p>
which is then </div>
styled with
CSS or </body>
manipulated </html>
with
JavaScript.
Create A
Password <form>
Validation <label for="usrname">Username</
Form label>
<input type="text" id="usrname" name
We use the
pattern attribute ="usrname" required>
(with a regular
expression) <label for="psw">Password</label>
inside the
< input
password field to
set a restriction type="password" id="psw" name="psw" p
for submitting attern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).
the form: {8,}" title="Must contain at least one
it must contain 8 number and one uppercase and lowercase
or more letter, and at least 8 or more
characters that characters" required>
are of at least one
number, and one
uppercase and <input type="submit" value="Submit">
lowercase letter. </form>
CSS Selectors

CSS selectors are used to "find" (or select) the


HTML elements you want to style.
Simple selectors (select elements based on
name, id, class)
The CSS element Selector
The element selector selects HTML elements
based on the element name.
p {
text-align: center;
color: red;
}
The CSS id #para1 {
Selector text-align: center;
color: red;
The id selector }
uses the id
attribute of an
HTML element
to select a
specific
Note: An id name cannot
element start with a number!
write a hash
(#) character,
followed by the
id of the
element.
The CSS class .center {
Selector text-align: center;
color: red;
The class }
selector selects
HTML elements
with a specific
class attribute.
To select
elements with a
specific class,
write a period (.)
character,
followed by the
class name
The CSS
Universal * {
Selector text-align: center;
color: blue;
The universal }
selector (*) selects
all HTML elements
on the page.
The CSS
Grouping
Selector
h1, h2, p {
selects all the
HTML elements text-align: center;
with the same color: red;
style definitions
}
CSS Margins

The CSS margin properties are used to create


space around elements, outside of any
defined borders.

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
CSS Padding

The CSS padding properties are used to


generate space around an element's content,
inside of any defined borders.

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

You might also like