Embed Size (px)
Citation preview
Intro to HTML & CSSRachel Schallom
Interactive Editor, Sun Sentinel
You will need…
Sublime Text 3 Google Chrome
Let’s start a folder on our desktop to keep the
files in.
Open a blank document in Sublime Text. Save it
as “index.html”
Starting an HTML doc<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>
Basic Tags• <h1></h1>
• <p></p>
• <ul></ul>
• <li></li>
• <img src=“img/puppy.jpg”>
• <a href=“http://google.com” target=“_blank”></a>
Adding Styles<link rel="stylesheet" href=“css/styles.css”>
Selectors<div class=“miami”></div>
Classes can be used multiple times.
<div id=“heat”></div>
IDs should only be used once.
Comments
<!—Comment in HTML goes here—>
/* This is a single-line comment in CSS */
Box Model
Media Queries@media all and (max-width:500px)
{h1 {font-size:2em;}
You can do media queries for:
• min-width
• max-width
• and in betweens
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
![[HTML, Css] HTML & Css Learning](https://img.dokumen.tips/doc/110x75/55cf9813550346d0339570eb/html-css-html-css-learning.jpg)
