CSS
CSS: to customise background colour, text colour, text font; display tables with borders etcSeparation of concerns: a program is divided into distinct sections such that each section only deals with 1 aspect of the final product and has minimal knowledge of the other parts
Web page’s structure (how content is organised: HTML) & presentation (how content is displayed: CSS) are largely independent of each other ⇒ handle in separate files
- Modify web page’s structure without affecting its presentation and vice versa
- ⇒ Specialises the HTML & CSS languages so each language is more suited for its purpose
https://www.csszengarden.com/ : Click on any available design to see how changing CSS style sheets can change web page’s appearance without modifying its HTML
- Ctrl+U: show source code for HTML & CSS
CSS Style Sheet
- 1st part of the HTML document can include some CSS inside a <style> tag
- E.g. Ctrl-U www.example.com
- CSS style sheet can also be in a separate .css file (can edit using Notepad++) & link it to a HTML file using a <link> tag
- E.g. under head: <link rel=”stylesheet” href=”example.css”>
- Rel: relationship; Href: hyperlink (URL of CSS style sheet)
- Use relative paths so the style sheet is always linked correctly even if directory and its contents are moved to another location
- E.g. <link rel=”stylesheet” href=”styles/colours.css”>
- Style sheet is made of multiple rules, each starting with >=1 selectors separated by commas, then curly braces surrounding a number of declarations
- Each declaration is made up of: a property name & >=1 values separated by space
- Multiple declarations are separated by semicolons
Selectors
- Determines, at the start of a rule, the elements which are affected by each CSS rule
- Picks out (selects) a set of elements from the HTML document to be affected by the rule’s declarations
- Element Selectors
- Picks out all elements of a particular type from the HTMl document
- Enter name of a tag or element type (e.g. body, h1, table, etc)
- E.g. p { color: blue; font-style: italic; } ⇒ all p elements appear as blue italic texts
- id Selectors
- Picks out / identifies unique element that has a particular value for its id attribute
- If set, its value must be unique within the HTML document and cannot contain any whitespace
- Web page cannot have >1 element with the same id attribute
- Enter hex symbol (#) then the desired element’s id attribute value
- id attributes on a web page cannot be repeated ⇒ id selectors always pick out exactly 1 element if it exists
- E.g. in html body: <p id=“special”>This paragraph is special.</p>
in css: special { color: red; } ⇒ format that specific p element as red - class Selectors
- Picks out all elements associated with >= 1 particular class (i.e. categories)
- If set, its value must be a space-separated list of class names
- Multiple elements on a web page can have the same value for their class attribute
- Enter a period (.) then the class name we wish to reference
- E.g. in html body: <p class=“info major”>This is some major information.</p>
in css: .info { color: silver; }
⇒ format as silver; but additional class “major” has no effect as they do not match any of the selectors used in the style sheet - Descendent Selectors
- Selects an element only if the element has a parent element that matches another selector
- Separate any 2 selectors using a space: the corresponding rule will only be applied for elements that match the selector on the right and have a parent element that matches the selector on the left
- E.g. in html body: <h1>Heading with <i>Italics</i></h1>
<p>This paragraph has <i>italics</i>.</p>
<i>Bare italics</i>
in css: p i { color: red; }
⇒ Selector requires i element to be a predescendent of a p element
⇒ Only p element has italics portion formatted as red
E.g.
# multiple_example.html <!doctype html><html><head><title>Example</title></head><body><h1>Example</h1><div><h2><a id="link1" href="link1.html">Link 1 </a></h2><p><a id="link2" href="link2.html">Link 2 </a></p></div><p><a class="simple" href="link3.html">Link 3</a></p><a class="simple" href="link4.html">Link 4</a></body></html> |
|---|
# multple_example.css__ { background: red;}⇒ ___ can be a, link2, .simple, div a, etc An element may be selected for >1 rule in the style sheet If these rules have conflicting declarations, the rule with a selector that is msot specific to the element has priority (CSS language defines an algorithm to calculate specificity of a selector) |
Properties that can be set by rule declarations
- Common properties
- Colour names for background and color (text color of elements) properties
- red, orange, yellow, green, blue, purple, black, grey, silver, white, transparent (no colour)
- Or any colour in terms of its red, green, blue components ⇒ rgb(R, G, B)
- E.g. body { background: rgb(255, 255, 128); } ⇒ pale yellow
- Or express colour as 3 hexadecimal numbers of 2 digits each (including a leading 0 if needed) **⇒ rrggbb
- E.g. body { background: ffff80; } ⇒ pale yellow
- Note: ff is integer 255 in hexadecimal, 80 is integer 128
- Hexadecimal digits are not case sensitive
- If each of the 3 hexadecimal numbers is made of repeated digits (e.g. 00, 11, 22, …, FF), colour can be shortened to #RGB
- E.g. 00ffcc can be shortened to 0fc
- Can also use a repeating image as the background ⇒ url(PATH)
- PATH: path & filename of background image
- E.g. body { background: url(pattern.png): }
- pattern.png is located within the same folder with the style sheet
- Display property to hide the element by setting its value to none, or set to either block or inline
- Box model properties
- Block and Inline Appearance
- HTML tags (e.g. <h1>, <p>) always start on a new line and force the following element to also start on a new line
- ⇒ these have a block appearance by default
- But <b> or <i> do not
- ⇒ these have an inline appearance by default
- Can use the display property to override these defaults
- <div> and <span> tags
- Creates generic block or inline element to represent some structural feature of a document that the built-in HTML tags do not provide
- Generally used in combination with id and class attributes to help clarify their purpose
- Margin, Border, Padding, Width, Height
- Determines how the box surrounding the block element is sized & displayed
| Border | Specifies thickness of the optionally-coloured border around the element |
|---|---|
| Margin | Specifies thickness of the transparent space surrounding the border |
| Padding | Specifies thickness of the space between the content and the border that is filled with the element’s background colour or pattern |
| Width | Specifies element content’s width, regardless of the surrounding margin, border, & padding |
| Height | Specifies element content’s height, regardless of the surrounding margin, border, & padding |
- Box model:
- Must specify unit of measurement (e.g. px for pixels)
- E.g. p {
background: silver;
padding: 10px;
}
- E.g. p { border: 5px solid red; }
- By default, controls appearance for all 4 sides of element’s box
- But can append -bottom, -left, -top, or -right to these properties to control appearance for only 1 side of the box
- E.g. p { border-right: 1px solid gray; }
- If a box’s width < document’s width, can center the box horizontally
⇒ set its margin-left & margin-right properties to auto
- E.g. p {
background: silver;
margin-left: auto;
margin-right: auto;
width: 100px;
} - border-collapse: collapse
- Typography properties
- Uses properties to specify how text in each element is displayed
- font-family: specifies which typeface is used to display the text
- Its value is most often a comma-separated list of font names, ending with either serif or sans-serif
- If a font name has spaces, must enclose within brackets (e.g. “Times New Roman”
- Browser uses 1st font in the list that is installed
- If none of the named fonts are installed, will use a generic serif or sans-serif font instead
- A serif font (e.g. “Times New Roman”) has lines extending from the ends of each letter stroke ⇒ used for long pieces of printed text
- A san-serif font (e.g. “Arial”) does not have these additional lines
- font-size: specifies text size in pixels
- E.g. p { font-size: 24px; }
- font-style: specifies whether an italic font is used
- Most common values: normal, italic
- font-weight: specifies whether a bold font is used
- Most common values: normal, bold
- E.g. p {
font-style: italic;
font-weight: bold;
}
- text-align: specifies how text is aligned in its box
- Most common values: left, center, right, justify
- text-decoration: specifies whether additional elements of the font are displayed
- Most common values: none, underline, line-through
- E.g. p {
text-decoration: line-through;
}
- do pg 21-22 q7