css (cascading style sheets): an overview · 1 css (cascading style sheets): an overview css...

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:


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.


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>


ol {font-weight: bold;}

</style>

</head>

Font Style Sets the font style of the text.

Syntax: font-style: italic;


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

td{border: 2px dashed red; sets the table cell borders (table data/cell)

height:50px;}

Multiple Element Styles

To apply the same style to more than one element (header, paragraph, etc.)

h1, p {color: red;}

8

Span

To apply a style to part of a tag element and not the entire tag. For example, we want to apply

bold to just one word in a paragraph tag.

Surround the part with the span tags: <span> </span>

In HTML code:

Add <span> before each heading in the paragraph about bald eagles.

<span>DIET</span>

<span>POPULATION</span>

<span>RANGE</span>

<span>BEHAVIOR</span>

<span>REPRODUCTION</span>

<span>Did You Know?</span>

In the CSS code enter:

span {font-weight: bold;

color: green;}

We can take much of the styling – such as controlling font family, font color, and text

alignment – and put it in its own separate file. By doing that, we can use tags like <div>

and <span> to impart style to our pages without writing style="color:green" every

single time!

Unordered List Styles

To set various unordered list properties.

ul{list-style-type: square;} changes bullet to a square (circle, etc.)

ul{list-style-image:url(check.png);} changes bullet to an image

ul(border: 1px solid red;} adds a border to the list

ul{list-style-type: none;} removes bullets from list

ul{padding:6px;} moves list without bullets to the left

HTML Elements

Division

One of the most versatile structure tags available to you is the <div></div> tag. Short

for "division," <div> allows you to divide your page into containers (that is, different

9

pieces). <div>s will allow you to create visual HTML objects like sidebars, menus,

buttons and more.

There are three properties you'll need to set values for:

1. background-color, which you set to a color or hex value

2. height, which you set to a value in pixels

3. width, which is also measured in pixels

Surround the element in your HTML code with the tags: <div> </div>

HTML code: <div>This is the next section of my web page. </div>

CSS code: div {

background-color: #cc0000;

height: 100px;

width: 100px;}

border: 2px solid red;

position: absolute;}

Link

You can make <div>s clickable by wrapping them in <a></a> tags.

<a href="website address"><div></div></a>

<a href="http://www.codecademy.com"><div style="width: 50px; height: 50px;

background-color: yellow"></div></a>

Buttons Create buttons with <div></div> tags.

In the CSS code, add a div selector and add property: value pairs of:

1. height: 50px

2. width: 120px

3. border-color: #6495ED

4. background-color: #BCD2EE.

Your border-style can be any type (dashed, solid, and so on) and you can use any border-

width you want. (We like 2px.)

10

Shape This involves a new property called border-radius. This property modifies the

corners of HTML objects; it's how you get those cool rounded buttons!

Set your div's border-radius to 5px.

