10 terms

CSS: Cascading Style Sheets

Web Design and Programming
STUDY
PLAY
What is CSS and what makes it the best way to format for layout of a webpage?
CSS stands for Cascading Style Sheets.
- It is a simple styling language that allows styles to be attached to HTML elements.
- A collection of formatting rules that modify the behavior of HTML tags
- Can be applied to multiple documents
- Every element or occurance of an element can have an individual style
- Each rule has a selector (usually HTML element), and one or more declarations(Property/value pairs)
- selectors {property:value;}
<style>
p { color: white; background-color: blue; font-family: arial;}
</style>
What are the different ways to add a CSS to a website?
External, Embedded and Inline
What is an EXTERNAL CSS?
When a style sheet has many rules and is to be applied to many pages it is most common to save the style sheet as a separate file using a .css extension.
- CSS does not contain any HTML tags
- The reference call to the page is done by using the <link> tag inside the <head> section
In an external CSS what are the three required attributes for the <link> element?
1. The HREF attribute that is assigned to the Uniform Resource Locator (URL) of the style sheet.

2. The REL attribute that is assigned a value of "stylesheet" to specify that the reference file is a style sheet.

3. The TYPE attribute, which is assigned the same "text/css" value as the type attribute used in <style> element.

<link rel="stylesheet" href="css/screen.css"type="text/css">
In the above code the style sheet screen.css is located in a folder named css.
What is an EMBEDDED CSS?
Embedded style sheets are used when a single document has a unique style apart from the rest of the documents on the webpage.
- Embedded style sheets take priority over external style sheets
- Use the <style> tag in the head section inside a comment tag

<head>
<!--
<style type="text/css">
p{test-indent:10pt}
</style>
-->
</head>
What is an Inline CSS?
Inline style sheets are to be used sparingly. They loss many of the advantages of a style sheet by mixing content with presentation and by formatting individual elements one at a time.
- Style is applied to a specific element within the page and can contain any CSS property including ones previously declared, externally and embedded.
- Will override pervious settings
- In all cases, a selector can include more than one element name, separated by a comma.

<p style="color:sienna;margin-left:20px">This is a paragraph</p>
What are Class Selectors and how do you use them?
With a class selector you can define different styles for the same type of HTML element.
The Paragraph:
- You want two different types of paragraphs
-one right-aligned
-one left-aligned
Define it:
p.right{text-align:right} p.center{text-align:center}
Then call it in the HTML document:
<p class="right">This paragraph will be right aligned</p>
<p class="center">This paragraph will be centered</p>

-You can define a class that will aplly to all HTML elements on the page
- Omit the element name for the selector
center{text-align:center}
<h1 class="center">Header 1 Centered</h>
<p class="center"><b>This paragraph is centered</b> ... </p>
What is an ID Selector and How do you use them?
ID selectors can specify a style for a single, unique element
- only one ID of the same name per page
- Uses the ID attribute of the HTML element
- Defined by the # sign
- Cannot be named beginning with a number

#top {
background-color:#ccc; padding:20px
}
Why is colour so important when designing a website?
- Choosing the right colour is essential for communicating your message
- Colour interruption can vary depending on age, gender, culture, etc
What is good about CSS positioning?
- Allows you to position elements strategically and precisely on a page
- CSS will allow you to position an element with:
- Static: Default and rarely used but means where it would be normally without formatting
- Relative- like static but the box can be offset using top bottom left right
- Absolute: pulls the box out of the normal flow of HTML and delivers it to a world all of its own. The box can be placed anywhere on the page using top bottom left right
- Fixed: Always in the same "view" position in the browser scrolling or not
YOU MIGHT ALSO LIKE...