![simple css website syntax simple css website syntax](https://i.ytimg.com/vi/1CqHws4WZ-M/maxresdefault.jpg)
#Simple css website syntax code#
This line of code links the new CSS file to your HTML file. So, open up the index.html file from the previous tutorial and add the highlighted line of code below (line 5) to the section of your document. We need to write a new line to link the html file and the css file together. Save your CSS file there.) Linking your HTML and CSS files Step 2īefore we even write the CSS, we actually have to go back to our HTML. Step 1Ĭreate a new file called “style.css” and save it in the same folder as your file called “index.html”. (In the previous tutorial, we created a “website” folder. In subsequent tutorials when our code gets complex, we’ll learn just how important it is to keep the two separate.
![simple css website syntax simple css website syntax](https://1.bp.blogspot.com/-q45Cx_nB4Sk/XxfgK3YRoYI/AAAAAAAAEtE/NIe20nvboL0WAoyzEVD6S49crTrGeN_6QCLcBGAsYHQ/s1600/css%2Bsyntax4.jpg)
This is a great example of what can be accomplished using just CSS to change the look of a web page. As you browse through the alternate designs for the site, bear in mind that every single design uses exactly the same HTML! The only thing that changes from design to design is the CSS file. The link will open in a new tab or window and I’ll take a coffee break.īack in the day, this site was pretty inspiring-it was one of the first online examples of just how powerful this relationship between HTML and CSS actually is. (By the way, HTML stands for HyperText Markup Language and CSS stands for Cascading Style Sheets, if you were wondering.)įor an amazing example of the concept of separating content from style with HTML and CSS, take a look at the site CSS Zen Garden. You can think of the HTML as the structure for the page, while the CSS gives the HTML it’s styling. There’s an important distinction between the two. HTML and CSS are two different types of markup (code), which have their own unique syntax (the arrangement in which code is written). To do this, we’re going to learn some CSS… Why use HTML and CSS? What’s the difference? Now we want to start making it look good. This post builds off the previous tutorial What exactly is a website? An HTML overview in the Web Development Basics Series. You’ll need to grab the code from the previous post to follow along with the steps below.Īfter completing the prior tutorial, we should have our first HTML file all ready to go.