Scribd
Upload
36 views3 pages

CSS in Practice Printable

CSS (Cascading Style Sheets) allows you to define styles for HTML elements. There are multiple ways to define styles including external style sheets, internal style sheets, and inline styles. When multiple styles are defined, they cascade with inline styles overriding other styles. CSS uses selectors to target specific elements and properties to define styles for things like color, font, background, and more. External style sheets can be linked using the <link> tag while internal style sheets use the <style> tag. Common CSS properties include font, text, background, border, and others.

Uploaded by

yprabathme68
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
36 views3 pages

CSS in Practice Printable

CSS (Cascading Style Sheets) allows you to define styles for HTML elements. There are multiple ways to define styles including external style sheets, internal style sheets, and inline styles. When multiple styles are defined, they cascade with inline styles overriding other styles. CSS uses selectors to target specific elements and properties to define styles for things like color, font, background, and more. External style sheets can be linked using the <link> tag while internal style sheets use the <style> tag. Common CSS properties include font, text, background, border, and others.

Uploaded by

yprabathme68
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 3

What is CSS?

• CSS stands for Cascading Style Sheets


– Styles define how to display HTML elements
– Styles are normally stored in Style Sheets
Cascading Style Sheet (CSS) – Styles were added to HTML 4.0 to solve a problem
– External style sheets can save a lot of work
– External style sheets are stored in CSS files
– Multiple style definitions will cascade into one

• Example: my homepage
• Another example:
http://www.w3schools.com/css/demo_default.htm (.html)

Multiple Ways to Define Style Multiple Styles Cascade Into One

• External Style Sheet (.css files) • What style will be used when there is more
• Internal Style Sheet than one style?
– Browser default
• Inline Styles
– External style sheets are included
– Embedded styles (inside the <head> tag) override
• Examples: http://www.w3schools.com/html/html_styles.asp external styles
– Inline styles (inside an HTML element) override both
embedded and external styles
• More: default style, CSS changed by
– Styles modified with JavaScript override all other
JavaScript styles

3 4

CSS Style Rule Selector Strings

property names • Type selector:


declarations – Element type, such as body, p, hr, etc.
• See previous example
p{ – Multiple element types using the same style are
font-size: x-large ; separated by comma
• h1, h2, h3, h4, h5, h6 {background-color:purple}
background-color: yellow
} • ID selector:
– #p1, #s1 {background-color: blue}
selector string declaration block – <p id=“p1”> … </p>
– <span id=“s1”>…</span>
– id values are case-sensitive

5 6

1
Sector Strings, Continue … Selector Strings, Continue …

• Class selector: • A selector within the content of certain element types


– .myitalic {font-style: italic} – ul span {color: green}: applies to a span element within a
– .myred {color: red} ul element
– <span class=“myitalic myred”> … </span> – ul ol li {letter-spacing: 1em}: applies to an li element
– class values are case sensitive within an ol element that is within a ul element
– multiple classes can be applied, separated by space
– All but a few elements, such as html, head, and elements
that appear as content of head, have the class attribute • CSS comments
/* This is a comment */
• ID and class selectors can be prefixed by an element p{
type name text-align: center;
– p.right {text-align: right} /* This is another comment */
– p#left {text-align: left} color: black; font-family: arial
– <p class=“right”> … </p> }
– <p id=“left”> … </p>
7 8

How to Insert a Style Sheet? CSS Basics

• External style sheet • Background


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
• Text
</head> • Font
• Internal style sheet • Border
<head>
<style type="text/css"> • Outline
hr {color: sienna}
• Margin
p {margin-left: 20px}
</style> • Padding
</head>
• List
• Inline style
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
• Table

9 10

CSS Advanced Font

• CSS dimension • Generic font families defined in


• CSS classification HTML and CSS are:
– Serif
• CSS positioning
– Sans-serif
• CSS pseudo-class
– Monospace
• CSS pseudo-element – Cursive
• CSS media types – Fantasy
• There are a lot other font
families, but might not be well
supported

11 12

2
How to Select a Font Family? Selecting Font, Continue

• Rules-of-Thumb • Use serif fonts for print


– Don’t use more than 3-4 fonts on any one page – If you have print friendly versions of your site, use
– Don’t change the font in mid sentence unless you serif fonts
have a very good reason
– Examples: garamond, georgia, new york, times,
– Sans-serif for online, serif for print times new roman
– Monospace for typewriter and code
– Script and fantasy for accents
• Monospace for bode examples
– Use it to provide instructions, give examples, or
• Sans-serif fonts are the basis of your site, for imply typewritten text
example:
– Examples: courier, courier new, lucida console,
– Arial, geneva, helvetica, lucida sans, trebuchet,
monaco
verdana
– Verdana is a font family that was actually invented
for use on the web

13 14

Case Study Case Study

• Fixed width layouts vs. Liquid layouts • How to build a 3-column layout:
– https://medium.com/@space.alpaca/so-what-exactly-is- – https://www.w3schools.com/howto/howto_css_two_columns.asp
the-difference-between-fixed-fluid-adaptive-and- • Steps:
responsive-layouts-and-why-3773272d8481
– Draw your layout
• Fixed width layouts: – Create and style a Container element
– The width of the entire page is set with a specific – Use a Headline Tag for the Header
numerical value
– To get 3 columns, start by building 2 columns
– Then add 2 columns inside the wide second column
• Liquid layouts: – Add in the Footer
– The width of the entire page is flexible depending – Add in your personal style and content
upon how wide the viewer’s browser is

15 16

Free Web Templates

• https://www.freewebtemplates.com/
• https://www.os-templates.com/free-website-templates

17

You might also like