Mod 8 - Styling the Web Flashcards
What is the general syntax for styling?
style=”property1: value1; property2: value2”
How would I change the size of font?
Use the styling format.
- Use px (ex. <b>word</b>)
- Use % (ex. <i>word</i>)
What is the span tag?
Can be used to modify text appearing within other text & is designed for elements flowing horizontally, but will do nothing on its own (used to style web pages).
ex. This is <span>text in a span</span> in a sentence.
What is the div tag?
It is similar to <span> but is for a vertical region/block of a web page (and is more flexible than <p> b/c it can be nested & contain non-textual elements).</span>
ex. </p><div style="font-style: italic; margin-left: 30px;">This is text inside of a div.</div></span>
Why are classes used?
They are more convenient as you don’t have to use a ton of <span> tags & change them all individually, you can just style the classes to change it. </span>
How is a class defined (referenced)?
There is always a period (.) before the class name when being referenced. It is always followed by { }.
ex.
…
.important{
font-size: 125%; font-weight: bold; }
How do you name a class?
- For a small area of text use: span class=”important”>text /span>
- For large area of text (like a table) use: div class=”important”> ……. /div>
What is a CSS file?
Web developers often put all of their styling into a Cascading Style Sheet (CSS). The benefit of this is that multiple html files can use the same styling sheet to look consistent.
How do you use a CSS file?
.ClassA{
property1: value1;
property2: value2;
}
.ClassB{
property1: value1;
}How do you reference a CSS file in the HTML file?
link rel=”stylesheet” href=”filename.css”>
Use in header.
The link tag indicates that a separate file is being used. The href attribute specifies the file name. The rel attribute specifies that the file is a “style sheet”.
How do you specify attributes for tags?
Same as classes, just w/o the period.
ex.
h1{
font-size:200%;
}How do you specify attributes for id’s?
Same as classes, just with a hashtag instead.
ex.
#pagetop{
font-size:200%;
}Why is it called cascading?
Because it goes from the most general style to the most specific. If there are conflicting characteristics, the more specific one (specified in the tag) will be used.
What colours are used under the additive colour theory (computer colours)?
Red, green, blue (rgb). White is combo of all 3; black is absence of all 3. This method is time consuming, so often hex colours are used.
ex. <div style>This is white text on a black background</div>
How do hex colours work?
A hex code is given for rgb. It will either use a 3 or 6 digit code. 0=0% while F=100%
ex. black is: #000 or #000000; red is: #FF0000