div {

height: 50px;

width: 120px;

border: 2px solid #6495ED;

border-radius: 5px;

background-color: #BCD2EE;}

Position

1. margin: auto; is the CSS you use to tell the browser: "Hey! Make sure to set

equal margins on each side of this HTML element." When the margins are equal,

the object is centered.

2. text-align: center; is how you center text elements.

Link

Use <span></span> tags to create a different font color for "button text": <a href="https://facebook.com">Friend us on

<span>Facebook!</span></a>

HTML Code <!DOCTYPE html>

<html>

<head>

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

<title>About Me</title>

</head>

<body>

<img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>

<p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>

<div>

<a href="https://facebook.com">Friend us on

<span>Facebook!</span></a>

</div>

</body>

</html>

11

CSS Code

div {

height: 50px;

width: 120px;

border: 2px solid #6495ED;

border-radius: 5px;

background-color: #BCD2EE;

margin: auto;

text-align: center;}

span {

color: green;}

a {

color: #cc0000;

font-family: Comic Sans MS;

text-decoration: none;}

Forms Used to input data on a web page.

Username, upload image, drop-down list, radio-button, selecting options, etc.

Attributes:

Type – the kind of element in the form (textbox).

Name – what is it used for. Identifies it from other elements.

Size – the width of the element as it appears on the web page. For a textbox they can still

enter in any number of character not matter the size of the textbox.

Maxlength – the maximum number of character that can be entered into a textbox.

Value – the text that will populate the textbox by default.

Start code with the text that will be seen on the web page (Username, Male, Cheese,)

Textbox Allows user to enter text in a box.

HTML code:

<body>

<form> First and Last Name: <input type= "text" name="username"

size:"12" maxlength= "16" value="Enter Name Here"/>

</form>

</body>

12

Radio Button Allows user to select only one option.

<body>

<form>

Male: <input type="radio" name="sex" value="male" />

Female: <input type="radio" name="sex" value="female" />

</form> </body>

Check Box Allows user to select one or more options.

<body>

<form>

<p>Select the pizza you would like to order!</p>

Cheese <input type="checkbox" name="pizza"

value="cheese" />

Pepperoni <input type="checkbox" name="pizza"

value="pepperoni" />

Sausage <input type="checkbox" name="pizza"

value="sausage" />

Chicken <input type="checkbox" name="pizza"

value="chicken" />

</form> </body>

Drop-down Lists Allows user to select from a list of several options.

The options are enclosed in the <select> tags and between the <option> tags.

The drop-down list box will by default be the width of the widest option.

<form> <p>What do you want to do today?</p>

<select name="activities">

<option value="play">play the guitar</option>

<option value="read">read a book</option>

<option value="drive">go for a drive in the country</option>

<option value="movie">go to a movie</option>

<option value="eat">go out to eat</option>

</select>

</form>

Text Areas A larger text field than just a single line of text (for feedback, etc.).

13

Attributes:

Rows – determines the height of the text field.

Cols – (columns) determines the width of the text field.

<form>

<p> Explain what you need help with: </p>

<textarea name="help" rows="8" cols="40" />

</textarea>

</form>

Upload Button

Used to upload a file.

If you need to have multiple files uploaded, you have to put in multiple buttons.

<form>

<p>Submit a file!</p>

<input type="file" name="homework" />

</form>

Password

Action – the filename where the data will be stored (usually a database).

Method – how the browser sends the data to the action (file).

1. Get

2. Post

<form action="login" method="post"/>

Username: <input type="text" name="username" />

Password: <input type="password" name="pword />

</form>

Submit Form Button Creates a button to click to submit forms to the file that stores the information.

Attributes:

<form action="login" method="post"/>

Username: <input type="text" name="username" />

Password: <input type="password" name="pword" />

<br />

<input type="submit" value="Submit!">

</form>

14

Bootstrap Bootstrap is a collection of prewritten CSS rules used to build web pages faster. Bootstrap

provides styles out of the box for several common components on a web page, such as grid

layouts, navigation, showcases, and much more.

To use Bootstrap in a web page, you need to link to it from index.html.

In index.html inside the head element, link to "http://s3.amazonaws.com/codecademy-

content/courses/ltp/css/bootstrap.css" before you link to main.css.

<head>

<link rel="stylesheet"

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script

src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script

>

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

</head>

Rounded corner image

<body>

<div class=”container”>

<img src=”Lighthouse.jpg” class=”img-rounded” width=”200”

height=”200”>

<br/>

<br/>

Circle image

<img src=”Desert.jpg” class=”img-circle” width=”200”

height=”200”>

</div>

<br/>

<br/>

</body>

Create a separate CSS file:

File | New

File | Save As

main.css

Code:

http://getbootstrap.com/

http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css

http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css

15

.nav a {display: inline;}

Navigation menus The navigation menus are made up of two ul elements. In each ul, the li elements display on

new lines because they are block elements.

To style the li elements so that they display on the same line use the display property.

Tabs

Tabs are a common navigation technique that give links to different parts of a site.

Bootstrap makes it easy to create tabbed navigation.

Regular ul element. To do so, make the class equal nav nav-tabs.

<ul class="nav nav-tabs">

<li><a href="#">Primary</a></li>

<li class="active"><a href="#">Social</a></li>

<li><a href="#">Promotions</a></li>

<li><a href="#">Updates</a></li>

</ul>

The open tab is specified by the class active. Change which tab is open by moving class="active"

<ul class="nav nav-tabs">

<li><a href="#">Primary</a></li>

<li class="active”><a href="#">Social</a></li>

<li><a href="#">Promotions</a></li>

<li><a href="#">Updates</a></li>

</ul>

<body>

<div class="nav">

<div class="container">

<ul class="nav nav-tabs"> or <ul class=”nav nav-pills”>

<li class="active"><a href="second.html" title="Go to Page 2">Page

2</a></li>

<li><a href="login.html" title="Go to Log In Page">Log In</a></li>

16

<li><a href="feedback.html" title="Go to Feedback

Page">Feedback</a></li>

<li><a href="help.html" title="Go to Help Page">Help</a></li>

<li><a href="mailto:[email protected]" title="Email Mr.

Wilhelmi">Contact</a></li>

</ul>

</body>

Pills

Pills are a set of buttons that give links to different parts of a site. Change the tab navigation to

pill navigation, replace the class nav-tabs with nav-pills. Make the class equal nav nav-

pills.

<body>

<div class="nav">


<ul class="nav nav-pills">

<li class="active"><a href="second.html" title="Go to Page 2">Page

2</a></li>

<li><a href="login.html" title="Go to Log In Page">Log In</a></li>

<li><a href="feedback.html" title="Go to Feedback

Page">Feedback</a></li>

<li><a href="help.html" title="Go to Help Page">Help</a></li>

<li><a href="mailto:[email protected]" title="Email Mr.

Wilhelmi">Contact</a></li>

</ul>

</body>

Dropdown Menu in Navbar

 right after above code

<li class=”dropdown”> before </ul> tag

<a href=”#” class=”dropdown-toggle” data-

toggle=”dropdown”>My Profile <span

class=”caret”></span></a> caret – down arrow

<ul class=”dropdown-menu”>

<li><a href=”popUpWindow” data-toggle=”modal”

data-target=”#popUpWindow”>Login</a></li>

17


data-target=”#popUpWindow2”>Logout</a></li>


data-target=”#popUpWindow3”>Settings</a></li>

</ul>

</li>

</ul>

</body>

Login Modal Modal or dialog – a pop-up window.

right after drop-down menu code


<div class="modal fade" id="popUpWindow">

<div class="modal-dialog">

<div class="modal-content">



<div class="modal-header">

<button type="button" class="close" data-

dismiss="modal">×</button>

<h3 class="modal-title">Log In</h3>

</div>



<div class="modal-body">

<form role="form">

<div class="form-group">

<input type="email" class="form-control"

placeholder="Email">

</div>


<input type="password" class="form-control"

placeholder="Password">

</div>

</form>

</div>



<div class="modal-footer">

<button class="btn btn-primary btn-block">Log In</button>

</div>

18

</div>

</div>

</div>

</div>




<div class="modal fade" id="popUpWindow2">






<h3 class="modal-title">Log Out</h3>

</div>


<button class="btn btn-primary btn-block">Log

Out</button>

</div>

</div>

</div>

</div>

</div>




<div class="modal fade" id="popUpWindow3">






<h3 class="modal-title">Settings</h3>

</div>

<div class="modal-body">

<form role="form">


<input type="username" class="form-control"

placeholder="New Username">

</div>

19

<input type="password" class="form-control"

placeholder="New Password">

</div>


<input type="email" class="form-control" placeholder="New

Email">

</div>

</form>

</div>


<button class="btn btn-primary btn-

block">Save</button>

</div>

</div>

</div>

</div>

</div>

External Style Sheet

Allows you to style elements with the same styles throughout all of your web pages.

Your HTML file can see the CSS information by putting a <link> tag between the

<head>...</head> tags of your HTML page. Your <link> tag needs three attributes:

1. A type attribute that should always be equal to "text/css"

2. A rel attribute that should always be equal to "stylesheet"

3. A href attribute that should point to the web address of your CSS file

<link type="text/css" rel="stylesheet" href="CSS file address"/>

Self-closing tags

Because nothing ever goes between <link></link> tags, it's okay to use a single set of

<>s to be the opening and closing tags. < />

<!DOCTYPE html>

<html>

<head>

<link type="text/css" rel="stylesheet" href="Style Sheet.css"/> </head>

</html>

20

Paste <link type="text/css" rel="stylesheet" href="Style Sheet.css"/> into

the HTML code of each webpage between the <head> tags.

Create a New Page

File | New

Save As: Style Sheet.css (to the same folder as the html files).

Enter the CSS Code

h1 {color: green;}

p {font-family: Tahoma;

Color: purple;

Font-size: 20 px;}

a {color: orange;}

Overriding Styles When you want to override External Style Sheet because you want one web page to be different

from all of the others.

Use the <style>...</style> tags of your HTML code on the web page that you want

to have the different styles for. Put the style change(s) you want to make.

<style type=”text/css”>

h1 {color: blue;}

</style>

The CSS properties display, position, and float can be used to control where an element sits on

the page.

css (cascading style sheets): an overview · 1 css (cascading style sheets): an overview css...

Documents