MySuccess Website Designer Associate Version 2.0

Topic 6 – Getting Started with CSS In this Lesson

• Introduction • Separating content from presentation. • Placing CSS. • CSS Selectors • Selectors. • Practical CSS • Styling headings. • Styling lists. • Styling links. • Styling tables. • Styling DIVs. • Styling images and videos. • Styling forms.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 2 Introduction Placing CSS • CSS consists of creating a block of rules. • Each block applies to one or more elements in a page. • The blocks then consist of rules which modify the appearance of the element. • The elements can be selected by their element type, their id or their class name. • CSS can be added inline with an element, it can be embedded in an HTML file or it can be placed in an external file.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 4 Example CSS Placement • With inline placement, you specify the rules for an element in a style attribute of that element:

Redundant Language

• This will make just this particular

red. • With embedded placement, CSS rules are specified inside a • This will make all

headers on this page red. • The best practice is to have CSS in a separate file, and then link to this file from the pages that need it. This allows the CSS to remain in one place, and changing this CSS will apply changes throughout the whole site. MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 5 Selectors Selectors
• A selector is used to choose an element from the page (called the DOM). • Style rules are then applied to the selector. • CSS have several selectors, the basics being:
Selector Example Description element p Selects an HTML tag .class .articleHeader Selects an element by its class attribute #id #firstArticle Selects an element by its id

A header

h1 { .article { #terms {

… … …

} } }

• You should use classes when there is more than one item with that class in the page (such as an article in a blog). • You should use IDs when there is only one item with that id in the page (such as the page header).

Selector Example Example Description element p Selects all

elements .class .articleHeader Selects the element with the ‘articleHeader’ class #id #firstArticle Selects the element with the ‘firstArticle’ id * * Selects all elements element, element div, p Selects all

and all

elements element element div p Selects all

elements inside

elements element > element div > p Selects all

elements where the parent is a

element element + element div + p Selects all

elements that are placed immediately after

elements [attribute] [target] Selects all element with a target attribute [attribute=value] [target=_blank] Selects all element with a target attribute value set to ”_blank” [attribute |= value] [lang |= en] Selects all element with a lang attribute value starting with “en” [attribute ~= value] [title ~= flower] Selects all elements with a title attribute containing the word “flower” :active a:active Selects the active link ::after p::after Insert something after the content of each

element ::before p::before Insert something before the content of each

element

Selector Example Example Description :first-child p:first-child Selects every

element that is the first child of its parent ::first-letter p::first-letter Selects the first letter of every

element ::first-line p::first-line Selects the first line of every

element :focus input:focus Selects the input element which has focus :hover a:hover Selects links on mouse over :lang(language) p:lang(it) Selects every

element with a lang attribute equal to “it” (Italian) :link a:link Selects all unvisited links :visited a:visited Selects all visited links

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 10 Practical CSS Practical CSS • Let’s create some CSS for Joe’s Blog. • Add a new folder to the site called ‘styles’, and create a ‘styles.css’ file inside. • Before we start using this file, we have to tell the pages of our site to use this styles file – we can easily do this by adding a reference to the file in the site template. • Open normal.dwt and add a link in the section.

Home

* { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 10pt; } • The font-family rule specifies a list of fonts to try and use on the browser. • If the first font is not available, the second one is tried, and so on. • Dreamweaver will suggest suitable fonts for you – the best fonts for web are sans-serif fonts. • The second rule specifies a default font size.

• Now let’s add some style to the headers. /** Header Styles **/ h1 { font-size: 24pt; } h3 { font-style: italic; font-size: 14pt; margin-left: 40px; text-transform: capitalize; line-height: 0.5; } h4 { font-size: 12pt; } • Looking better already! • Styling headers is very much the same as styling text, with a number of rules available, shown in the next slide.

Property Description color Sets the colour of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration (underline, strike through, overline…) added to text text-shadow Specifies the shadow effect added to text text-transform Controls the capitalisation of text text-overflow Specifies how overflowed content that is not displayed should be signaled to the user (for example: hidden, or with scroll bars). unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in text

• We want to use different bullets for the lists in our page. • The list-style-type property can be used to change the type of bullet displayed in unordered lists or the type of number displayed in ordered lists. • A full list of supported types can be found here.

ul { list-style-type: square; }

