Module #3: Principles of Design (CSS) Flashcards
What is CSS?
In general, it is for formatting content in an HTML Page
Stands for: Cascading Style Sheets
Allows applying the same format to various elements in a web page
Can be created: as an external file, referenced in the HMTL page or
Can be created: as a section in the HTML page
Write the basic CSS Syntax
Selector {property:value; property:value; …property:value}
Example:
P {color:black; font-size:10px;}
What is a Selector? Name the 3 types seen in class
A selector allows choosing the specific element of interest that needs styling.
Types: Element, ID, Class
Element selector
selecting based on element name:
p { text-align: center;color: red;}
rule applied to all < p>< /p> tags
Id selector. Give what it is used for.
selecting based on the id of the element. Id is a unique identifier, therefore, each specific id can only be assigned to one element in an HMTL page.
# para1 {text-align: center;color: red;}rule applied to the HTML element with id=“para1”
Class selector
selecting based on the class of the element
.center { text-align: center;color: red;}rule applied to the HTML elements with class=“center”
How to write a comment in css
/* This is a single-line comment /
/ This isa multi-linecomment */
Not to be confused with HTML comments:
<!-- These paragraphs will be red -->
External CSS. What is it?
Each HTML page must include a reference to the external style sheet file inside the < link> element, inside the head section.
ex:
<!DOCTYPE html>
< html>
< head>
< link rel=”stylesheet” href=”mystyle.css”>
< /head>
< body>
< h1>This is a heading</ h1>
< p>This is a paragraph.< /p>
< /body>
< /html>
Internal CSS. What is it?
The internal style is defined inside the < style> element, inside the head section.
<!DOCTYPE html>< html>< head>< style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} < /style>< /head>< body>< h1>This is a heading< /h1>< p>This is a paragraph.< / p>< /body>< /html>
Inline CSS.
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
<!DOCTYPE html><html><body><h1 style="color:blue;text-align:center;">This is a heading</h1><p style="color:red;">This is a paragraph.</p></body></html>
How do you creat layouts
Using <div> elements is the most common way of creating layouts.
Name some propreties:
background-color
background-image
color (text color)
border (there is a big list on slide 12 session 15) –> you have border: style, color, width
margin-top/bottom/right/left
Padding-top/bottom/right/left
How do you set value of height and width?
height:value; width:value;
Values that can be used:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
