Module 8 Flashcards
CSS
stands for cascading style sheets
-used to seperate style from content of webpage
Style attribute
style=”color: green;”
ex: <cite></cite>
-can be applied to any tag
important to note that we didnt use a new tag, we just styled an existing tag
Style Sheets
the SS in CSS
.css file extension
add <link></link> into the html so that it is specified
-put this in the header section
<head>
<title>Hulkamania</title>
<link></link>
</head>
Style element
added to the head section of html
<head>
<title>Hulkamania</title>
<style>
cite { color: green; }
</style>-good approafch but not the best
-can easily change the coloir for example of cite for the whole doc cuz only need to change in one place since in the doc it would just be like <cite> sentence </cite>
</head>
Main benefit of css files
-can be used by multiple .html files
-also seperate the content from the style further so good
-also allows writer to focus on content while designer focuses on looks
CSS: Classes
can name a class anything
ie
.movie { color: green; }
.tvshow { color: red; }
.book { color: blue; }
in the css, needs a .
can also have multiple properties
ie
.movie{color:green; background-colour:blue;}
then in the html:
<cite> sentence </cite> and in the same sentence u can do <cite> the rest like this </cite>
-any tag can be given a class in html
dont just name something red-text. make it meaningful
Syntax of style and tagnames and all that stuff
Style Declaration:
Property and Colour
ie style=”property1: value 1;”
can have multiple declarations:
style=”property1: value 1;property2: value2;”
so style= “color:green; background-color:yellow;”
That all occurs in html
but for css:
use tagname
tagname {property1:value1; property2:value2:}
-place each property and value on different lines to make it neater
strong {
color: red;
font-size 200%;
}
SO these are existing tags that we are modifying not making new classes and giving them styles, this is like modifying <cite> not liek .movie… remember classes are added to tags,so this is modifying the tag itself, but we can modifying individual tags using classes (so that not every time the tag is used that style appears)</cite>
ex:
.moves{color:green;}
then in html it would be
<strong></strong>
can classes be applied to any tag
Yes!
unless in the css if it is written as
tagname.classname {property1:value1;property2:value2;}
ID and styling
-ID is attribute used for linking elements within the same html file
-unlike classes, dont have multiple tags using the same id
in css
-when styling it do
#idname {property1:value1;property2:value2…}
Shorthands
can combine multiple declarations (property value thing) into one sentence
instead of
.traditional {
border-width: 2px;
border-style: dashed;
border-color: blue;
}
you can do
.shorthanded {
border: 2px dashed blue;
}
there are specific syntax rules for extra values of each property
Properties
COLOUR
can be represented like sauing red or by the percentage of rgb
ie
color:rgb(100%,0%,0%);
or 24 bit color way
color:#FF0000;
or 12 bit color way
color:#F00
(this can specify over 4000 cokours)
Font properties:
1)font-family (name of font)
-tricky bc some devices display diffrent fonts, and legal reasons
-we use fallback fonts due to this
ie: font-family=”Times New Roman”, Times, serif;
means use times new roman, if not use times if not use serif
2)font-size
-percentage or pixel height
ie: font-size = “25%”; OR font-size=”22”;
or small or x-large
3)font-style
4)font-weight
Layout Properties:
Think of boxes: every element on html is enclosed in a box
layers of each box:
Margin: outermost
Border
Padding
Content
Properties to control style of each box
border-color
border-width
border-style
border-top, border-right, border-bottom, border-left
padding-top, padding-right, padding-bottom, padding-left
margin-top, margin-right, margin-bottom, margin-left
Links and Hover actions
can change the style for the different interactions a person may have with a hyperlink
a:link { color: #F2F; }
a:visited { color: #22F; }
a:active { color: #2F2; }
a:hover { color: #F22; font-size: 125%; font-weight: bold}
in the html when we use <a, it wil use all of these then.
different things that will happen when the mouse does certain things for the links
Not as popualr anymore since mobile devices cant tell when u hover
Flow (span and div)
<span></span>
-no visual effect on its own
-purpose is to allow u to apply any style elements u want using classes in the span element
-use this whenever a tag is not appropriate (ie we dont want to just use something like <cite> just so that we can style it, so we use span since it has no effect
-this is for INLINE of text, and flow HORIZONTALLY, meaning it can also wrap around to the following line,
-horizontally flowing things are not just text</cite>
<div>
-opposite of <span> sicne this is VERTICAL
-similar to the role of <p>, except u can nest a <div> in another <div>
-can contain images and tables (non-textual items)
-do not wrap around
-do not appear INLINE
-essentially just describes a vertical region or block of page
</div></div></p></span></div>
Cascading Behaviour
The general rule for CSS is: When there are conflicting styles, choose the style from the most specific element.
ie
body {color: black;}
p {color: blue;}
the body tag has style that says black but the specific paragraph says red, it will choose red for the word since <p>since</p> that is the more element has a more specific style/ is more specific, if <em> is withinthe p too, em will use for emphasis but no style is attached to it so it uses style of p</em>
This is known as INHERITENCE, part of cascading behaviour
THEREFORE: if something does not have a specific style property, it will INHERIT the style from its parent
ie
em is the kid
<p> is parent
<body> is grandparent
in this example
If for example, the p one only had a style for font-color but not font-size, it will take the font color from p but the font- size from <body> (if body has a font-size)
</body></body></p>
Cascading rules for style, id, class and tag
The CSS standard specifies very specific rules to resolve conflicting styles.
A style attribute has the highest precedence (or is the most specific).
An #id is considered the next most specific
A .class is the next most specific, and
A <tag> is the least specific</tag>
on top of these are the inheritance rules we have already seen
DONT NEED TO KNOW THESE JUST KNOW IT EXISTS
It is sufficient to know:
why they are called Cascading Style Sheets
rules exist to determine the style behaviour if there are conflicts
in general, when there are conflicts, the “most specific” context is used