Property Description list-style Sets all the properties for a list in one rule list-style-image Specifies an image as the list-item marker list-style-position Specifies if the list-item markers should appear inside or outside the content flow list-style-type Specifies the type of list-item marker

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 16 Styling Links • A link has four states: • a:link – a normal, unvisited link. • a:visited – a link that the user has previously visited. • a:hover – a link underneath the mouse cursor. • a:active – a link, the moment it is clicked. • Ok, so let’s style the links. /** Links **/ a:link { text-decoration: none; color: #158ABE; } a:visited { text-decoration: none; color: #158ABE; } a:hover { text-decoration: underline; color: #158ABE; } a:active { text-decoration: underline; color: red; }

• Next up, the table. • Let’s use some professional styling here to get a really nice table. • Check out codepen for the full example. • The following styles are for the table header:

44: Text colour 43 th { 44 color:#D5DDE5;; 45: Background colour 45 background:#1b1e24; 46 border-bottom:4px solid #9ea7af; 46: Grey bar at the bottom of the header row 47 border-right: 1px solid #343a45; 48 font-size:15px; 47: Border at the right of header bar 49 font-weight: 100; 48: Font size. 50 padding:14px; text-align:left; 51 49: Font weight (specific value). 52 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 53 vertical-align:middle; 50: Cell padding. 54 } 51: Horizontal text alignment.

52: Text shadow (size and colour).

53: Vertical alignment

• In the previous CSS, we specified the ’padding’ value. The padding is part of the CSS box model.

• Content: The text in the cell. • Padding: space between the text and the border. • Border: The border width and colour. • Margin: Space between the border and other elements.

• The header row is done, now let’s style the other rows.

56 tr { A row 57 border-top: 1px solid #C1C3D1; 58 border-bottom: 1px solid #C1C3D1; 57, 58: Border of a row 59 color:#666B85; 60 font-size:12px; 59: Text colour font-weight:normal; 61 60: Text size 62 text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); 63 } 61: Text weight (normal – not bold). 64 tr:hover td { 65 background:#4E5066; 62: Text shadow 66 color:#FFFFFF; 67 border-top: 1px solid #22262e; 68 border-bottom: 1px solid #22262e; } A row, when the mouse is over it 69 65: Different background colour

66: Change text colour to be visible on new background

67,68: Change border colours too.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 20 Styling Tables • All the rows have the same (white) background colour, which makes the table difficult to read. • Let’s make even rows white and odd rows grey.

tr:nth-child(odd) td { background:#EBEBEB; } tr:nth-child(odd):hover td { background:#4E5066; }

• The above changes the background colour, and the hover background colour of all rows. • The nth-child selector can accept a number in brackets, for example nth-child(3) means the third row. • Odd and even are special selectors for every odd/even row respectively.

• Finally, we style the cells. td { background:#FFFFFF; padding:20px; text-align:left; vertical-align:middle; font-weight:300; font-size:12px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } • We also remove the table border defined in HTML, as well as the row with a defined ‘rowspan’.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 22 Styling DIVs: The Header • Using DIVs, we can style our page so it has an easy to follow layout. • Let’s start by making the page header look like a header. • Open normal.dwt, surround the header with a div and remove the

Joe Doe's Blog

A blog on life, technology, and everything else.

• Now we add a style rule for the pageHeader container: #pageHeader { margin: 0px; background-image: url(../img/header_tile.jpg); height: 200px; padding: 10px; } • You can find the image used here, or use your own.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 23 Styling DIVs: The Header • Next, we make some changes to h1 and h3 tags. /** Header Styles **/ h1 { margin: 20px auto 0 auto; display: block; text-align: center; font-size: 24pt; color: white; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace" } h3 { margin: 20px auto 0 auto; display: block; text-align: center; font-style: italic; font-size: 14pt; text-transform: capitalize; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; color: white; } • We also remove the default body margins:

body { margin: 0; }

• Now we need to style the articles. • Add a class attribute to the DIVs surrounding the articles, with a value of “pageArticle”. • Now add another DIV around the article content (excluding the h4 header):

Redundant Langauge

Lately, I've been thinking a lot about redundant

• The two DIVs allow us to style the different parts of the article separately.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 25 Styling DIVs: Articles • Now we create the style rules: /** Articles **/ .pageArticle { display: block; border: 1px solid #c0c0c0; margin: 10px; padding: 0; } .pageArticle h4 { background-color: #506363; margin: 0; height: 30px; padding: 10px 0px 0px 10px; color: white; } .articleContent { padding: 0 5px 5px 5px; } • Note the ‘padding’ rule is a shortcut to use padding-top, padding-right, padding-bottom, and padding-left – in that order.

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 6 | Slide 26 Styling DIVs: Menu • We will now style the menu. /** Nav **/ nav { display: block; background-color: #c0c0c0; height: 40px; padding: 0px 0px 0px 10px; } nav a { font: bold 11px Arial; text-decoration: none !important; background-color: #EEEEEE; color: #333333 !important; padding: 10px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; display: inline-block; width: 70px; text-align: center; height: 20px; margin: 4px; } nav a:hover { background-color: #E2D237 !important; }

• The image of Dennis Ritchie in the second post looks out of place, let’s add some styling to images in articles. • Whilst we’re at it, we’ll also add some styling to tables in articles.

.articleContent img { margin-left: auto; margin-right: auto; display: block; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; max-height: 300px; } .articleContent table { width: 600px; margin-left: auto; margin-right: auto; }

/** Form Styles **/ #channelSelect { • Finally, we’re going to style the form in form { margin-left: 110px; margin-left: 10px; margin-top: 10px; the contact page. margin-top: 20px; } } #queryLabel { label { margin-left: -14px; • Add a class attribute to the query and display: inline-block; margin-bottom: 10px; width: 100px; } channel labels, with value wideLabel. text-align: right; #btnSubmit { font-weight: bold; margin-left: 730px; • id margin-right: 4px; width: 70px; Add an attribute to the subscribe } } textarea { checkbox, with value subscribeCheck. margin-left: 104px; } • Add an id attribute to the drop-down .wideLabel { width: 200px; list, with value channelSelect. margin-left: 100px; } #subscribeCheck { • Add an id to the text area’s label, with margin-left: 110px; value queryLabel. } • Add an id to the submit button, with value btnSubmit.

• Finally, let’s style the footer. • Give the footer paragraph an id of “pageFooter”.

/** Footer **/ #pageFooter { display: block; height: 20px; background-color: #c0c0c0; padding: 10px; }