1 CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how different elements, such as headers and links, appear on a Web page. These style sheets can then be applied to any Web page. Style Sheet is a file that describes how an HTML file should look. These style sheets are cascading because multiple style sheets can be applied to the same Web page. Syntax The spelling and grammar rules of a programming language. Each program defines its own syntactical rules that control which words the computer understands, which combinations of words are meaningful, and what punctuation is necessary to be a correctly structured document. CSS Syntax (rules) CSS syntax is different from the HTML syntax you're used to. The general format looks like this: selector { property: value; } <style selector (element to be changed) {property (what’s being changed): value (what property is being changed to);} A selector specifies which HTML elements to style. A selector can be any HTML element, such as <p>, <img>, or <table>. You just take off the <>s tags! Inside the braces { }, a property and its value define what aspect of the elements to style. A property is an aspect of a selector. For instance, you can change the font-family, color, and font-size of the text on your web pages (in addition to many more). A value is a possible setting for a property. Color can be red, blue, black, or almost any color; font-family can be several different fonts; and so on. You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next. h1 { color: red;}
20
Embed
CSS (Cascading Style Sheets): An Overview · 1 CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
CSS (Cascading Style Sheets): An Overview
CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of
your HTML. It allows designers and users to create style sheets that define how different
elements, such as headers and links, appear on a Web page. These style sheets can then be
applied to any Web page.
Style Sheet is a file that describes how an HTML file should look.
These style sheets are cascading because multiple style sheets can be applied to the same
Web page.
Syntax The spelling and grammar rules of a programming language. Each program defines its
own syntactical rules that control which words the computer understands, which
combinations of words are meaningful, and what punctuation is necessary to be a
correctly structured document.
CSS Syntax (rules) CSS syntax is different from the HTML syntax you're used to. The general format looks
like this: selector {
property: value;
}
<style selector (element to be changed) {property (what’s being changed):
value (what property is being changed to);}
A selector specifies which HTML elements to style. A selector can be any
HTML element, such as <p>, <img>, or <table>. You just take off the <>s tags!
Inside the braces { }, a property and its value define what aspect of the elements
to style. A property is an aspect of a selector. For instance, you can change the
font-family, color, and font-size of the text on your web pages (in addition
to many more).
A value is a possible setting for a property. Color can be red, blue, black, or
almost any color; font-family can be several different fonts; and so on.
You need to end each property-value with a semi-colon (;). That's how CSS
knows you're done with one pair and ready for the next.
h1 {
color: red;}
2
There are two main reasons for separating your form/formatting (CSS) from your functional
content/structure (HTML):
1. You can apply the same formatting to several HTML elements without rewriting code
(e.g. style="color: red") over and over
2. You can apply similar appearance and formatting to several HTML pages from a single
CSS file.
p {
font-size: 100px;}
span {
font-family: cursive;}
Put your CSS code between <style></style> tags, right in the same file as your HTML or as a
separate CSS file. These <style> tags go inside the <head></head> of your webpage:
<!doctype html>
<html>
<head>
<title> Home Page </title>
<style type="text/css"> tells web browser you are using CSS
</style> code
</head>
Another cool advantage of CSS is that you can set many properties for one selector.
<head>
<title> My Second Page </title>
<style type="text/css">
img {max-height: 200px;
max-width: 200px;}
</style>
</head>
3
It’s important to remember to put a semicolon (;) at the end of each line. The semicolon
tells CSS that one property-value pair is over and it's time to move on to the next one.
Don’t forget:
all property-value pairs for a selector are surrounded by curly braces ({}).
end each property-value pair with a semicolon!
Comments It’s also a good idea to write comments as you go along. Good comments will help
remind you why you did something a certain way (or will help someone else out if they're
reading your code without you there to explain it).
CSS comments look like this (works only for a separate CSS file):
/*I'm a comment!*/
img {max-height: 200px;
max-width: 200px;} /*sizes pictures in table*/
Remember: the computer doesn't look at comments when figuring out what your HTML
and CSS should do, but writing good comments is a good habit you want to pick up!
Max Width and Height Specifies the size of an element, especially used for images. (Photos of products on web page)
The images must be in the same folder as your html files are located (index.html, etc.).
HTML code:
<body>
<img src="lighthouse.jpg" />
<img src="penguins.jpg" />
<img src="koala.jpg" />
<img src="desert.jpg" />
</body>
CSS code:
<style type="text/css">
img {max-height: 200px; resizes all pictures in the table
max-width: 200px;} </style>
There is also min width and min height, but they are not used very much.
4
Line Spacing Line spacing puts space between the lines.
Element is line-height and a percentage.
<style type="text/css">
p {color: #0F0FF5;
line-height: 150%;}
</style>
Paragraph Indent Indents the paragraph. Syntax is text-indent: amount of pixels;
p {color:#0F0FF5;
line-height: 150%;
text-indent: 50px;}
Font Weight Determines the boldness of text.
Syntax: font-weight: bold;
<head>
<title> My First Webpage </title>
<style type="text/css">
ol {font-weight: bold;}
</style>
</head>
Font Style Sets the font style of the text.
Syntax: font-style: italic;
<style type="text/css">
ol {font-weight: bold;
font-style: italic;}
</style>
5
Text Align Aligns text either right, center, left, or justified. Syntax is text-align: alignment;
h1{text-align: center;}
Text Color Sets the color of the text. Syntax is color: color;
body { color: green} all text in body of Webpage will be the color green
Hexadecimal Values CSS understands millions of colors in the form of hexadecimal values. Hexadecimal
counting is base-16. Each digit can be the numbers 0 through 9 or the letters a through
f! Hex values always start with a pound sign (#), are up to six "digits" long, and are case-
insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the
same color.
h1 {
color: #8a2be2;}
RGB Values Search Google for rgb values to get the values of the colors. RGB color system,
constructs all the colors from the combination of the Red, Green and Blue colors.
p {
color: #0F0FF5;}
Background Color Sets the color of the web page’s background. Syntax is background-color: color;
p {color:#0F0FF5;
background-color: grey;
line-height: 150%;
text-indent: 50px;}
6
Background Images Code needs to be in the body tags. Images need to be in the same folder as the Index.html file.
body {background-image: url(lighthouse.jpg);} sets the image as the
background of the webpage
Fonts
CSS has some built-in default fonts meant to ensure your users see what you intend.
They are: serif’ sans-serif, or cursive.
h3 {
font-family: cursive;}
h1 {
font-family: Times, serif;}
h2 {
font-family: Verdana, sans-serif;}
h3 {
font-family: Vivaldi, cursive;}
Element Width and Height Width
p { width: 350px;}
Height
p { height: 500px;}
Link Styles
Links are composed of what are called states. A State is when and how you press the link.
Links have the following four states:
1. When the page is first visited (a:link)
2. When the link has been clicked (a:visited)
3. As you mouse over the link (a:hover)
4. As you are clicking the link (a:active)
a:link – default state a = anchor
7
a:link { what it normally looks like on the webpage
color: black; text-decoration: none; } underline or none
a:visited { when it has been clicked
color: purple;}
a:hover { when you mouse over it
background-color: blue;
color: red; text-decoration: underline; underline or none
font-weight: bold;}
a:active { when you are clicking the link
background-color: orange;}
Text Decoration
Links have a lot of the same properties as regular text: you can change their font,
color, size, and so on. But links also have a property, text-decoration, that you
can change to give your links a little more custom flair. You're probably used to
seeing links that are blue and underlined, right? Well, that's not the way it has to
be! Either underline or none.
a {
color: #cc0000;
text-decoration: none;}
Table Styles
To set various table properties.
table{border: 3px solid blue;} sets the table border
tr{background-color: yellow;} sets the background color of the table cells