CSS also have their own properties.
Properties
Background Image Properties
•background-image:url(../location/of/image.jpg)
•background-repeat: tile image in background
•background-position:vertical(top, center, bottom,
or size) horizontal(left, center, right, or size)
•background-attachment: (scrollor fixed)
Font Properties
• font-family: times, arial, serif, sans-serif,
monospace;
•font-style: italic;
•font-weight: (bold, bolder, lighter, or 100 –900;)
•font-size: size;
…or shorthand
•font: style weight sizefamily;
Text Properties
• text-indent:indents first line of a paragraph
according to size
• text-align:right;or left;or center;or justify;
• text-decoration: none; orunderline;
• text-transform:Capitalize;
• line-height:added vertical space to each line of
text according to size
Border Properties
• border-width:(thin, medium, thick, or size)
• border-style:(none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, or outset)
• border-color:color
…or shorthand
• border(-top, -right, -left, -bottom):width style
color
Saturday, October 12, 2013
Selecting Selectors
There are four kinds of selectors in CSS:
Selectors
Element Selectors: selects allelements of a
specific type/tag (<body>, <h1>, <p>, etc.)
Example:
h3
{
color: #009e54;
font-weight: bold;
}
Class Selectors: selects all elements that belong
to a given class.
Example:
class=“myClass”
.myClass
{
color: #009e54;
font-weight: bold;
}
ID Selectors: selects a single element that’s been
given a unique id.
Example:
id=“mainPage”
#mainPage
{
color: #009e54;
font-weight: bold;
background-color: #4285f4;
}
Pseudo Selectors: combines a selector with a
user activated state(:hover, :visited)
Example:
a:hover
{
color: #009e54;
font-weight: bold;
}
By the way, you can also group your selectors, just like this:
Group Selectors:
h1, .myClass, #mainPage
{
font-size: 20pt;
}
Putting the CSS
Now, my dear reader, there are 3 ways of implementing a CSS:
3 Implementations
1) In-line – as attribute
ex: <span style=“color: #00ff00”>Text</span>
2) Embedded/Internal – as style tag
ex: <style type=“text/css>
body
{
color: #00ff00
}
</style>3 Implementations
3) External – linked from css file
ex:
<head>
<link rel="stylesheet" type="text/css" href=“myCSS.css">
</head>
3 Implementations
1) In-line – as attribute
ex: <span style=“color: #00ff00”>Text</span>
2) Embedded/Internal – as style tag
ex: <style type=“text/css>
body
{
color: #00ff00
}
</style>3 Implementations
3) External – linked from css file
ex:
<head>
<link rel="stylesheet" type="text/css" href=“myCSS.css">
</head>
Why This?
Others may ask why change their way of embedding elements. Well then, here's why:
Why CSS?
• Allows for much richer document appearances
• Reduce workload by centralizing commands for
visual appearance instead of scattered
throughout the HTML doc.
• Use same style on multiple pages.
• Reduce page size
• Use HTML for content; CSS for Presentation
Why CSS?
• Allows for much richer document appearances
• Reduce workload by centralizing commands for
visual appearance instead of scattered
throughout the HTML doc.
• Use same style on multiple pages.
• Reduce page size
• Use HTML for content; CSS for Presentation
Another Way of Style?
Some may ask if there is a way to incorporate all elements into one unique element. There is, and that my friend is called CSS.
What is CSS?
Cascading: Multiple styles can overlap in order to
specify a range of style from a whole web site
down to a unique element. Which style gets
applied pertains to the rules of CSS cascading
logic.
Style: CSS deals specifically with the presentation
domain of designing a web page (color, font,
layout, etc).
Sheet: Normally, CSS is a file separatefrom the
HTML file –linked to the HTML file through its
<head> (exceptions apply)
What is CSS?
Cascading: Multiple styles can overlap in order to
specify a range of style from a whole web site
down to a unique element. Which style gets
applied pertains to the rules of CSS cascading
logic.
Style: CSS deals specifically with the presentation
domain of designing a web page (color, font,
layout, etc).
Sheet: Normally, CSS is a file separatefrom the
HTML file –linked to the HTML file through its
<head> (exceptions apply)
Linking
Next will be the hyperlinks which I had mentioned before:
HTML Hyperlinks (Links)
<a> tag defines a hyperlink
hyperlink (or link) is a word, group of words,
or image that you can click on to jump to
another document
href attribute indicates the link’s destination
<a href="url">Link text</a>
Example:
<a href="http://www.w3schools.com/">Visit
W3Schools</a>
HTML Hyperlinks (Links)
<a> tag defines a hyperlink
hyperlink (or link) is a word, group of words,
or image that you can click on to jump to
another document
href attribute indicates the link’s destination
<a href="url">Link text</a>
Example:
<a href="http://www.w3schools.com/">Visit
W3Schools</a>
Sitting Around the Table
This isn't the kind of table I was talking about.
What I meant were data tables. But you could put hyperlinks(you'll know how to do that later) or images of a table (or any image for that matter) into the table.
HTML Table
Tables are defined with the <table> tag
A table is divided into rows
(with the <tr> tag)
each row is divided into data cells
(with the <td> tag)
<td> tag can contain text, links, images, lists,
forms, other tables, etc
Header information in a table are defined
with the <th> tag
Time for Graphics
Through with formatting, let's add a little graphics to your page, shall we?
Let's begin with images
HTML Image
The <img> Tag and the Src Attribute
images are defined with the <img> tag
<img> tag is empty, which means that it
contains attributes only, and has no closing
tag
Src stands for "source“ which contains the
URL of the image you want to display
<img src="url" alt="some_text">
Examples:
<img src="boat.gif" alt="Big Boat">
<img src=“mountain.jpg" alt="Pulpit rock"
width="304" height="228">
Let's begin with images
Just a little vanity there >_<
Moving on...
HTML Image
The <img> Tag and the Src Attribute
images are defined with the <img> tag
<img> tag is empty, which means that it
contains attributes only, and has no closing
tag
Src stands for "source“ which contains the
URL of the image you want to display
<img src="url" alt="some_text">
Examples:
<img src="boat.gif" alt="Big Boat">
<img src=“mountain.jpg" alt="Pulpit rock"
width="304" height="228">
Specific On The Colors
HTML Colors
•Color Names
•Hexadecimal Value color: #FF00FF
DECIMAL - HEXADECIMAL
0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F
Examples:
#FF0000 - With this HTML code we tell browser to
show maximum of red and no green and no blue.
The result is of course pure red color
#00FF00 - This HTML code shows just green and
no red and blue.
#0000FF - This HTML code shows just blue and no
red and green.
#FFFF00 - Combination of red and green color
gives us yellow
#CCEEFF - Take some red a bit more of green and
maximum of blue to get color of sky
More on Formatting
Let's do fonts and colors!
HTML FONTS AND COLORS
Tag Description
<font> specifies the font face, font size, and font color of text
not supported in HTML5. Use CSS instead
<font> element is deprecated in HTML 4.01
<div> defines a division or a section in an HTML document
used to group block-elements to format them with
CSS
<span> used to group inline-elements in a document
Formatting Your HTML
The next step is to format your HTML. For now, we'll take on the texts of your webpage. Here's how:
HTML Text Formatting
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML Text Formatting
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Oh yeah, I almost forgot- to make an HTML without the 0s and 1s, we use Notepad.
Not like the writing notepad but the software in Windows.
Now that that's settled, let's move on:
The next thing you should know is that there are some things that affect the HTML's outcome and here they are:
HTML Elements
"HTML tags" and "HTML elements" are often used
to describe the same thing.
But strictly speaking, an HTML element is
everything between the start tag and the end tag,
including the tags:
HTML Element:
<p>This is an element</p>
HTML Attributes
HTML elements can have attributes
Attributes provide additional
information about an element
Attributes are always specified in the start
tag
Attributes come in name/value pairs
like: name="value"
Not like the writing notepad but the software in Windows.
Now that that's settled, let's move on:
The next thing you should know is that there are some things that affect the HTML's outcome and here they are:
HTML Elements
"HTML tags" and "HTML elements" are often used
to describe the same thing.
But strictly speaking, an HTML element is
everything between the start tag and the end tag,
including the tags:
HTML Element:
<p>This is an element</p>
HTML Attributes
HTML elements can have attributes
Attributes provide additional
information about an element
Attributes are always specified in the start
tag
Attributes come in name/value pairs
like: name="value"
In my last post, I made mention of something called HTML tags. So your next question may be:
What is an HTML tag?
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
HTML tags normally come in pairs like <b> and
</b>
The first tag in a pair is the start tag, the second
tag is the end tag
The end tag is written like the start tag, with a
forward slash before the tag name
Start and end tags are also called opening tags
and closing tags
What is an HTML tag?
No, not like those tags.
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
HTML tags normally come in pairs like <b> and
</b>
The first tag in a pair is the start tag, the second
tag is the end tag
The end tag is written like the start tag, with a
forward slash before the tag name
Start and end tags are also called opening tags
and closing tags
HTML?
Have you ever wondered how to make your own html? Well, it's fairly simple actually. But before we discuss how to make an HTML, an FYI: an HTML is a webpage.
Yup, just like this one.
So, let's first ask ourselves:
What is this HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain
text
Subscribe to:
Posts (Atom)