Lecture 8 - CSS Flashcards
What is CSS
CSS stands for Cascading Style Sheets
* CSS provides and easy way to determine how HTML
elements should be displayed (e.g. fonts, spacing, colours
etc.)
* It saves a lot of coding because it can control the layout of
multiple web pages simultaneously.
Inline styles
Inline styles are added as element attributes (e.g. a heading or a
paragraph) and apply only to that specific attribute.
Embedded styles
- Embedded styles are CSS code segments that are included in the
head of an HTML document. These styles are only available in
that specific document, but can apply to multiple elements in
that document.
External styles
- External styles are stored in CSS files and can be linked to any
HTML page. - External styles are preferred
What does a CSS rule consist of and explain the two
A CSS rule-set consists of a selector and a declaration block, for
example:
Property
h1 { color:red; font-size:16px; }
Selector Value
* The selector points to the HTML element you want to style. In
the above example it will apply to level 1 headings.
* The part between curly braces is the declaration block.
* This example will style the headings to be red and of size 16pt
What is the declaration block
The declaration block contains one or more declarations separated
by semicolons.
* Each declaration includes a CSS property name and a value,
separated by a colon.
* A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
* The above example will style a paragraph element to be in an Arial
font of size 12.
What are inline styles, and how are they included?
An inline style may be used to apply a unique style for a single
element in an html document.
For example:
<h1>This is a heading</h1>
<p>This is a
paragraph</p>
- The inline style attribute is added directly to the relevant element
and can contain one or more CSS properties in double quotes (i.e.
instead of curly braces). - Different property:value pairs are separated by semi-colons
How embedded styles are included
How embedded styles are included
<!DOCTYPE html>
<html>
<head>
<style>
p { text-align: center;
color: red;
}</style></head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
The CSS style for paragraphs is
here included in the head of the
html document.
All paragraph elements in the
document will be style
according to this – i.e. they will
be center aligned and in red.
How are external styles linked?
An external style sheet can be written in any text editor. The file
should not contain any html tags, only css rules.
* The style sheet file must be saved with a .css extension.
* To apply an external style sheet to an html document, include a
reference to the CSS file inside the <link></link> element of the html
document.
* The <link></link> element is inside the <head> section
For example, if a set of css rules as saved in a file called SomeStyle.css,
the following statements should be included in the html document:
<head>
<link></link>
</head>
NOTE: Inline styles override styles that are embedded or linked in the
same document’s head
The class selector
The class Selector
* Any html element can be associated with a class. For example, the following
elements are all associated with class “product”:
<h1>This is a category heading</h1>
<h2>This is a product heading</h2>
<p>This is product information</p>
- A CSS style can be applied to these elements by using the class as a selector,
for example, the style:
.product { font-family:arial; margin-left:15px; }
will be only applied to any elements with class attribute “product”. - A class selector is always preceded by a period.
- If a class should only apply to specific types of html elements the element
should be specified in the class style (e.g.
p.product { font-family:arial; margin-left:15px; }
will only be applied to paragraphs with class = “product”.
Selectors other than element types
The id Selector
* Any html element can include a unique id attribute by which it can be
identified. For example, the id of the following paragraph element is
“intro”:
<p>This is an introductory paragraph</p>
- A CSS style can be applied to a specific element by using its id as a
selector, for example, the style:
#intro {
text-align: center;
color: red;
}
will be only applied to the paragraph with id “intro” and not to any other
paragraph. - An id selector is always preceded by a #
Multiple selectors
A style may include more than one selector separated by
commas.
For example
h1, h2, p { font-family:arial; margin-left:15px; }
This style will be applied to three types of html elements.
Note: comments can be included in style sheets by placing them
between /* and */.
MArgin?
Margin
– Used to create space around any borders of an element
– Can be view by inspecting a webpage with your browser (as
shown in class)
– Properties (Note: Shorthand follows this order)
* margin-top
* margin-right
* margin-bottom
* margin-left
– Shorthand
* margin: ‘top’ ‘right’ ‘bottom’ ‘left’;
– Auto property
– margin: auto; (horizontally centres the element)
Padding
Padding
– Follows the same syntax as margin and shorthand notation, but
instead it generates space around an elements content as
shown in the image.
Types of selectors
Descendant Selector
– Parent then child
– Matches all elements that are descendants of a element.
– Example
* div h1 { … }
* .container p { … }
* #top-nav div { … }
* Child Selector
– Selects all elements that are the children of an element.
– div > p { … }
– Can use classes and ids as shown above in descendant selector.
* Self-study
– Adjacent sibling selector (div + p { … })
– General sibling selector (div ~ p { … })
– Other methods of selecting, such as selecting only inputs of type
text (Example: input[type=text] {…} )
