1 / 7

Technologies for web publishing

Technologies for web publishing. Ing. Václav Freylich. Lecture 5. Content. CSS – cascading style sheets. What is CSS. Tool for the website developers Powerful „extension“ of the HTML CSS give us more control over the layout and design of the website than HTML ever did.

benny
Download Presentation

Technologies for web publishing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technologies for web publishing Ing. Václav Freylich Lecture 5

  2. Content • CSS – cascading style sheets aTNPW1-5

  3. What is CSS • Tool for the website developers • Powerful „extension“ of the HTML • CSS give us more control over the layout and design of the website than HTML ever did. • CSS allow us to develop the website according the XHTML respecting all standards aTNPW1-5

  4. CSS – inline declaration CSS values and properties can be written directly in the HTML code inside the atribute style (availiable in all HTML elements) <p style="color: red;"></p> aTNPW1-5

  5. CSS – external style sheet CSS are usualy defined in the external file Example: mystyle.css External file is linked with HTML document Example: <link rel="stylesheet" type="text/css" href="mystyle.css" /> aTNPW1-5

  6. CSS – rule syntax CSS rule consists of selector and list of definitions Example: body { background: white; margin: 0 0 0 0; } aTNPW1-5

  7. CSS –types of selectors Selector types (binding the style rule to the element) 1) element selector CSSp{ text-align: right;} HTML <p>Hello world</p> 2) class selector CSS .myclass { text-align: right;} HTML<p class="myclass">Hello world </p> 3) id selector CSS #myid { text-align: right;} HTML<p id="myid">Hello world </p> aTNPW1-5

More Related